Building extensions
What a Connect+ extension is, the principles behind it, and a minimal end-to-end quick start.
A Connect+ extension is a folder (or a signed .cxt package) with a connect.json
manifest and some HTML/JS/CSS. It runs against a native window.connect API — not
chrome.*. Chrome's surface is used only as a design checklist; every capability is
reimplemented natively and may differ from or exceed Chrome.
Four principles shape everything:
- Native-first, not Chrome-shaped. Similar names, native semantics.
- Capability-first security. Extensions request capabilities; the user grants scoped, revocable handles. Default-deny — nothing works until granted.
- Promise-only. Every method returns a
Promise. No callback-style APIs. - Per-profile. An extension is installed into a profile. Its storage, grants, cookies, and background all live inside that profile.
Where to go next:
- The manifest — every
connect.jsonfield. - Capabilities & consent — how permissions work.
- Surfaces & calling the API — popups, backgrounds, content scripts, and error handling.
- Packaging & trust — signing,
.cxt, and updates. - API reference — every
connect.*namespace, method, and event.
Quick start
Build a minimal extension end to end.
1. Create the folder
com.example.hello/2. Write connect.json
{
"manifestVersion": 1,
"id": "com.example.hello",
"name": "Hello",
"version": "1.0.0",
"apiVersion": "1",
"description": "A minimal Connect+ extension.",
"icons": { "48": "icon.png" },
"ui": { "action": { "entry": "popup.html", "defaultTitle": "Hello" } },
"capabilities": ["tabs.read"]
}3. Write popup.html
<!doctype html>
<meta charset="utf-8" />
<body style="width: 260px; font: 13px system-ui; padding: 12px">
<div id="out">Loading…</div>
<script src="popup.js"></script>
</body>4. Write popup.js
(async () => {
const tabs = await connect.tabs.query({ active: true });
document.getElementById('out').textContent =
tabs[0] ? `Active tab: ${tabs[0].url}` : 'No active tab';
})();5. Load it
Open Extensions → Developer mode → Load unpacked… and pick the folder. Grant the requested capabilities when prompted, then click the toolbar button.
public/docs-img/extensions/load-unpacked.pngThat's the whole loop: manifest → surface → API → load → consent → run. The rest of the docs are the full menu of what goes in each piece.