browser-setup-devtools

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Browser automation setup (DevTools MCP first)

浏览器自动化设置（优先使用DevTools MCP）

Principles

原则

Keep prompts minimal; do as much as possible with tools and commands.
Always attempt Chrome DevTools MCP first; only fall back to the browser extension when DevTools MCP cannot be used.

尽可能减少提示内容；尽量通过工具和命令完成操作。
始终优先尝试使用Chrome DevTools MCP；仅当DevTools MCP无法使用时，才切换到浏览器扩展作为备用方案。

Workflow

工作流程

Ask: "Do you have Chrome installed on this computer?"
If no or unsure:
- Offer to open the download page yourself and do it if possible.
- Provide a clickable link: https://www.google.com/chrome/
- Continue after installation is confirmed.
Check DevTools MCP availability:
- Call
```
chrome-devtools_list_pages
```
  .
- If pages exist, select one with
```
chrome-devtools_select_page
```
  .
- If no pages, create one with
```
chrome-devtools_new_page
```
  (use https://example.com) and then select it.
If DevTools MCP calls fail:
- Ask the user to open Chrome and keep it running.
- Retry
```
chrome-devtools_list_pages
```
  .
- If it still fails, ensure
```
opencode.jsonc
```
  includes
```
mcp.control-chrome
```
  with command
```
['chrome-devtools-mcp']
```
  and ask the user to restart OpenWork/OpenCode.
- Retry the DevTools MCP check.
If DevTools MCP is ready:
- Offer a first task ("Let's try opening a webpage").
- If yes, use
```
chrome-devtools_navigate_page
```
  or
```
chrome-devtools_new_page
```
  to open the URL and confirm completion.
Fallback only if DevTools MCP cannot be used:
- Check availability with
```
browser_version
```
  or
```
browser_status
```
  .
- If missing, run
```
npx @different-ai/opencode-browser install
```
  yourself.
- Open the Extensions page yourself when possible:
  - macOS:
```
open -a "Google Chrome" "chrome://extensions"
```
  - Windows:
```
start chrome://extensions
```
  - Linux:
```
xdg-open "chrome://extensions"
```
- Tell the user to enable Developer mode, click "Load unpacked", and select
```
~/.opencode-browser/extension
```
  , then pin the extension.
- Re-check availability with
```
browser_version
```
  .
- Offer a first task and use
```
browser_open_tab
```
  .

询问：“你的电脑上安装Chrome浏览器了吗？”
如果用户回答没有或不确定：
- 主动提出为用户打开下载页面，并在可能的情况下完成安装操作。
- 提供可点击链接：https://www.google.com/chrome/
- 确认安装完成后再继续后续步骤。
检查DevTools MCP的可用性：
- 调用
```
chrome-devtools_list_pages
```
  命令。
- 如果存在页面，使用
```
chrome-devtools_select_page
```
  命令选择其中一个页面。
- 如果没有页面，使用
```
chrome-devtools_new_page
```
  命令创建一个新页面（默认使用https://example.com），然后再选择该页面。
如果DevTools MCP调用失败：
- 请用户打开Chrome浏览器并保持运行状态。
- 重试
```
chrome-devtools_list_pages
```
  命令。
- 如果仍然失败，确保
```
opencode.jsonc
```
  文件中包含
```
mcp.control-chrome
```
  配置，其命令为
```
['chrome-devtools-mcp']
```
  ，并请用户重启OpenWork/OpenCode。
- 再次重试DevTools MCP的可用性检查。
如果DevTools MCP准备就绪：
- 提供首个任务建议（“我们试试打开一个网页吧”）。
- 如果用户同意，使用
```
chrome-devtools_navigate_page
```
  或
```
chrome-devtools_new_page
```
  命令打开指定URL，并确认操作完成。
仅当DevTools MCP完全无法使用时，才启用备用方案：
- 使用
```
browser_version
```
  或
```
browser_status
```
  命令检查扩展可用性。
- 如果扩展未安装，自动运行
```
npx @different-ai/opencode-browser install
```
  命令。
- 在可能的情况下，自动打开扩展程序页面：
  - macOS系统：
```
open -a "Google Chrome" "chrome://extensions"
```
  - Windows系统：
```
start chrome://extensions
```
  - Linux系统：
```
xdg-open "chrome://extensions"
```
- 告知用户启用开发者模式，点击“加载已解压的扩展程序”，选择
```
~/.opencode-browser/extension
```
  目录，然后固定该扩展。
- 使用
```
browser_version
```
  命令再次检查扩展可用性。
- 提供首个任务建议，并使用
```
browser_open_tab
```
  命令完成操作。

Response rules

响应规则

Keep each user prompt to one short sentence when possible.
Use direct offers like "I can open Chrome now" and follow with tool actions.
Always present links as clickable URLs.

尽可能将每个用户提示简化为简短的一句话。
使用直接的提议，例如“我现在可以帮你打开Chrome浏览器”，然后执行对应的工具操作。
始终将链接以可点击的URL形式呈现。