🔧 Claw in Chrome 深度解析：解锁 Claude 浏览器扩展的完整技术揭秘

> 当官方的限制成为枷锁，社区的智慧便锻造出钥匙。

---

一、项目概览：Claw in Chrome 是什么？

1.1 项目定位与背景

Claw in Chrome 是 Claude in Chrome（Anthropic 官方 Chrome 扩展）的社区魔改版/解锁版，版本号为 1.0.66。该项目由 S-Trespassing 开发并开源在 GitHub 上，自 2026 年 4 月 5 日发布以来迅速获得社区关注（截至 4 月 6 日已获得 56 个 Star 和 7 个 Fork）。

这个项目的核心使命很简单：打破官方 Claude 浏览器扩展的登录限制和套餐限制，让用户真正掌控自己的 AI 体验。

1.2 与原版 Claude in Chrome 的关键差异

1.3 核心功能一览

1. 侧边栏聊天: 通过 Chrome SidePanel API 在浏览器侧边栏集成 AI 对话界面 2. 浏览器自动化: AI 可操控浏览器完成复杂任务（点击、填表、导航等） 3. MCP 支持: 完整的模型上下文协议权限管理 4. OAuth 集成: 支持第三方登录授权流程 5. 多语言国际化: 支持 13 种语言界面 6. 数据脱敏: 自动脱敏敏感字段的调试日志系统

---

二、架构深度解析：代码层面的技术揭秘

2.1 整体技术栈

Claw in Chrome 采用了现代化的浏览器扩展架构：

• 前端框架: React + TypeScript（打包后）
• 后台脚本: Chrome Extension Manifest V3 Service Worker
• 构建工具: Vite（从文件命名中的哈希可见）
• 状态管理: 自定义 React Hook（useStorageState）+ Chrome Storage API
• 消息通信: Chrome Extension Message API

2.2 文件结构全景图

claw-in-chrome/
├── manifest.json                    # 扩展配置清单
├── service-worker-loader.js         # Service Worker 加载入口
├── sidepanel.html                   # 侧边栏页面壳
├── options.html                     # 设置页面
├── managed_schema.json              # 托管配置 Schema
├── offscreen.js                     # 离屏脚本（OAuth 流程）
├── 
├── assets/                          # 打包后的核心资源
│   ├── sidepanel-BoLm9pmH.js      # 侧栏主界面（核心）
│   ├── service-worker.ts-H0DVM1LS.js # 后台消息桥
│   ├── PermissionManager-9s959502.js # 权限管理模块
│   ├── mcpPermissions-qqAoJjJ8.js    # MCP 权限与浏览器自动化
│   ├── useStorageState-hbwNMVUA.js   # 存储状态 Hook
│   ├── index-*.js                    # React 运行时与其他 chunks
│   └── ...                           # CSS、字体、图片资源
│
├── custom-provider-models.js       # 模型拉取模块
├── custom-provider-settings.js     # 设置页供应商配置 UI
├── sidepanel-inline-provider.js    # 侧边栏内联供应商配置
├── provider-format-adapter.js      # 供应商格式适配层
│
├── i18n/                           # 国际化资源
├── sounds/                         # 音效文件
└── docs/                           # 文档与截图

2.3 核心模块详解

#### 2.3.1 SidePanel 主界面 (sidepanel-BoLm9pmH.js)

这是整个扩展的前端核心，负责聊天 UI、模型选择、权限提示、OAuth 与供应商凭据刷新等所有用户交互功能。

根据反混淆成果，关键锚点包括：

• $Q(e = {}): 模型选择与粘性模型读取逻辑
• qQ: 会话输入 store（管理用户输入状态）
• t1: 权限弹窗 store（管理权限请求 UI）
• auth.refresh_state: 凭据刷新与 sidepanel 首屏鉴权
• **__cpModelBootstrap*: 模型首屏初始化去重逻辑

