企业官网建设流程全解析

OpenClaw Browser Relay 跑已登录网站操作：Key 用 TaoToken

TaoToken 官网 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 创建 Key，是补上 OpenClaw Browser Relay“步骤3：AI 操作”模型缺口的起点。跑已登录网站操作时，最容易卡住的不是扩展安装，也不是 Chrome 权限，而是 Badge 已经 ON、ws://localhost:18880 Gateway 也已经连通后，Agent 要决定 snapshot、find_element 还是 act，却不知道模型 Key 从哪来。本文从 Agent / Harness 视角，把模型 Key 来源补清楚：在 OpenClaw 模型配置里填入 TaoToken 的 Base URL 和 API Key，Browser Relay 的 Gateway 地址与扩展激活流程保持原样。这样 OpenClaw 才能真正驱动 Chrome 扩展，在已登录会话里完成页面快照、元素查找和点击操作，且模型调用产生的 Token 消耗统一走 TaoToken。

一、原问题与场景：Browser Relay 已连接，但“步骤3：AI 操作”缺模型 Key

OpenClaw 使用 Chrome 扩展模式的核心价值，是复用用户已经登录的浏览器会话。内置浏览器往往是一个相对独立的环境，需要重新登录、重新处理 Cookie，也不方便直接使用用户当前浏览器里的扩展和调试工具。Browser Relay 解决的正是这一层：Chrome 里安装 OpenClaw Browser Relay 扩展，扩展通过 WebSocket 连到本机 Gateway，OpenClaw 的 Browser Tool 再把标签页控制命令转成扩展可执行的动作。

原文 4.2 操作步骤里，流程看起来是完整的：

1. 在 Chrome 中打开目标网页；
2. 点击扩展图标，确认 Badge 显示 ON；
3. AI 操作。

问题就出在第 3 步。前两步只证明扩展已经连接标签页，Badge 为 ON 说明这个标签页处于可操作状态。但 AI Agent 并不是只靠扩展就能工作。Agent 需要先理解页面 snapshot，再判断哪个元素是按钮，接着决定是点击、输入还是等待。这个过程必须调用大模型。Harness 负责编排工具调用，模型负责推理和动作选择，而模型 provider 需要 Key、Base URL 和模型 ID。原文没有交代 Key 从哪里来，于是就会出现一种割裂：扩展连接正常，Gateway 正常，Badge 正常，但 Agent 在模型层没有可用入口，操作无法继续。

从 Agent / Harness 视角看，这不是 Browser Relay 本身的问题，而是模型接入层缺失。已登录网站操作、内部系统访问、多标签页协作这些场景，都依赖 Agent 先能思考，再能调用 browser 工具。TaoToken 补上的就是这一层：它不改变 Chrome 扩展的安装方式，也不改变 ws://localhost:18880 的 Gateway 结构，只提供 OpenClaw 模型配置所需的 Base URL、API Key 和模型调用入口。

二、TaoToken 前置：给 OpenClaw Agent 准备模型 Key 与 Base URL

在配置 OpenClaw 之前，先准备模型侧参数。打开 TaoToken 官网，登录后进入控制台，找到 API Keys 页面创建 Key。这里建议给 OpenClaw 单独创建一个 Key，命名成类似“openclaw-browser-relay”的用途，后续轮换、禁用和排查都更清楚。拿到的 Key 占位为：

YOUR_API_KEY

API 地址按固定写法使用：

https://taotoken.net/api

注意，这个地址是 OpenClaw 模型配置里的 Base URL，不是 Chrome 扩展的 Gateway 地址。Browser Relay 的 Gateway 仍然是：

ws://localhost:18880

两者职责不同。前者负责 Agent 推理时调用大模型，后者负责 OpenClaw 与 Chrome 扩展之间的标签页控制。不要把 API Base URL 填到扩展的 background.js 里，也不要把 ws://localhost:18880 填到模型 provider 里。模型 ID 使用你账号下可用的 MODEL_ID，具体名称以 TaoToken 控制台或接入文档为准，不要凭记忆乱填。

如果你需要确认接入字段，可以查看 TaoToken 的 API Keys 与接入文档：

• API Keys：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite
• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

这一步的目标不是“拿到一个 Key”就结束，而是让 OpenClaw 的 Agent 在需要推理时，能稳定请求到 https://taotoken.net/api。只要模型入口可用，Browser Relay 后面执行 snapshot、find_element、act 才有决策来源。

三、可复制配置：OpenClaw 模型配置与 Browser Relay 保持分离

OpenClaw 不同版本对模型配置的字段命名可能略有差异，但核心信息一致：provider、base URL、API Key、model ID。下面给一个通用 JSON 结构，字段名以你的 OpenClaw 版本为准，关键是三处不要错。

{ "model": { "provider": "taotoken", "baseUrl": "https://taotoken.net/api", "apiKey": "YOUR_API_KEY", "model": "MODEL_ID" }, "browser": { "profile": "chrome", "gatewayUrl": "ws://localhost:18880" } }

如果你的 OpenClaw 使用 models/providers 结构，可以等价写成：

