
chrome-automation
Chrome 浏览器自动化操作。当用户需要自动化浏览器操作、网页测试、数据抓取或 UI 自动化时使用此技能。
- Installs
- 98
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/aaaaqwq/agi-super-team --skill chrome-automation- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads chrome-automation automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Chrome 浏览器自动化
功能说明
此技能专门用于 Chrome 浏览器自动化,包括:
- 网页自动化操作
- E2E 测试
- 网页截图和 PDF 生成
- 表单自动填充
- 动态网页数据抓取
- 性能测试和监控
⚠️ 资源清理原则(强制)
所有涉及浏览器的 cron 任务完成后,必须自动关闭 Chrome 进程!
# 任务结束时必须执行
pkill -f chrome
pkill -f chromium
或在 JavaScript/TypeScript 中:
// 显式关闭浏览器
await browser.close();
// 脚本结束时强制清理
const { execSync } = require('child_process');
execSync('pkill -f chrome');
原因: 避免内存泄漏和资源占用,防止 Gateway CPU 100% 过载
使用场景
- "自动化登录网站并抓取数据"
- "批量截取网页截图"
- "自动化测试购物流程"
- "监控网站性能指标"
- "自动填写表单并提交"
- "生成网页 PDF 报告"
技术栈
自动化工具
- Puppeteer:Chrome DevTools Protocol
- Playwright:跨浏览器自动化
- Selenium:经典自动化框架
- Cypress:现代 E2E 测试框架
辅助工具
- puppeteer-extra:Puppeteer 插件系统
- puppeteer-stealth:反检测插件
- chrome-launcher:Chrome 启动器
核心功能
1. 页面导航
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch({
headless: false, // 显示浏览器
slowMo: 50 // 减慢操作速度
});
const page = await browser.newPage();
// 导航到页面
await page.goto('https://example.com', {
waitUntil: 'networkidle2' // 等待网络空闲
});
// 前进后退
await page.goBack();
await page.goForward();
await page.reload();
await browser.close();
2. 元素操作
// 点击元素
await page.click('#submit-button');
// 输入文本
await page.type('#username', 'user@example.com');
await page.type('#password', 'password123');
// 选择下拉框
await page.select('#country', 'CN');
// 上传文件
const fileInput = await page.$('input[type="file"]');
await fileInput.uploadFile('/path/to/file.pdf');
// 等待元素
await page.waitForSelector('.result', { timeout: 5000 });
// 获取元素文本
const text = await page.$eval('.title', el => el.textContent);
// 获取多个元素
const items = await page.$$eval('.item', elements =>
elements.map(el => el.textContent)
);
3. 表单自动化
async function fillForm(page: Page) {
// 填写文本输入框
await page.type('#name', '张三');
await page.type('#email', 'zhangsan@example.com');
await page.type('#phone', '13800138000');
// 选择单选按钮
await page.click('input[name="gender"][value="male"]');
// 选择复选框
await page.click('#agree-terms');
await page.click('#subscribe-newsletter');
// 选择下拉框
await page.select('#city', 'beijing');
// 填写日期
await page.type('#birthday', '1990-01-01');
// 填写文本域
await page.type('#message', '这是一条测试消息');
// 提交表单
await page.click('button[type="submit"]');
// 等待提交完成
await page.waitForNavigation();
}
4. 数据抓取
async function scrapeData(url: string) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
// 等待内容加载
await page.waitForSelector('.product-list');
// 抓取数据
const products = await page.$$eval('.product-item', items =>
items.map(item => ({
title: item.querySelector('.title')?.textContent,
price: item.querySelector('.price')?.textContent,
image: item.querySelector('img')?.src,
link: item.querySelector('a')?.href
}))
);
await browser.close();
return products;
}
5. 截图和 PDF
// 全页截图
await page.screenshot({
path: 'screenshot.png',
fullPage: true
});
// 元素截图
const element = await page.$('.chart');
await element.screenshot({ path: 'chart.png' });
// 生成 PDF
await page.pdf({
path: 'page.pdf',
format: 'A4',
printBackground: true,
margin: {
top: '20px',
right: '20px',
bottom: '20px',
left: '20px'
}
});
6. 性能监控
async function measurePerformance(url: string) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// 开始性能追踪
await page.tracing.start({ path: 'trace.json' });
await page.goto(url, { waitUntil: 'networkidle2' });
// 停止追踪
await page.tracing.stop();
// 获取性能指标
const metrics = await page.metrics();
console.log('性能指标:', metrics);
// 获取 Performance API 数据
const performanceData = await page.evaluate(() => {
const timing = performance.timing;
return {
loadTime: timing.loadEventEnd - timing.navigationStart,
domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
firstPaint: performance.getEntriesByType('paint')[0]?.startTime
};
});
await browser.close();
return performanceData;
}
高级功能
1. 拦截和修改请求
await page.setRequestInterception(true);
page.on('request', request => {
// 阻止图片加载
if (request.resourceType() === 'image') {
request.abort();
}
// 修改请求头
else if (request.url().includes('api')) {
request.continue({
headers: {
...request.headers(),
'Authorization': 'Bearer token'
}
});
}
else {
request.continue();
}
});
2. 模拟移动设备
const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone);
await page.goto('https://example.com');
3. 处理弹窗
// 处理 alert/confirm/prompt
page.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.accept(); // 或 dialog.dismiss()
});
// 处理新窗口
const newPagePromise = new Promise(resolve =>
browser.once('targetcreated', target => resolve(target.page()))
);
await page.click('a[target="_blank"]');
const newPage = await newPagePromise;
4. Cookie 管理
// 设置 Cookie
await page.setCookie({
name: 'session',
value: 'abc123',
domain: 'example.com'
});
// 获取 Cookie
const cookies = await page.cookies();
// 删除 Cookie
await page.deleteCookie({ name: 'session' });
5. 执行 JavaScript
// 在页面上下文中执行代码
const result = await page.evaluate(() => {
return document.title;
});
// 传递参数
const sum = await page.evaluate((a, b) => {
return a + b;
}, 5, 3);
// 暴露函数给页面
await page.exposeFunction('md5', (text: string) => {
return crypto.createHash('md5').update(text).digest('hex');
});
E2E 测试示例
Playwright 测试
import { test, expect } from '@playwright/test';
test.describe('登录功能', () => {
test('成功登录', async ({ page }) => {
await page.goto('https://example.com/login');
await page.fill('#email', 'user@example.com');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await expect(page).toHaveURL('https://example.com/dashboard');
await expect(page.locator('h1')).toContainText('欢迎');
});
test('登录失败提示', async ({ page }) => {
await page.goto('https://example.com/login');
await page.fill('#email', 'wrong@example.com');
await page.fill('#password', 'wrongpass');
await page.click('button[type="submit"]');
await expect(page.locator('.error')).toBeVisible();
await expect(page.locator('.error')).toContainText('用户名或密码错误');
});
});
Cypress 测试
describe('购物车功能', () => {
beforeEach(() => {
cy.visit('/products');
});
it('添加商品到购物车', () => {
cy.get('.product-item').first().within(() => {
cy.get('.add-to-cart').click();
});
cy.get('.cart-badge').should('contain', '1');
});
it('从购物车删除商品', () => {
cy.get('.cart-icon').click();
cy.get('.cart-item').first().within(() => {
cy.get('.remove-button').click();
});
cy.get('.cart-empty').should('be.visible');
});
});
反检测技术
Puppeteer Stealth
import puppeteer from 'puppeteer-extra';
import StealthPlugin from 'puppeteer-extra-plugin-stealth';
puppeteer.use(StealthPlugin());
const browser = await puppeteer.launch({
headless: true,
args: [
'--no-sandbox',
'--disable-setuid-sandbox',
'--disable-blink-features=AutomationControlled'
]
});
const page = await browser.newPage();
// 设置真实的 User-Agent
await page.setUserAgent(
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
);
// 设置视口大小
await page.setViewport({
width: 1920,
height: 1080
});
// 隐藏 webdriver 标识
await page.evaluateOnNewDocument(() => {
Object.defineProperty(navigator, 'webdriver', {
get: () => false
});
});
最佳实践
1. 错误处理
async function robustScrape(url: string) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
await page.goto(url, {
waitUntil: 'networkidle2',
timeout: 30000
});
const data = await page.evaluate(() => {
// 数据提取逻辑
});
return data;
} catch (error) {
console.error('抓取失败:', error);
// 截图保存错误现场
await page.screenshot({ path: 'error.png' });
throw error;
} finally {
await browser.close();
}
}
2. 并发控制
import pLimit from 'p-limit';
async function scrapeMultiplePages(urls: string[]) {
const browser = await puppeteer.launch();
const limit = pLimit(5); // 最多 5 个并发
const results = await Promise.all(
urls.map(url =>
limit(async () => {
const page = await browser.newPage();
try {
await page.goto(url);
return await page.evaluate(() => {
// 提取数据
});
} finally {
await page.close();
}
})
)
);
await browser.close();
return results;
}
3. 资源优化
// 禁用不必要的资源
await page.setRequestInterception(true);
page.on('request', request => {
const resourceType = request.resourceType();
if (['image', 'stylesheet', 'font'].includes(resourceType)) {
request.abort();
} else {
request.continue();
}
});
// 设置超时
page.setDefaultTimeout(10000);
page.setDefaultNavigationTimeout(30000);
注意事项
- 遵守网站的 robots.txt 和服务条款
- 控制请求频率,避免对服务器造成压力
- 使用代理池避免 IP 被封
- 妥善处理验证码和登录
- 定期更新浏览器版本
- 注意内存泄漏,及时关闭页面和浏览器
- 使用无头模式提高性能
- 保存日志和错误截图便于调试
FAQ
What does the chrome-automation skill do?
Chrome 浏览器自动化操作。当用户需要自动化浏览器操作、网页测试、数据抓取或 UI 自动化时使用此技能。
How do I install chrome-automation?
Run npx skills add https://github.com/aaaaqwq/agi-super-team --skill chrome-automation in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/chrome-automation/ (personal) or .claude/skills/chrome-automation/ (project).
Which AI agents can use chrome-automation?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is chrome-automation safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains chrome-automation?
It is published by aaaaqwq in aaaaqwq/agi-super-team. It has 98 recorded installs.
More from aaaaqwq/agi-super-team
multi-search-engine
aaaaqwq/agi-super-team
Multi search engine integration with 17 engines (8 CN + 9 Global). Supports advanced search operators, time filters, site search, privacy engines, and WolframAlpha knowledge queries. No API keys required.
web-scraping-automation
aaaaqwq/agi-super-team
自动化爬取网站数据和 API 接口。当用户需要抓取网页内容、调用 API、解析数据或创建爬虫脚本时使用此技能。
wechat-channel
aaaaqwq/agi-super-team
微信 (WeChat) 与 OpenClaw 的双向集成通道。基于 Wechaty + PadLocal 实现微信消息的接收和发送,支持私聊、群聊、@提及检测、图片/文件传输。当需要通过微信与 AI 助手交互、接收微信消息触发 AI 响应、或从 OpenClaw 发送消息到微信时使用此技能。
project-management
aaaaqwq/agi-super-team
Open the skill to read its SKILL.md instructions.
wecom-automation
aaaaqwq/agi-super-team
Open the skill to read its SKILL.md instructions.
memory-hygiene
aaaaqwq/agi-super-team
Audit, clean, and optimize Clawdbot's vector memory (LanceDB). Use when memory is bloated with junk, token usage is high from irrelevant auto-recalls, or setting up memory maintenance automation.
Popular productivity & automation skills
agent-browser
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
lark-doc
open.feishu.cn
飞书云文档(Docx / Wiki)内容操作:读取、创建、编辑文档,插入或下载图片附件,以及操作思维笔记。用户提供文档 URL/token(包括 doubao.com 的 /docx/、/wiki/)时使用;按 URL 路径/token 而非域名路由;/page/ 是妙搭应用,非飞书云文档。文档内嵌资源按读取参考中的统一规则分流。独立评论操作走 lark-drive;随正文读取评论使用 docs +fetch。表格或 Base 内部数据操作不在本 skill。
lark-base
open.feishu.cn
飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、应用模式(BaseApp/AppMode 页面与组件)、Workspace 目录、workflow、角色权限、模板中心(多维表格模板分类/列表/搜索);遇到 Base/多维表格/bitable、BaseApp/AppMode、/base/ 或 /app/ 链接时使用。BaseApp 不走 lark-apps;文件导入/导出转 lark-drive,认证/授权转 lark-shared。
lark-drive
open.feishu.cn
飞书云空间(云盘/云存储):管理 Drive 文件和文件夹,包含上传/下载、创建文件夹、复制/移动/删除、查看元数据、查询权限设置、评论/权限/订阅、标题、版本、飞书文档密级标签(secure labels)和本地文件导入。用户需要整理云盘目录、处理云空间资源 URL/token、判断链接类型/真实 token/标题,或导入 Word/Markdown/Excel/CSV/PPTX/.base 为 docx/sheet/bitable/slides 时使用;doubao.com 云空间 URL/token 也按资源路径和 token 路由,不回退 WebFetch。不负责:文档内容编辑(走 lark-doc)、表格/Base 表内数据操作(走 lark-sheets/lark-base)、知识空间节点/成员管理(走 lark-wiki)、原生 Markdown 文件读写/patch/diff(走 lark-markdown)。
lark-shared
open.feishu.cn
Use for lark-cli setup/auth tasks: auth login/status/logout, user vs bot identity, business-domain permissions (--domain, including all/docs/drive), missing scopes, revoking authorization, or handling notice JSON.
lark-im
open.feishu.cn
飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件、管理表情回复、发送应用内/短信/电话加急、发送和处理交互卡片(Interactive Card)、监听卡片按钮回调(card.action.trigger)。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶(添加/移除/查询置顶会话)、管理标签数据、处理卡片回调时使用。