mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-07-09 17:19:02 +00:00
fbdaa52c52
* feat(cli): gate browser automation adapter * fix(cli): close browser automation review gaps * test(cli): cover browser automation gates * fix(cli): close browser automation review gaps * fix(cli): close browser automation review gaps
82 lines
3.4 KiB
Markdown
82 lines
3.4 KiB
Markdown
# @qwen-code/chrome-bridge
|
|
|
|
A Chrome extension that brings Qwen Code into the browser as a thin client of a
|
|
local [`qwen serve`](../../docs/users/qwen-serve.md) daemon — no Native
|
|
Messaging host to install.
|
|
|
|
It does two things:
|
|
|
|
- **Side panel** — frames the daemon's Web Shell (chat + tools), the same UI the
|
|
daemon serves to the browser. The panel has no UI of its own.
|
|
- **Service worker** — a CDP-tunnel pipe. It connects to the daemon's `/acp`
|
|
WebSocket and bridges `cdp_*` frames into `chrome.debugger`, so the agent can
|
|
drive the real browser when an external CDP MCP adapter is configured.
|
|
|
|
## Build
|
|
|
|
```bash
|
|
npm run build # -> dist/extension (static assets + bundled service worker)
|
|
```
|
|
|
|
Then load it: `chrome://extensions` → enable Developer mode → **Load unpacked**
|
|
→ pick `dist/extension`.
|
|
|
|
## Run
|
|
|
|
The extension is a client; the daemon does the work and must be started
|
|
separately (an extension cannot spawn a local process). Open the side panel and
|
|
it will tell you exactly what to run — it generates the command with this
|
|
extension's own id:
|
|
|
|
```bash
|
|
qwen serve --allow-origin chrome-extension://<this-extension-id>
|
|
```
|
|
|
|
`--allow-origin chrome-extension://<id>` is required: it lets the daemon's Web
|
|
Shell be framed by the extension (the `frame-ancestors` CSP) and accepts the
|
|
extension's requests. The side panel reads the id at runtime via
|
|
`chrome.runtime.id`, so you never have to look it up.
|
|
|
|
Once the daemon is reachable and permits framing, the side panel swaps the
|
|
welcome screen for the chat UI automatically.
|
|
|
|
## Browser Automation Tools
|
|
|
|
The command above only makes the side panel and Web Shell available. Browser
|
|
automation tools such as console/network inspection, screenshots, and page
|
|
clicking require an explicit external MCP adapter command:
|
|
|
|
```bash
|
|
QWEN_CDP_MCP_COMMAND=/path/to/cdp-mcp-adapter \
|
|
qwen serve --allow-origin chrome-extension://<this-extension-id>
|
|
```
|
|
|
|
No browser automation adapter is bundled with the main `@qwen-code/qwen-code`
|
|
package. When `QWEN_CDP_MCP_COMMAND` is unset, the extension can still open the
|
|
Web Shell, but the daemon will not register browser automation MCP tools.
|
|
Clients can distinguish the states through `/capabilities`:
|
|
|
|
- `allow_origin` means the extension may frame and call the daemon.
|
|
- `cdp_tunnel_over_ws` means the daemon exposes the reverse CDP tunnel.
|
|
- `browser_automation_mcp` means the external adapter command is configured and
|
|
browser automation MCP tools can be registered when the CDP bridge connects.
|
|
|
|
## Onboarding states
|
|
|
|
The side panel probes `GET /health` and `GET /capabilities` and shows one of:
|
|
|
|
| State | Meaning | Shown |
|
|
| -------------------- | -------------------------------------- | -------------------------------- |
|
|
| `down` | no daemon reachable | "Start qwen serve" + command |
|
|
| `needs-allow-origin` | daemon up but `--allow-origin` not set | "Allow this extension" + command |
|
|
| `ready` | daemon up and framing permitted | the Web Shell (chat) |
|
|
|
|
## Packaging for the Chrome Web Store
|
|
|
|
```bash
|
|
npm run package # -> chrome-extension.zip (manifest at the zip root)
|
|
```
|
|
|
|
Upload the zip to the Chrome Web Store Developer Dashboard. Note that the
|
|
`debugger` and `<all_urls>` permissions will draw manual review — justify them
|
|
in the store listing.
|