sidepanel.html
  → theme-init.js (主题初始化)
  → provider-format-adapter.js (供应商适配层)
  → sidepanel-debug-logger.js (调试日志)
  → assets/sidepanel-BoLm9pmH.js (主界面)
  → custom-provider-models.js (模型管理)
  → sidepanel-inline-provider.js (内联配置 UI)

作为 Manifest V3 的后台脚本，它承担着消息路由中枢的角色：

// 核心职责
1. sidepanel 打开/关闭事件处理
2. 权限通知管理
3. OAuth 刷新流程协调
4. MCP 权限回包处理
5. 原生消息传递（Native Messaging）
6. 扩展 URL 协议处理 (clau.de/chrome/*)

Service Worker 通过 ES Module 方式加载，依赖两个关键模块：

• mcpPermissions-qqAoJjJ8.js: 浏览器自动化与 MCP 权限
• PermissionManager-9s959502.js: 权限模型与 OAuth 辅助

• 权限检查: 检查 sidePanel、scripting、debugger 等权限状态
• 权限请求: 引导用户授予必要权限
• OAuth 辅助: 处理 OAuth 流程中的权限相关逻辑
• 状态广播: 通过自定义事件通知权限变化

const PermissionStatus = {
  GRANTED: "granted",
  DENIED: "denied",
  PROMPT: "prompt",
  UNAVAILABLE: "unavailable"
};

这是整个扩展最强大的功能模块，实现了 AI 对浏览器的深度操控：

核心功能: 1. 标签页管理: 创建、切换、关闭、分组标签页 2. 页面交互: 点击元素、填写表单、滚动页面 3. 截图能力: 捕获页面或元素截图 4. 代码执行: 在页面上下文中执行 JavaScript 5. 导航控制: 页面跳转、前进、后退 6. 无障碍树: 获取页面可访问性树结构

安全机制:

// URL 安全验证
async function securityCheck(tabId, expectedDomain, action) {
  const tab = await chrome.tabs.get(tabId);
  if (!tab.url) {
    return { error: "Unable to verify current URL" };
  }
  const actualDomain = extractDomain(tab.url);
  if (expectedDomain !== actualDomain) {
    return { 
      error: `Security check failed: Domain changed from ${expectedDomain} to ${actualDomain}` 
    };
  }
  return null;
}

#### 2.3.5 存储状态 Hook (useStorageState-hbwNMVUA.js)

自定义 React Hook，实现状态与 Chrome Storage 的双向同步：

// 核心设计
function useStorageState(key, defaultValue) {
  const [state, setState] = useState(defaultValue);
  
  // 初始化时从 storage 读取
  useEffect(() => {
    chrome.storage.local.get(key).then(result => {
      setState(result[key] ?? defaultValue);
    });
  }, [key]);
  
  // 监听 storage 变化
  useEffect(() => {
    const listener = (changes) => {
      if (changes[key]) {
        setState(changes[key].newValue);
      }
    };
    chrome.storage.onChanged.addListener(listener);
    return () => chrome.storage.onChanged.removeListener(listener);
  }, [key]);
  
  // 写入 storage
  const setStoredState = useCallback((newValue) => {
    chrome.storage.local.set({ [key]: newValue });
    setState(newValue);
  }, [key]);
  
  return [state, setStoredState];
}

2.4 自定义供应商系统架构

这是 Claw in Chrome 区别于原版的最核心创新。

#### 2.4.1 支持的供应商格式

interface CustomProviderConfig {
  enabled: boolean;           // 是否启用
  name: string;              // 供应商名称（用于区分）
  format: "anthropic" | "openai_chat" | "openai_responses";
  baseUrl: string;           // API Base URL
  apiKey: string;            // API 密钥
  defaultModel: string;      // 默认模型 ID
  reasoningEffort: "none" | "low" | "medium" | "high" | "max";
  contextWindow: number;     // 上下文窗口大小（单位：token）
  notes: string;             // 备注说明
  fetchedModels: Model[];    // 已获取的模型列表
}

这是一个精妙的请求/响应转换层，通过拦截全局 fetch 函数实现透明转换：

// 核心机制：拦截 fetch
const nativeFetch = globalThis.fetch.bind(globalThis);
globalThis[NATIVE_FETCH_KEY] = nativeFetch;

// 判断请求是否需要转换
function shouldIntercept(url, body) {
  const config = getConfig();
  if (!config.enabled || !config.baseUrl) return false;
  
  // 检查是否为 Claude API 请求
  return isClaudeApiRequest(url);
}

// 请求转换：Anthropic → OpenAI
function transformAnthropicToOpenAI(anthropicBody, format) {
  const openaiBody = {
    model: anthropicBody.model || config.defaultModel,
    messages: convertMessages(anthropicBody.messages),
    stream: anthropicBody.stream,
    max_tokens: anthropicBody.max_tokens
  };
  
  // 添加 reasoning_effort（如果支持）
  if (supportsReasoningEffort(openaiBody.model)) {
    openaiBody.reasoning_effort = config.reasoningEffort;
  }
  
  return openaiBody;
}

// 响应转换：OpenAI → Anthropic
function transformOpenAIToAnthropic(openaiResponse) {
  return {
    id: openaiResponse.id,
    type: "message",
    role: "assistant",
    content: extractContent(openaiResponse),
    usage: convertUsage(openaiResponse.usage),
    stop_reason: mapStopReason(openaiResponse.choices[0]?.finish_reason)
  };
}

关键设计亮点:

1. 零侵入: 不需要修改原始代码，通过全局 fetch 拦截实现 2. 格式自动推断: 根据 baseUrl 和模型名自动判断 API 格式 3. 流式响应支持: 完整支持 SSE（Server-Sent Events）流式转换 4. 错误处理: 统一的错误格式转换 5. Token 使用统计: 准确转换 usage 字段

#### 2.4.4 模型获取功能 (custom-provider-models.js)

支持从供应商的 /models 端点拉取可用模型列表：

async function fetchProviderModels(config) {
  const modelsUrl = buildModelsUrl(config.baseUrl);
  const response = await fetch(modelsUrl, {
    headers: { "Authorization": `Bearer ${config.apiKey}` }
  });
  
  const data = await response.json();
  return normalizeModels(data.data || []);
}

// 模型排序：优先展示对话类模型
function sortModels(models) {
  const conversationalHints = [
    "claude", "gpt", "o1", "o3", "o4", "o5", 
    "sonnet", "opus", "haiku", "chat"
  ];
  
  return models.sort((a, b) => {
    const aScore = conversationalHints.some(h => 
      a.id.toLowerCase().includes(h)
    ) ? 0 : 1;
    const bScore = conversationalHints.some(h => 
      b.id.toLowerCase().includes(h)
    ) ? 0 : 1;
    return aScore - bScore;
  });
}

---

三、代码走读：反混淆成果深度剖析

3.1 反混淆方法论

Claw in Chrome 基于原版 Claude in Chrome 的打包代码进行逆向和修改。原始代码是经过 Webpack/Vite 打包、混淆、压缩后的生产代码，主要特征包括：

• 变量名压缩：a, b, c 或 $Q, t1, qQ 等形式
• 代码块拆分：逻辑被拆分到多个 chunk 文件
• Tree Shaking：仅保留实际使用的代码

1. 断点调试: 在关键功能点设置断点，观察调用栈 2. 字符串搜索: 查找关键字符串（如 API 端点、错误消息） 3. 行为分析: 根据功能表现推断代码职责 4. 命名恢复: 根据语义给函数和变量赋予有意义的名称

3.2 关键文件分析

#### 3.2.1 SidePanel 首屏加载流程

// sidepanel-BoLm9pmH.js 关键路径

// 1. 模型选择初始化
function $Q(e = {}) {
  // 读取 chrome.storage 中的粘性模型设置
  const stickyModel = await chrome.storage.local.get("stickyModel");
  // 优先使用用户选择的模型，否则使用默认配置
  const selectedModel = e.model || stickyModel || config.defaultModel;
  return initializeModel(selectedModel);
}

// 2. 会话输入 Store
const qQ = createStore({
  input: "",
  attachments: [],
  isComposing: false,
  
  setInput: (text) => set({ input: text }),
  addAttachment: (file) => set((state) => ({
    attachments: [...state.attachments, file]
  }))
});

// 3. 权限弹窗 Store
const t1 = createStore({
  isOpen: false,
  permissionType: null,
  resolve: null,
  reject: null,
  
  request: (type) => new Promise((resolve, reject) => {
    set({ isOpen: true, permissionType: type, resolve, reject });
  }),
  
  grant: () => {
    get().resolve?.(true);
    set({ isOpen: false, resolve: null, reject: null });
  },
  
  deny: () => {
    get().reject?.(new Error("Permission denied by user"));
    set({ isOpen: false, resolve: null, reject: null });
  }
});

#### 3.2.2 Service Worker 消息路由

// service-worker.ts-H0DVM1LS.js 消息处理

async function handleMessage(message, sender) {
  switch (message.type) {
    case "OPEN_SIDEPANEL":
      await chrome.sidePanel.open({ tabId: sender.tab.id });
      break;
      
    case "REQUEST_PERMISSION":
      return await handlePermissionRequest(message.permission);
      
    case "OAUTH_REFRESH":
      return await refreshOAuthToken(message.refreshToken);
      
    case "MCP_TOOL_REQUEST":
      return await executeMcpTool(message.tool, message.args);
      
    case "NATIVE_MESSAGING":
      return await handleNativeMessage(message.payload);
  }
}

// Native Messaging 桥接（与 Claude Desktop 通信）
let nativePort = null;

async function connectNativeHost() {
  const hosts = [
    "com.anthropic.claude_browser_extension",
    "com.anthropic.claude_code_browser_extension"
  ];
  
  for (const hostName of hosts) {
    try {
      const port = chrome.runtime.connectNative(hostName);
      
      // 验证连接
      const isConnected = await new Promise((resolve) => {
        port.onMessage.addListener((msg) => {
          if (msg.type === "pong") resolve(true);
        });
        port.postMessage({ type: "ping" });
        setTimeout(() => resolve(false), 10000);
      });
      
      if (isConnected) {
        nativePort = port;
        setupNativeMessageHandlers(port);
        return true;
      }
    } catch (e) {
      continue;
    }
  }
  return false;
}

#### 3.2.3 浏览器自动化实现

// mcpPermissions-qqAoJjJ8.js 工具执行核心

async function executeBrowserTool({
  toolName,
  args,
  tabId,
  tabGroupId,
  clientId,
  sessionScope
}) {
  // 安全验证：检查 URL 是否发生变化
  const securityError = await verifyDomain(tabId, args.securityOrigin);
  if (securityError) {
    return { error: securityError };
  }
  
  switch (toolName) {
    case "browser_click_element":
      return await clickElement(tabId, args);
      
    case "browser_type_text":
      return await typeText(tabId, args);
      
    case "browser_screenshot":
      return await captureScreenshot(tabId, args);
      
    case "browser_navigate":
      return await navigatePage(tabId, args);
      
    case "browser_execute_javascript":
      return await executeInPage(tabId, args.script);
  }
}

// 截图实现（自适应分辨率优化）
async function captureScreenshot(tabId, { width, height, quality = 80 }) {
  // 计算最佳分辨率（Token 优化）
  const [optimalWidth, optimalHeight] = calculateOptimalResolution(
    width, height, 
    { pxPerToken: 768, maxTargetPx: 1080, maxTargetTokens: 1600 }
  );
  
  const dataUrl = await chrome.tabs.captureVisibleTab(null, {
    format: "jpeg",
    quality
  });
  
  // 调整图片尺寸
  return await resizeImage(dataUrl, optimalWidth, optimalHeight);
}

3.3 数据脱敏机制

调试日志系统实现了多层数据脱敏，确保敏感信息不会泄露：

// options-debug-logger.js / sidepanel-debug-logger.js

const SENSITIVE_KEYS = new Set([
  "apikey", "anthropicapikey", "accesstoken", "refreshtoken",
  "authtoken", "token", "secret", "password"
]);

const PRIVATE_URL_KEYS = new Set([
  "baseurl", "providerurl", "requesturl", "url", "href", "uri"
]);

const PRIVATE_TEXT_KEYS = new Set([
  "bodypreview", "notes", "prompt", "content", 
  "requestbody", "responsebody"
]);

function sanitizeValue(value, key) {
  const normalized = key.replace(/[^a-z0-9]/gi, "").toLowerCase();
  
  if (SENSITIVE_KEYS.has(normalized)) {
    return "[redacted-secret]";
  }
  
  if (PRIVATE_URL_KEYS.has(normalized)) {
    return "[redacted-url]";
  }
  
  if (PRIVATE_TEXT_KEYS.has(normalized)) {
    return `[redacted-text]:${value.length}`;
  }
  
  return value;
}

// 正则脱敏
function sanitizeInlineSecrets(text) {
  return text
    // URL 脱敏
    .replace(/\b(?:https?|wss?):\/\/[^\s"'<>]+/gi, "[redacted-url]")
    // Bearer Token 脱敏
    .replace(/\bBearer\s+[A-Za-z0-9._-]+\b/gi, "Bearer [redacted]")
    // API Key 格式脱敏
    .replace(/\b(?:sk|rk|pk)-[A-Za-z0-9*._-]{5,}\b/gi, (token) => 
      token.split("-")[0] + "-[redacted]"
    );
}

---

四、完整使用教程

4.1 安装步骤

#### 方法一：开发者模式加载（推荐）

1. 下载代码

   git clone https://github.com/S-Trespassing/claw-in-chrome.git
   

2. 打开 Chrome 扩展管理页面

• 在地址栏输入 chrome://extensions/
• 或点击菜单 → 更多工具 → 扩展程序

1. 打开侧边栏: 按快捷键或点击工具栏图标 2. 开始对话: 在输入框中输入问题，按 Enter 发送 3. 让 AI 操控浏览器:

• 直接请求："点击页面上的登录按钮"
• 复杂任务："帮我把这个表格的数据整理成 CSV"

文件上传: 点击输入框旁的附件图标，支持图片、文档等 代码执行: AI 可以直接在页面中运行 JavaScript 获取数据 截图分析: "截图这个页面并告诉我有什么异常"

4.4 调试技巧

#### 启用调试模式

1. 在 options 页面勾选"启用调试模式" 2. 打开侧边栏，按 F12 打开开发者工具 3. 查看 Console 中的 [sidepanel-debug] 日志

#### 日志导出

在 options 页面：

• 点击"导出调试日志"按钮
• 日志会自动脱敏敏感信息，可安全分享

[
  "sidePanel",              // 侧边栏功能
  "storage",                // 本地存储配置
  "activeTab",              // 访问当前标签页
  "scripting",              // 在页面执行脚本
  "debugger",               // 调试协议（高级操控）
  "tabGroups",              // 标签页分组管理
  "tabs",                   // 标签页管理
  "alarms",                 // 定时任务
  "notifications",          // 系统通知
  "system.display",         // 获取显示器信息
  "webNavigation",          // 导航事件监听
  "declarativeNetRequestWithHostAccess", // 网络请求修改
  "offscreen",              // 离屏文档（OAuth）
  "nativeMessaging",        // 与本地程序通信
  "unlimitedStorage",       // 无限制存储
  "downloads"               // 文件下载
]

权限风险评估:

1. 密钥脱敏: API Key、Token 等字段完全替换为 [redacted-secret] 2. URL 脱敏: 所有 URL 替换为 [redacted-url] 3. 内容长度限制: 大文本字段只显示长度信息 4. 正则脱敏: 自动识别 Bearer Token、API Key 格式

5.3 托管配置安全

managed_schema.json 支持企业级托管配置：

{
  "blockedUrlPatterns": ["company.com/admin/*"],
  "forceLoginOrgUUID": "org-xxx"
}

• URL 黑名单: 在特定网站禁用扩展
• 组织限制: 强制绑定到特定 Anthropic 组织

OpenClaw Agent ←→ Claw in Chrome Extension
                      ↓
                 Chrome SidePanel
                      ↓
                 Browser Automation
                 (MCP Tools)

优势: 1. 即开即用: 不需要单独安装 Browser Relay 服务 2. 原生集成: 与 Chrome 深度集成，功能更强大 3. 可视化: 用户可以看到 AI 的操作过程

挑战: 1. 通信协议: 需要对接 OpenClaw 的 Gateway 协议 2. 安全边界: 扩展的权限模型与 OpenClaw 的安全模型需要协调 3. 并发处理: Chrome 扩展的 Service Worker 有生命周期限制

6.3 技术融合展望

一个可能的融合方案：

// OpenClaw Gateway 与 Claw in Chrome 通信桥

// 1. Claw in Chrome 作为 MCP Server
class OpenClawMCPBridge {
  constructor() {
    this.gateway = null;
    this.sessionId = generateSessionId();
  }
  
  // 连接到 OpenClaw Gateway
  async connect(gatewayUrl, token) {
    this.gateway = new WebSocket(`${gatewayUrl}/ws?token=${token}`);
    this.setupMessageHandlers();
  }
  
  // 处理来自 OpenClaw 的工具调用
  async handleToolCall(tool, args) {
    // 复用现有的 MCP 工具实现
    return await executeMcpTool(tool, args);
  }
  
  // 发送浏览器状态到 OpenClaw
  async sendBrowserState() {
    const state = await this.captureBrowserState();
    this.gateway.send(JSON.stringify({
      type: "browser_state",
      sessionId: this.sessionId,
      state
    }));
  }
}

---

七、总结与展望

7.1 项目价值

Claw in Chrome 是一个技术价值极高的开源项目，它展示了：

1. 逆向工程的艺术: 如何在尊重开源协议的前提下进行合法逆向 2. 浏览器扩展的极限: Chrome Extension API 的强大能力 3. 协议适配的优雅: 通过拦截 fetch 实现透明协议转换 4. 社区的力量: 当官方产品受限时，社区总能找到出路

7.2 技术启示

• 扩展即平台: 浏览器扩展可以成为 AI 代理的"宿主"
• 协议即边界: MCP 等标准化协议降低了系统集成成本
• 安全与功能的平衡: 广泛权限与数据脱敏的双向考量

1. Firefox 移植: 适配 Firefox 的 Manifest V2/V3 2. Safari 扩展: 探索 Safari WebExtension API 的支持 3. VS Code 集成: 类似思路应用于 VS Code 扩展 4. 本地模型支持: 接入 Ollama、LM Studio 等本地模型

---

附录：参考资源

• GitHub 仓库: https://github.com/S-Trespassing/claw-in-chrome
• Anthropic MCP 文档: https://docs.anthropic.com/claude/docs/model-context-protocol
• Chrome Extension 文档: https://developer.chrome.com/docs/extensions/
• OpenClaw**: https://github.com/OpenClaw

*本文基于 claw-in-chrome v1.0.66 版本撰写，代码分析仅供参考学习，请遵守相关开源协议。*

#Chrome扩展 #Claude #浏览器自动化 #逆向工程 #AI助手