@btraut/browser-bridge 0.5.0 → 0.6.1

package/CHANGELOG.md

@@ -6,17 +6,32 @@ The format is based on "Keep a Changelog", and this project adheres to Semantic
 
 ## [Unreleased]
 
+_TBD_
+
+## [0.6.1] - 2026-02-10
+
 ### Added
 
-_TBD_
+- README: competitor feature comparison table.
 
 ### Fixed
 
-_TBD_
+- Extension popup menu: Settings/About always open in a new tab/window (no more crushing the UI inside the popup).
+- Extension options: default permissions mode to Granular when unset, and show a real empty state for the approved sites allowlist.
+- Extension options: remove the nested-card empty state styling, simplify the copy, and always show the Approved sites disclosure + list in both Granular and Bypass modes.
+- Extension options: add a drop shadow to the permission mode controls to match the rest of the settings containers.
+- Extension options: remove the "Bypass mode is intentionally unsafe" warning box.
+- Extension options: tighten and vertically align the Approved sites disclosure triangle.
 
 ### Changed
 
-_TBD_
+- Expand `scripts/cli-full-tool-smoke.sh` coverage (health-check, locator variants, ref reuse, more dom-snapshot modes, more screenshot options).
+
+## [0.6.0] - 2026-02-09
+
+### Added
+
+- Extension options: permissions mode toggle (Granular per-site vs dangerous bypass), with bypass collapsing and ignoring the approved sites allowlist.
 
 ## [0.5.0] - 2026-02-09
 

package/README.md

@@ -8,85 +8,53 @@
 
 Browser Bridge drives your real, local Chrome (not headless) and inspects page state through a Chrome extension plus a local daemon. You stay in the loop with your existing tabs and login state.
 
-What makes it different:
-
-- **Real browser state**: operate on your actual Chrome profile (tabs, cookies, logins, extensions).
-- **Two-plane architecture**: a **drive** plane that does what a user does (click, type, navigate), plus an **inspect** plane that reads state (DOM, console, screenshots). This separation makes runs less flaky and lets inspection happen in parallel.
-- **Token-efficient inspection**: stable element refs like `@e1` (find once, reuse everywhere) plus knobs to bound output (`--max-nodes`, `--compact`, `--interactive`, `--selector`).
-- **Structured errors for agents**: stable error codes with a `retryable` flag (no more guessing whether to retry).
-- **Recovery-first**: sessions have an explicit state machine with `session.recover()` and `diagnostics doctor`.
-- **Inspect beyond screenshots**: DOM snapshots (AX + HTML) and `inspect dom-diff` to detect page changes.
-
-## Why Browser Bridge
-
-Browser Bridge is built for agent reliability and "stay logged in" workflows in your real Chrome, not for headless test automation.
-
-If you're coming from Playwright/Puppeteer-style tooling:
-
-- Browser Bridge targets the user's existing, interactive Chrome session by default (typical Playwright/Puppeteer flows spin up a separate browser/context).
-- Browser Bridge surfaces retry guidance in the API (`retryable`) instead of forcing the agent to infer it from exceptions and timing.
-- Browser Bridge ships a first-class inspect plane (DOM snapshots, diffs, diagnostics) designed for LLM consumption, with output-bounding options to keep agent context small.
-
-If you're coming from an extension-only MCP tool:
-
-- Browser Bridge puts a stateful local Core daemon behind the tools (sessions, recovery, diagnostics, artifacts).
-- Drive actions are serialized for determinism; inspect is a separate plane that can keep producing structured state.
-- CLI works everywhere; MCP is optional.
-
-## How It Works
-
-Core keeps a session state machine and exposes a small set of stable tools:
+## 🏁 Install + Quickstart (Do This First)
 
-- `session.*` - lifecycle + recovery
-- `drive.*` - navigation + input (single-flight)
-- `inspect.*` - DOM snapshots/diffs + evaluation
-- `diagnostics.*` - health checks
-- `artifacts.*` - screenshots
+You need Node.js 20+ and Chrome (stable). Browser Bridge is local-only (binds to 127.0.0.1).
 
-## Requirements
-
-- Node.js 20+
-- Chrome (stable)
-- Browser Bridge extension (Chrome Web Store listing pending; see manual install below)
-- Local-only usage (all services bind to 127.0.0.1)
-
-## Install (CLI)
+1. Install the CLI:
 
 ```bash
 npm i -g @btraut/browser-bridge
 browser-bridge --help
 ```
 
-## Chrome Extension (Manual Install)
+2. Run the installer:
+
+```bash
+browser-bridge install
+```
 
-Chrome Web Store listing is pending. For now, install the extension manually:
+Select your client(s) (Codex, Claude, Cursor, etc).
 
