From 8f8b10c917c4b4f9fc9098bf23c5b2eb9a013a5a Mon Sep 17 00:00:00 2001 From: jack Date: Fri, 31 Jul 2026 01:04:58 +0800 Subject: [PATCH] feat(browser): surface Browser Bridge install --- README.md | 6 +-- extension/README.md | 16 ++++++-- site/docs/overview/browser-use.md | 57 ++++++++++++++++++++--------- web/src/components/SettingsView.tsx | 33 ++++++++++++++++- web/src/i18n/locales/en.ts | 2 + web/src/i18n/locales/ja.ts | 2 + web/src/i18n/locales/ko.ts | 2 + web/src/i18n/locales/zh-Hans.ts | 2 + web/src/i18n/locales/zh-Hant.ts | 2 + 9 files changed, 96 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 86273ff8..490982bb 100644 --- a/README.md +++ b/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 diff --git a/extension/README.md b/extension/README.md index c406299f..f87e65f7 100644 --- a/extension/README.md +++ b/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**. diff --git a/site/docs/overview/browser-use.md b/site/docs/overview/browser-use.md index 574fd4ae..760aadfe 100644 --- a/site/docs/overview/browser-use.md +++ b/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 | diff --git a/web/src/components/SettingsView.tsx b/web/src/components/SettingsView.tsx index 406ed7b3..353c130b 100644 --- a/web/src/components/SettingsView.tsx +++ b/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(null) @@ -3457,12 +3462,38 @@ function BrowserTab() { {st?.extension_online ? t('settings.browser.connected') : t('settings.browser.notConnected')} - {st?.extension_online && ( + {st?.extension_online ? ( {t('settings.browser.online')} + ) : ( + + {t('settings.browser.installExtension')} + + )} + {!st?.extension_online && ( +
+

+ {t('settings.browser.connectHint')} +

+ + {t('settings.browser.setupGuide')} + +
+ )} + {!st?.chrome_found && (
diff --git a/web/src/i18n/locales/en.ts b/web/src/i18n/locales/en.ts index 9d83b6cc..9338f0ec 100644 --- a/web/src/i18n/locales/en.ts +++ b/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', diff --git a/web/src/i18n/locales/ja.ts b/web/src/i18n/locales/ja.ts index ff9978f9..3745bd25 100644 --- a/web/src/i18n/locales/ja.ts +++ b/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: 'ナビゲート', diff --git a/web/src/i18n/locales/ko.ts b/web/src/i18n/locales/ko.ts index fa352752..2cd095f1 100644 --- a/web/src/i18n/locales/ko.ts +++ b/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: '탐색', diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts index c9750846..555d0b0a 100644 --- a/web/src/i18n/locales/zh-Hans.ts +++ b/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: '导航', diff --git a/web/src/i18n/locales/zh-Hant.ts b/web/src/i18n/locales/zh-Hant.ts index 5541dbbd..bd891730 100644 --- a/web/src/i18n/locales/zh-Hant.ts +++ b/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: '導航',