Architecture & Logic

Deep dive into the internals of Picky.Editor. Learn how we handle DOM manipulation, state sync, and the Chrome Extension lifecycle.

Project Structure

The project is divided into two primary directories, separating the core extension logic from the user interface:

`extension/`

Contains the standard Chrome Extension files like manifest.json, background worker, and vanilla JS content scripts.

`extension-ui/`

A React application (Vite-powered) acting as the sidebar frontend. Build outputs merge into the main extension folder.

Core Architecture Overview

Picky.Editor relies on Chrome's Side Panel API. It injects a suite of modular content scripts into the active tab to read the DOM, extract computed styles, and handle highlights.

+----------------+                       +-------------------+
| React Sidebar  |   Message Passing     |  Content Scripts  |
| (extension-ui) | <===================> |   (DOM runtime)   |
+--------+-------+                       +---------+---------+
         |                                         |
         |         +-------------------+           |
         +-------- | Background Script | ----------+
                   |  (background.js)  |
                   +-------------------+

Component Breakdown

Background Service Worker background.js

Initializes the Side Panel on extension icon click.
Maintains reference count of active connections.
Broadcasts STOP_PICKING to tabs when panel closes.

Content Scripts

Modular scripts running in an IIFE, namespaced under window.Picky_Editor.

init.js

Re-exports modules and initializes tracking.

messaging.js

Routes messages (SCAN_PAGE, UPDATE_STYLE, etc.).

picking.js

Global mouse/click listeners for element selection.

inspector.js

DOM Reader - extracts rects, variables, and box-model.

overlay.js

Shadow DOM based highlight box for zero-interference.

tracker.js

Manages original style backups using WeakMap.

Extension UI (Sidebar App)

Tech Stack: React + Zustand

Features a tabbed interface (Overview, Inspector, Assets, Layout, Colors). It monitors tab lifecycle events to maintain synchronicity between the UI and the active DOM state.

Data Flow and Logic

Element Picking Flow

ActivateUser turns on Inspect Mode; UI sends START_PICKING.

ListenContent Script starts mousemove listeners.

HoverOverlay highlights elements in real-time.

SelectUser clicks; inspector.js runs getElementInfo().

SyncData is serialized and sent back to React UI.

Property Editing Flow

When a user modifies a property (e.g., padding), the UI fires an UPDATE_STYLE message. The content script finds the element by its assigned temporary ID.

Before applying the change, tracker.js snapshots the original computed style. The new style is then applied as inline CSS with !important priority.

Page Scanning

Execution: scanner.js pulls an array of document.querySelectorAll('*'), iterates through the first 800 nodes, tallies background/text colors, translates rgb/rgba to HEX and tallies font families.

Key Mechanisms

Element Tracking

Reverting styles relies on tracking. A WeakMap maintains a reference to modified elements without causing memory leaks. We snapshot the initial resolved property from getComputedStyle.

Overlay Highlights

To prevent interference, overlay.js uses a Shadow Root for the highlight box. pointer-events: none ensures the mouse pointer reads through the overlay.

Ready to start editing?

Back Home

LAST UPDATED: FEB 2026
DOCS_VERSION: 1.0.4-STABLE