Agent Browser Skill 入门指南：从零构建你的第一个自动化浏览器代理

15次阅读

共计 2470 个字符，预计需要花费 7 分钟才能阅读完成。

Agent Browser Skill（浏览器代理技能）本质上是一种基于浏览器扩展的自动化能力封装。它允许开发者将常见的网页交互操作（如点击、表单填写、数据提取等）封装成可复用的 ” 技能 ” 模块。与传统 Puppeteer/Playwright 这类浏览器自动化工具相比，Browser Skill 采用了更轻量级的事件驱动架构，并且强调技能的模块化和复用性。

事件驱动 ：Browser Skill 通过监听浏览器事件来触发自动化操作，而不是像传统工具那样通过脚本线性执行
技能复用 ：封装好的技能可以在不同页面和场景中重复使用，大大提高了开发效率
扩展集成 ：作为浏览器扩展运行，可以深度集成到浏览器环境中，实现更精细的控制

开始前需要配置 Chrome 扩展开发环境。以下是关键步骤：

创建项目文件夹并初始化 npm：

mkdir my-browser-skill
cd my-browser-skill
npm init -y
npm install typescript @types/chrome --save-dev

创建 manifest.json 文件（浏览器扩展的配置文件）：

{
  "manifest_version": 3,
  "name": "My Browser Skill",
  "version": "1.0",
  "background": {"service_worker": "background.js"},
  "content_scripts": [
    {"matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab", "scripting"]
}

配置 TypeScript 编译选项（tsconfig.json）：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true
  }
}

下面实现一个基础的点击拦截技能。这个技能会监听页面上的点击事件，并在特定条件下阻止默认行为。

首先创建 content.js（内容脚本）：

// 监听所有点击事件
document.addEventListener('click', (event: MouseEvent) => {
  const target = event.target as HTMLElement;

  // 如果是按钮且包含特定类名，则拦截点击
  if (target.tagName === 'BUTTON' && target.classList.contains('intercept-me')) {event.preventDefault();
    event.stopPropagation();
    console.log('点击被拦截:', target);

    // 向 background 脚本发送消息
    chrome.runtime.sendMessage({
      type: 'click_intercepted',
      element: target.outerHTML
    });
  }
}, true);

创建 background.js（后台脚本）处理消息：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {switch (message.type) {
      case 'click_intercepted':
        console.log('收到拦截的点击:', message.element);
        // 可以在这里添加更多处理逻辑
        break;
    }
    return true;
  }
);

消息传递序列图说明：

+-------------+       +----------------+       +---------------+
| 网页内容脚本 | ----> | 浏览器运行时环境 | ----> | 后台服务脚本 |
+-------------+       +----------------+       +---------------+
      |                      |                      |
      |--- 点击事件消息 ----->|                      |
      |                      |--- 转发消息 -------->|
      |                      |                      |
      |                      |<--- 处理结果 --------|
      |<---------------------|                      |

在实际生产环境中使用 Browser Skill 需要考虑以下因素：