feat(browser): surface Browser Bridge install

README.md

@@ -184,9 +184,9 @@ or **your** Chrome via the jcode Browser Bridge extension (your logins, your tab
 Toggle with `/browser` in the TUI or Settings → Browser on the web. See the
 [Browser Use guide](https://www.j-code.net/docs/overview/browser-use).
 
-> The extension currently installs via `chrome://extensions` → Developer mode →
-> **Load unpacked** (from the repo's `extension/` folder) — the Chrome Web Store
-> listing is in review.
+Install [jcode Browser Bridge from the Chrome Web Store](https://chromewebstore.google.com/detail/jcode-browser-bridge/olkapiiikpfhaccmjphakolinkcggcbd),
+then open its popup and click **Auto-connect to jcode**. Loading the repository's
+`extension/` folder as an unpacked extension remains available for development.
 
 ### ⏱ Automations
 

extension/README.md

@@ -6,11 +6,19 @@ browser-use feature (the other backend is a managed Chrome jcode launches
 itself; that one needs no extension). See
 [`site/docs/overview/browser-use.md`](../site/docs/overview/browser-use.md).
 
-The extension has a **fixed id** (`ekcnniaefmnhnemnpphikhgfoofnojnd`, pinned by
-the `key` field in `manifest.json`) so the id is stable across machines and
-reloads. That's what makes the one-click deeplink below possible.
+The Chrome Web Store build has id `olkapiiikpfhaccmjphakolinkcggcbd`. The
+unpacked development build has a separate fixed id
+(`ekcnniaefmnhnemnpphikhgfoofnojnd`, pinned by the `key` field in
+`manifest.json`) so native messaging works across reloads.
 
-## Install (unpacked, for development)
+## Install
+
+[Install jcode Browser Bridge from the Chrome Web Store](https://chromewebstore.google.com/detail/jcode-browser-bridge/olkapiiikpfhaccmjphakolinkcggcbd).
+
+Then start jcode with browser use enabled (Settings → Browser → on) and continue
+with **Auto-connect** below.
+
+### Unpacked development build
 
 1. Start jcode web/desktop.
 2. Open `chrome://extensions` (or `edge://extensions`), enable **Developer mode**.

site/docs/overview/browser-use.md

@@ -37,28 +37,49 @@ Tabs the agent controls in your Chrome are grouped under a **"jcode 🔎"** tab
 group so you always see what's under agent control. Detach the debugger (or
 click the popup's Disconnect) and control returns to you immediately.
 
-## Installing the extension
-
-> [!IMPORTANT]
-> The extension is **not yet on the Chrome Web Store** — the store listing is
-> in review. For now it must be loaded manually in developer mode from the
-> `extension/` folder of the repository. The extension has a fixed ID, so a
-> manual install behaves identically to a store install (and will be replaced
-> by it once published).
-
-1. Get the `extension/` folder — clone the repo or download it from GitHub.
-2. Open `chrome://extensions` (or `edge://extensions`) and enable
-   **Developer mode** (toggle in the top-right corner).
-3. Click **Load unpacked** and select the `extension/` folder.
-4. Start jcode with browser use enabled (Settings → Browser → on, or
-   `/browser on` in the TUI).
-5. Click the extension's toolbar icon → **Auto-connect to jcode**. It finds
-   the running jcode app via native messaging — even on a dynamic desktop-app
-   port — and connects. You connect once; afterwards it reconnects silently.
+## Set up the extension
+
+> [!TIP]
+> [Install **jcode Browser Bridge** from the Chrome Web Store](https://chromewebstore.google.com/detail/jcode-browser-bridge/olkapiiikpfhaccmjphakolinkcggcbd).
+
+1. Start jcode, then enable browser use in **Settings → Browser** or run
+   `/browser on` in the TUI.
+2. Install **jcode Browser Bridge** from the Chrome Web Store. Pin it to the
+   toolbar if you want the connection control to stay visible.
+3. Click the extension icon, then click **Auto-connect to jcode**.
+4. Confirm that **Settings → Browser → Extension** says **Connected**, or run
+   `/browser` in the TUI.
+
+The extension uses native messaging to find the running jcode app, including a
+desktop app using a dynamic port. The first connection stores a local pairing
+token; after that, the extension reconnects silently when jcode starts. Click
+**Disconnect** in the extension popup to revoke the token and detach every
+controlled tab.
+
+### Development install
+
+When testing an unpublished extension change, load the repository copy:
+
+1. Open `chrome://extensions` (or `edge://extensions`) and enable
+   **Developer mode**.
+2. Click **Load unpacked** and select the repository's `extension/` folder.
+3. Start or restart jcode with browser use enabled, then click the extension's
+   **Auto-connect to jcode** button.
 
 The extension only ever talks to your local jcode (`host_permissions` are
 limited to `127.0.0.1` / `localhost`) and sends nothing to any third party.
 
+### If it does not connect
+
+- Make sure jcode is running and browser use is enabled.
+- If the popup says the native host is unavailable, restart jcode once with
+  browser use enabled. jcode installs the native-messaging registration at
+  startup.
+- In the extension's site-access settings, allow access to `127.0.0.1` and
+  `localhost`, reload the extension, then try **Auto-connect to jcode** again.
+- Run `/browser` or open **Settings → Browser** to check whether the extension
+  is online.
+
 ## The tools
 
 | Tool | What it does |

web/src/components/SettingsView.tsx

@@ -47,6 +47,7 @@ import {
   XMarkIcon,
   MinusIcon,
   ArrowPathIcon,
+  ArrowTopRightOnSquareIcon,
   ExclamationTriangleIcon,
   CircleStackIcon,
   WrenchScrewdriverIcon,
@@ -3314,6 +3315,10 @@ function AppearanceTab() {
 // Browser tab — config + site permissions
 // ════════════════════════════════════════════════════════════════════════════
 
+const BROWSER_BRIDGE_STORE_URL =
+  'https://chromewebstore.google.com/detail/jcode-browser-bridge/olkapiiikpfhaccmjphakolinkcggcbd'
+const BROWSER_USE_GUIDE_URL = 'https://www.j-code.net/docs/overview/browser-use'
+
 function BrowserTab() {
   const { t } = useTranslation()
   const [status, setStatus] = useState<BrowserStatusResponse | null>(null)
@@ -3457,12 +3462,38 @@ function BrowserTab() {
                   {st?.extension_online ? t('settings.browser.connected') : t('settings.browser.notConnected')}
                 </div>
               </div>
-              {st?.extension_online && (
+              {st?.extension_online ? (
                 <span className={CHIP + ' !bg-[var(--color-success-bg)] !text-[var(--color-success-fg)]'}>{t('settings.browser.online')}</span>
+              ) : (
+                <a
+                  className={`${BTN_SECONDARY} ${BTN_XS} shrink-0`}
+                  href={BROWSER_BRIDGE_STORE_URL}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {t('settings.browser.installExtension')}
+                  <ArrowTopRightOnSquareIcon className="h-3 w-3" />
+                </a>
               )}
             </div>
           </div>
 
+          {!st?.extension_online && (
+            <div className="mt-2 flex items-center gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-muted)] px-3 py-2">
+              <p className="min-w-0 flex-1 text-[10.5px] leading-relaxed text-[var(--color-muted-foreground)]">
+                {t('settings.browser.connectHint')}
+              </p>
+              <a
+                className="shrink-0 text-[10.5px] font-medium text-[var(--color-accent-neutral)] hover:underline"
+                href={BROWSER_USE_GUIDE_URL}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {t('settings.browser.setupGuide')}
+              </a>
+            </div>
+          )}
+
           {!st?.chrome_found && (
             <div className="mt-3">
               <label className="text-[11px] font-medium text-[var(--color-muted-foreground)]">{t('settings.browser.chromePath')}</label>

web/src/i18n/locales/en.ts

@@ -649,6 +649,8 @@ export default {
       notConnected: 'Not connected',
       online: 'Online',
       connectHint: 'To connect: install the jcode Browser Bridge extension, open its popup, and click "Auto-connect to jcode".',
+      installExtension: 'Install extension',
+      setupGuide: 'Setup guide',
       chromePath: 'Chrome path',
       approval: 'Approval',
       navigate: 'Navigation',

web/src/i18n/locales/ja.ts

@@ -603,6 +603,8 @@ export default {
       notConnected: '未接続',
       online: 'オンライン',
       connectHint: '接続方法: jcode Browser Bridge 拡張をインストールし、ポップアップから "Auto-connect to jcode" を押します。',
+      installExtension: '拡張機能をインストール',
+      setupGuide: 'セットアップガイド',
       chromePath: 'Chrome パス',
       approval: '承認',
       navigate: 'ナビゲート',

web/src/i18n/locales/ko.ts

@@ -603,6 +603,8 @@ export default {
       notConnected: '연결 안 됨',
       online: '온라인',
       connectHint: '연결 방법: jcode Browser Bridge 확장을 설치하고 팝업에서 "Auto-connect to jcode"를 클릭하세요.',
+      installExtension: '확장 설치',
+      setupGuide: '설정 가이드',
       chromePath: 'Chrome 경로',
       approval: '승인',
       navigate: '탐색',

web/src/i18n/locales/zh-Hans.ts

@@ -633,6 +633,8 @@ export default {
       notConnected: '未连接',
       online: '在线',
       connectHint: '连接方式：安装 jcode Browser Bridge 扩展，打开它的 popup，点 "Auto-connect to jcode"。',
+      installExtension: '安装扩展',
+      setupGuide: '设置指南',
       chromePath: 'Chrome 路径',
       approval: '审批',
       navigate: '导航',

web/src/i18n/locales/zh-Hant.ts

@@ -604,6 +604,8 @@ export default {
       notConnected: '未連線',
       online: '線上',
       connectHint: '連線方式：安裝 jcode Browser Bridge 擴充，開啟 popup，點 "Auto-connect to jcode"。',
+      installExtension: '安裝擴充功能',
+      setupGuide: '設定指南',
       chromePath: 'Chrome 路徑',
       approval: '審批',
       navigate: '導航',