-1. Download the latest pre-built extension zip from [GitHub Releases](https://github.com/btraut/browser-bridge/releases) (Assets), unzip it, and use the unzipped folder for step 3.
+3. Install the Chrome extension:
 
-Alternative (build from source):
+- Chrome Web Store listing is pending. For now, install manually.
+- Download the latest pre-built extension zip from [GitHub Releases](https://github.com/btraut/browser-bridge/releases) (Assets), unzip it.
+- Chrome -> `chrome://extensions` -> enable **Developer mode** -> **Load unpacked** -> select the folder with `manifest.json`.
 
-1. Clone this repo.
-2. Install deps and build:
+<details>
+<summary>Build the extension from source (instead of using a release zip)</summary>
 
 ```bash
 npm install
 npm run build
 ```
 
-3. Open Chrome and navigate to `chrome://extensions`.
-4. Enable **Developer mode**, click **Load unpacked**, and select the extension folder (the folder with `manifest.json`).
+Then load the unpacked extension from `packages/extension/`.
 
-Notes:
+</details>
+
+4. Try it:
 
-- Browser Bridge enforces a per-site allowlist for `drive.*` actions. The first time it acts on a new site, you'll see a permission prompt.
-- You can review and revoke approved sites via the extension options page (Extensions menu -> Browser Bridge -> Extension options).
-- If you click **Decline**, the command fails with `PERMISSION_DENIED` (non-retryable). If you don't respond in time, you'll see `PERMISSION_PROMPT_TIMEOUT` (retryable once after the user allows).
+```text
+Use Browser Bridge to navigate to https://example.com.
+```
 
-## Quickstart
+If Chrome shows a Browser Bridge permissions prompt, approve it, then tell the agent to retry.
 
-1. Install the extension.
-2. (Optional) Run `browser-bridge install` (skill + optional MCP).
-3. Run a quick CLI check (Core auto-starts by default):
+<details>
+<summary>CLI sanity check (debugging)</summary>
 
 ```bash
 browser-bridge session create
@@ -100,7 +68,108 @@ Notes:
 
 - `inspect dom-snapshot` defaults to `--format ax`; `--max-nodes` is only supported for AX snapshots.
 
-## Skills (Agent Clients)
+</details>
+
+## ✨ What You Get
+
+What makes it different:
+
+- **Real browser state**: operate on your actual Chrome profile (tabs, cookies, logins, extensions).
+- **Two-plane architecture**: a **drive** plane that does what a user does (click, type, navigate), plus an **inspect** plane that reads state (DOM, console, screenshots). This separation makes runs less flaky and lets inspection happen in parallel.
+- **Safe-by-default drive permissions**: `drive.*` actions are blocked on new sites until you approve them. You can allow once, always allow (per-site allowlist you can audit/revoke), or enable a clearly-labeled bypass mode if you want zero guardrails.
+- **Token-efficient inspection**: stable element refs like `@e1` (find once, reuse everywhere) plus knobs to bound output (`--max-nodes`, `--compact`, `--interactive`, `--selector`).
+- **Structured errors for agents**: stable error codes with a `retryable` flag (no more guessing whether to retry).
+- **Recovery-first**: sessions have an explicit state machine with `session.recover()` and `diagnostics doctor`.
+- **Inspect beyond screenshots**: DOM snapshots (AX + HTML) and `inspect dom-diff` to detect page changes.
+
+## 🔒 Site Permissions (Drive Actions)
+
+Browser Bridge is intentionally safe: **drive actions** (`drive.navigate`, click, type, etc.) require **per-site approval**. `inspect.*` is not gated, so agents can inspect first and only ask for permission when it's time to click/type.
+
+<details>
+<summary>How approvals work (click to expand)</summary>
+
+- The first time a `drive.*` action targets a new site, Chrome opens a small permissions prompt.
+- Click **Allow this action** to allow once (no allowlist entry).
+- Click **Always allow actions on this site** to add the site to your approved-sites allowlist.
+- Click **Decline** to fail the command with `PERMISSION_DENIED` (non-retryable).
+- If you ignore the prompt, the command fails with `PERMISSION_PROMPT_TIMEOUT` (retryable). Default wait is 30 seconds; approve the prompt, then retry the command.
+
+Manage approvals (and bypass mode):
+
+- Open the extension options page from `chrome://extensions` (Browser Bridge -> **Extension options**) or from the Extensions toolbar menu (Browser Bridge -> **Extension options**).
+- The options page shows your **Approved sites** allowlist with revoke controls.
+- Switch **Permission mode** to **Bypass (dangerous)** to skip the allowlist and prompts entirely.
+- In bypass mode, the agent can take actions on any website without asking.
+- Restricted URLs (for example `chrome://` and `file://`) are still blocked.
+
+</details>
+
+## 🧰 Tools (MCP + CLI)
+
+The CLI mirrors the MCP tool surface.
+
+<details>
+<summary>All MCP tools (click to expand)</summary>
+
+**session**
+
+- `session.create`
+- `session.status`
+- `session.recover`
+- `session.close`
+
+**drive**
+
+- `drive.navigate`
+- `drive.go_back`
+- `drive.go_forward`
+- `drive.back`
+- `drive.forward`
+- `drive.click`
+- `drive.hover`
+- `drive.select`
+- `drive.type`
+- `drive.fill_form`
+- `drive.drag`
+- `drive.handle_dialog`
+- `drive.key`
+- `drive.key_press`
+- `drive.scroll`
+- `drive.wait_for`
+- `drive.tab_list`
+- `drive.tab_activate`
+- `drive.tab_close`
+
+**dialog**
+
+- `dialog.accept`
+- `dialog.dismiss`
+
+**inspect**
+
+- `inspect.dom_snapshot`
+- `inspect.dom_diff`
+- `inspect.find`
+- `inspect.extract_content`
+- `inspect.page_state`
+- `inspect.console_list`
+- `inspect.network_har`
+- `inspect.evaluate`
+- `inspect.performance_metrics`
+
+**artifacts**
+
+- `artifacts.screenshot`
+
+**misc**
+
+- `health_check`
+- `diagnostics.doctor`
+
+</details>
+
+## 🧩 Skills (Agent Clients)
 
 Browser Bridge skills work across many agent clients, including Codex and Claude Code.
 
@@ -110,13 +179,6 @@ Easiest option (recommended):
 browser-bridge install
 ```
 
-Skill only:
-
-```bash
-browser-bridge skill install
-browser-bridge skill status
-```
-
 Or copy the Browser Bridge skill into your agent skills directory (advanced):
 
 ```bash
@@ -131,7 +193,7 @@ cp -R "$(npm root -g)/@btraut/browser-bridge/skills/browser-bridge" ~/.claude/sk
 
 Restart your agent app if it does not pick up the new skill automatically.
 
-## MCP Server (Optional)
+## 🧪 MCP Server (Optional)
 
 The MCP server runs over stdio and forwards tool calls to Core. It is optional, since you can use the CLI directly. MCP clients launch it automatically when needed, so you typically do not run it yourself.
 
@@ -140,7 +202,8 @@ The MCP server runs over stdio and forwards tool calls to Core. It is optional,
 - Use your MCP client to call `tools/list`, then `session.create`
 - Override Core host/port with `--host`, `--port`, or `BROWSER_BRIDGE_CORE_HOST` / `BROWSER_BRIDGE_CORE_PORT`.
 
-## Manual MCP Setup (Advanced)
+<details>
+<summary>Manual MCP setup (advanced)</summary>
 
 Codex:
 
@@ -172,19 +235,21 @@ claude mcp add --transport stdio browser-bridge \
   -- browser-bridge mcp
 ```
 
-## Diagnostics
+</details>
+
+## 🩺 Diagnostics
 
 - CLI: `browser-bridge diagnostics doctor --session-id <id>`
 - Reports extension and debugger status alongside session state.
 
-## Recovery
+## 🔧 Recovery
 
 If drive or inspect gets into a bad state, recovery is explicit:
 
 - `browser-bridge session recover --session-id <id>`
 - Then retry the failed operation once (tools report whether failures are `retryable`).
 
-## Session TTL (Core Daemon)
+## 🧹 Session TTL (Core Daemon)
 
 The Core daemon keeps sessions in memory. By default, it automatically cleans up idle sessions after 1 hour.
 

package/extension/assets/ui.css

@@ -96,6 +96,10 @@ body.bb-page.bb-page--popup {
   background: var(--bb-bg);
 }
 
+.bb-menu--shadow {
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
+}
+
 body.bb-page--popup .bb-menu {
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
 }
@@ -271,6 +275,10 @@ body.bb-page--popup .bb-menu {
   color: var(--bb-ink-2);
 }
 
+.bb-site-empty > * + * {
+  margin-top: 8px;
+}
+
 .bb-link-button {
   appearance: none;
   border: 0;
@@ -295,16 +303,6 @@ body.bb-page--popup .bb-menu {
   color: var(--bb-accent);
 }
 
-.bb-empty {
-  margin-top: 12px;
-  border: 1px dashed var(--bb-border-2);
-  border-radius: var(--bb-radius-sm);
-  padding: 12px;
-  font-size: 13px;
-  color: var(--bb-ink-2);
-  background: rgba(0, 0, 0, 0.02);
-}
-
 .bb-toast-wrap {
   position: fixed;
   left: 14px;
@@ -351,3 +349,100 @@ body.bb-page--popup .bb-menu {
     monospace;
   font-size: 0.95em;
 }
+
+.bb-fieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
+.bb-fieldset-legend {
+  padding: 0;
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: var(--bb-ink-2);
+  font-weight: 650;
+}
+
+.bb-radio-row {
+  cursor: pointer;
+}
+
+.bb-radio {
+  flex: 0 0 auto;
+}
+
+.bb-radio-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.bb-radio-title {
+  font-weight: 650;
+}
+
+.bb-radio-title--danger {
+  color: var(--bb-accent);
+}
+
+.bb-radio-sub {
+  font-size: 12px;
+  color: var(--bb-ink-2);
+  font-weight: 500;
+}
+
+.bb-warning {
+  margin-top: 10px;
+  border: 1px solid rgba(224, 107, 61, 0.35);
+  border-radius: var(--bb-radius-sm);
+  background: rgba(224, 107, 61, 0.1);
+  padding: 10px 12px;
+  font-size: 13px;
+}
+
+.bb-sites-details {
+  margin-top: 14px;
+}
+
+.bb-sites-summary {
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 650;
+  padding: 10px 6px 0;
+  color: var(--bb-ink);
+}
+
+.bb-sites-summary::-webkit-details-marker {
+  display: none;
+}
+
+.bb-sites-summary::before {
+  content: '▸';
+  display: block;
+  flex: 0 0 auto;
+  font-size: 20px;
+  line-height: 1;
+  color: var(--bb-ink);
+  transform: translateY(-1px);
+}
+
+details[open] > .bb-sites-summary::before {
+  content: '▾';
+}
+
+.bb-sites-details--no-summary > .bb-sites-summary {
+  display: none;
+}
+
+.bb-sites-ignored {
+  margin: 10px 0 8px;
+  font-size: 13px;
+  color: var(--bb-ink-2);
+}

package/extension/dist/background.js

@@ -96,6 +96,8 @@ var sanitizeDriveErrorInfo = (error) => {
 var SITE_ALLOWLIST_KEY = "siteAllowlist";
 var PERMISSION_PROMPT_WAIT_MS_KEY = "permissionPromptWaitMs";
 var DEFAULT_PERMISSION_PROMPT_WAIT_MS = 3e4;
+var SITE_PERMISSIONS_MODE_KEY = "sitePermissionsMode";
+var DEFAULT_SITE_PERMISSIONS_MODE = "granular";
 var siteKeyFromUrl = (rawUrl) => {
   if (!rawUrl || typeof rawUrl !== "string") {
     return null;
@@ -154,6 +156,27 @@ var writeAllowlistRaw = async (allowlist) => {
     );
   });
 };
+var readSitePermissionsMode = async () => {
+  return await new Promise((resolve) => {
+    chrome.storage.local.get(
+      [SITE_PERMISSIONS_MODE_KEY],
+      (result) => {
+        const raw = result?.[SITE_PERMISSIONS_MODE_KEY];
+        if (raw === "granular" || raw === "bypass") {
+          resolve(raw);
+          return;
+        }
+        try {
+          chrome.storage.local.set({
+            [SITE_PERMISSIONS_MODE_KEY]: DEFAULT_SITE_PERMISSIONS_MODE
+          });
+        } catch {
+        }
+        resolve(DEFAULT_SITE_PERMISSIONS_MODE);
+      }
+    );
+  });
+};
 var readPermissionPromptWaitMs = async () => {
   return await new Promise((resolve) => {
     chrome.storage.local.get(
@@ -1170,6 +1193,9 @@ var DriveSocket = class {
             };
           }
         }
+        if (await readSitePermissionsMode() === "bypass") {
+          return { ok: true, siteKey, touchOnSuccess: false };
+        }
         if (await isSiteAllowed(siteKey)) {
           return { ok: true, siteKey, touchOnSuccess: true };
         }
@@ -1287,21 +1313,9 @@ var DriveSocket = class {
           if (tabId === void 0) {
             tabId = await getDefaultTabId();
           }
-          try {
-            const isBack = message.action === "drive.go_back" || message.action === "drive.back";
-            await wrapChromeVoid((callback) => {
-              if (isBack) {
-                chrome.tabs.goBack(tabId, () => callback());
-              } else {
-                chrome.tabs.goForward(tabId, () => callback());
-              }
-            });
-          } catch (error) {
-            respondError({
-              code: "FAILED_PRECONDITION",
-              message: error instanceof Error ? error.message : "No history entry.",
-              retryable: false
-            });
+          const result = await sendToTab(tabId, message.action);
+          if (!result.ok) {
+            respondError(result.error);
             return;
           }
           markTabActive(tabId);