Chrome Extension
Apply BreakColorUI tokens directly inside the Breakdance and Oxygen builders
The BreakColorUI Connector Chrome Extension turns any color, spacing, typography or radius input in Breakdance (and Oxygen) into a one-click token picker. No copy-paste, no remembering CSS variable names.
Bridge between Dashboard and Breakdance
v1.0.0 | Dashboard
Install from the Chrome Web Store
The extension is published on the Chrome Web Store with the ID meffhfalkknnpiklfjkahdgpfhngechk.
Four-step install
- Open the BreakColorUI Connector listing on the Chrome Web Store.
- Click Add to Chrome and confirm the permissions prompt.
- (Optional) Click the puzzle icon in Chrome's toolbar and pin the extension.
- Open a project in BreakColorUI, go to the Export tab, and click Copy & Sync — this pushes your project data to the extension.
The extension ships with manifest_version: 3 and works in any recent Chrome / Edge / Brave. It does not interact with any input until you actively click on it inside Breakdance.
How sync works
The dashboard talks to the extension through Chrome's externally_connectable channel. When you click Copy & Sync in the Export tab:
- The current project is copied to the clipboard (always).
- If the extension is installed, the dashboard sends a
LOAD_SETTINGSmessage to it viachrome.runtime.sendMessage. - The extension stores the project (colors, typography, spacing, theme, export settings) in
chrome.storage.local. - A Supabase Realtime broadcast is fired so other tabs see the update too.
Resync after every save
The extension caches the project locally. After you change anything in the dashboard, click Copy & Sync again — otherwise the modal in Breakdance will keep showing yesterday's tokens.
If the extension isn't installed, Copy & Sync still copies the CSS to the clipboard so you can paste it manually. There's no error.
Using the modal in Breakdance
The modal is identical in shape to the Quick Access dialog you see in the dashboard.
How to open the modal
Right-click — that's it. There's no keyboard shortcut and no toolbar button. The modal lives in your browser's right-click context menu inside the builder.
Working with library blocks?
The Quick Access modal is for picking individual tokens. To paste a full Breakdance block from the library, use ⌘ V (macOS) or Ctrl + V (Windows / Linux) on the builder canvas — see Blocks & Elements Library.
Copy modes
Inside the modal, a toggle switches between:
- CSS Variables — applies
var(--hcl-brand-9)to the input. Best for theme-aware sites that change with light/dark. - HEX — applies the resolved value (
#0090ff). Best for quick one-offs or non-themed projects.
The choice persists in localStorage (breakcolorui-modal-theme) so it survives across sessions.
Theme toggle
When the project's export mode is Full System, a sun/moon button in the modal flips between light and dark previews. The active theme is mirrored to the iframe via the data-hsx attribute, so the canvas previews the correct mode while you pick.
If the project is exported as Light Only or Dark Only, the toggle is hidden — there's only one set of values to show.
Privacy and permissions
The extension lists three permissions in manifest.json:
| Permission | Why it's needed |
|---|---|
storage | Persist your project data (colors, typography, etc.) so the modal can render them |
activeTab | Detect when the current tab is the Breakdance builder and inject the modal |
contextMenus | Add the right-click "Open BreakColorUI" entry |
tabs | Coordinate the modal between the builder iframe and its parent frame |
No external connections
- Project data lives in
chrome.storage.local. Nothing is sent to BreakColorUI servers from the extension. - The dashboard pushes data into the extension via Chrome's
externally_connectablechannel — that channel is locked to*.breakcolorui.comandlocalhost(see the manifest), nothing else can talk to it. - Open
chrome://extensions/, click Details on BreakColorUI Connector to inspect the exact permissions and source.
Troubleshooting
Extension not detected when clicking Copy & Sync
- The dashboard tries multiple Extension IDs (production + dev). If you're running an unpacked dev version, your build's ID may not be in the list — install the published version instead.
- HTTPS is required when the dashboard runs from a public origin. The exception is
localhost, which works over HTTP. - After installing or re-enabling the extension, refresh the dashboard tab once before clicking Copy & Sync.
When to choose the extension
The extension is the right choice when:
- You're a single designer or developer working in your own browser
- You bounce between multiple WordPress sites and don't want to install a plugin on each
- You don't need real-time sync — clicking Copy & Sync once per session is fine
If you have a team editing the same site, or you want changes in the dashboard to propagate to the live builder without anyone re-syncing, look at the WordPress plugin instead.