{ "models": { "default": "MODEL_ID", "providers": { "taotoken": { "type": "openai-compatible", "base_url": "https://taotoken.net/api", "api_key": "YOUR_API_KEY" } } } }

如果 OpenClaw 支持环境变量，也可以这样设置：

export OPENCLAW_MODEL_PROVIDER="taotoken" export OPENCLAW_MODEL_BASE_URL="https://taotoken.net/api" export OPENCLAW_MODEL_API_KEY="YOUR_API_KEY" export OPENCLAW_MODEL_ID="MODEL_ID"

Browser Relay 侧不需要因为 TaoToken 而改动。扩展的 background.js 仍然连接本机 Gateway：

const GATEWAY_URL = "ws://localhost:18880"; const ws = new WebSocket(GATEWAY_URL);

扩展权限也保持原样，继续使用 tabs、activeTab、scripting、storage 这类必要权限。Chrome 扩展管理页仍然是chrome://extensions/，开发者模式、加载已解压扩展、点击图标激活、Badge 显示 ON，这些流程都不用变。需要变的只是 OpenClaw 模型配置：把模型请求指向 TaoToken，把 Key 换成 YOUR_API_KEY，把模型 ID 换成 MODEL_ID。

四、验证请求：从模型 ping 到 snapshot、find_element、act 跑通已登录网站

配置完成后，不要直接上复杂页面，先用最小请求验证模型通道。因为 Base URL 是 https://taotoken.net/api，OpenAI 兼容路径通常会落到 /v1/chat/completions。可以用 curl 做一次模型 ping：

curl -s https://taotoken.net/api/v1/chat/completions \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "model": "MODEL_ID", "messages": [ {"role": "user", "content": "只回复 pong"} ] }'

如果返回结构里能看到 choices 或类似内容，说明 Key、Base URL、模型 ID 至少已经打通。接下来验证 Browser Relay 链路。

先在 OpenClaw 侧确认 Gateway 已启动，ws://localhost:18880 可连接。然后在 Chrome 中打开一个已经登录的目标网站，点击 Browser Relay 扩展图标，确认 Badge 为 ON。接着让 OpenClaw 以 Chrome profile 启动浏览器工具：

browser(action="start", profile="chrome")

获取当前标签页快照：

snapshot = browser(action="snapshot", profile="chrome")

这一步成功时，Agent 会拿到页面结构、可交互元素和 ref。接着查找按钮：

target_btn = find_element(snapshot, "button", "提交")

再执行点击：

browser( action="act", kind="click", ref=target_btn["ref"], profile="chrome" )

成功结果通常表现为：扩展 Badge 保持 ON，Gateway 日志能看到命令往返，snapshot 返回了页面元素，find_element 命中了预期按钮，act 点击后页面状态发生变化。更重要的是，OpenClaw 在决定“找哪个按钮、点击哪个 ref”时，模型请求已经发往 https://taotoken.net/api，Token 消耗会体现在 TaoToken 侧。对于已登录网站操作，这一步不需要重新登录，也没有切换浏览器环境，用户当前会话直接参与自动化流程。

多标签页场景也类似：先通过 tabs 获取标签页列表，再 focus 到目标标签页，然后继续 snapshot、find_element、act。已登录状态仍然由 Chrome 当前会话提供，模型决策则来自 TaoToken。

五、本篇常见错排查：Badge、ws://localhost:18880、模型 401、act 无响应

额外注意一点：Browser Relay 的 background.js 只负责扩展与 Gateway 的 WebSocket，不负责模型鉴权。模型 401、404 这类错误要去 OpenClaw 模型配置和 TaoToken 侧查，不要反复重装 Chrome 扩展。反过来，如果模型请求正常但 act 点击无效，也不要怀疑 Key，应该回到标签页激活、Badge 状态、Gateway 连接和页面元素本身。

六、CTA：把 OpenClaw Browser Relay 的模型 Key 固定到 TaoToken

本文解决的问题很具体：OpenClaw Browser Relay 已经能连接 Chrome 标签页，但原文“步骤3：AI 操作”没有交代模型 Key 从哪来。现在把 Key 固定到 TaoToken，OpenClaw 就可以在已登录网站操作中完成 snapshot、find_element、act，Browser Relay 的 ws://localhost:18880 Gateway 和扩展激活流程保持不变。

如果你正在排障或刚接入，建议先看 API Keys 和接入文档：

• 创建与管理 Key：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite
• 接入文档：https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

如果你要先验证模型是否可用，可以直接去模型对话做一次最小请求：

• 模型对话：https://taotoken.net/console/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite

如果你准备长期跑 OpenClaw Agent、Browser Relay、多标签页协作或内部系统自动化，建议使用 Coding Plan 管理长期编码与 Agent 调用：

• Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

把 Key 放到正确的位置，让模型调用走 TaoToken，让标签页控制继续走 Browser Relay。这样 OpenClaw 的 Agent / Harness 链路才是完整的：Chrome 提供已登录会话，Gateway 提供标签页通道，TaoToken 提供模型推理入口。