Token Efficient Web Operations

通过 CDP 和 Page JS Extension 操作网页元素，节省 95% Token（仅用于 UI 自动化测试）

Page JS CDP 网页操作 Skill

⚠️ 重要说明

本 Skill 仅用于浏览器自动化测试场景，不适用于处理敏感数据页面。

🎯 使用场景建议

✅ 推荐用于：

• 自动化测试环境
• CI/CD 流程中的 UI 测试
• 开发阶段的页面功能验证
• 公开信息的网页操作演示

❌ 不推荐用于：

• 日常访问网站
• 处理个人敏感信息的页面
• 生产环境的自动化操作（除非充分测试）

依赖项

本 Skill 必须 配合以下组件使用：

1. Page JS Extension - Chrome 扩展（需手动安装）

   • GitHub: https://github.com/TangJing/openclaw_access_web_page_js
   • 请自行下载源码审查后安装
   • 安装方式：chrome://extensions/ → 开发者模式 → 加载已解压的扩展程序

2. CDP 环境 - Chrome DevTools Protocol 访问权限

   • 本地运行：http://127.0.0.1:9222
   • 或 Puppeteer/Playwright 等自动化框架

---

工作流程

1. 检查扩展 → 确认 ElementCollector 已注入（仅首次）
2. 获取元素索引 → 调用 exportData() 获取元素 key 列表（非敏感数据）
3. AI 分析 → 根据 key 识别目标元素（按钮、输入框等）
4. 执行操作 → 通过 CDP 执行 click/input 等操作

---

⚠️ 安全限制

禁止操作的页面类型

不要在以下页面使用本 Skill：

• 🔒 银行/金融网站
• 🔒 登录/注册页面（涉及密码）
• 🔒 支付页面
• 🔒 医疗健康网站
• 🔒 政府/证件相关网站
• 🔒 任何包含个人敏感信息的页面

禁止操作的数据类型

不要读取或修改以下元素：

• 密码输入框（type="password"）
• 信用卡号输入框
• 身份证号输入框
• 其他敏感个人信息字段

推荐操作场景

本 Skill 适用于：

• ✅ 公开信息的网页操作
• ✅ 自动化测试环境
• ✅ 非敏感的表单填写（如搜索框）
• ✅ 按钮点击操作
• ✅ 下拉选择操作

---

操作模板

检查扩展是否可用（首次启动）

javascript

typeof ElementCollector !== 'undefined'
// 返回 true 表示扩展已安装

获取页面元素索引（非敏感数据）

javascript

ElementCollector.exportData()
// 返回：{ elements: [...keys], keywords: [...], elementCount: N }
// 注意：仅返回元素的 key 列表，不包含实际 DOM 内容

点击按钮

javascript

const results = ElementCollector.searchElementsByKey('{按钮关键字}');
const element = Object.values(results)[0];
if (element) element.click();

填充普通输入框（非敏感）

javascript

const inputs = ElementCollector.searchElementsByKey('{搜索框/普通输入框}');
const input = Object.values(inputs)[0];
if (input) {
  input.value = '{值}';
  input.dispatchEvent(new Event('input', { bubbles: true }));
}

选择下拉选项

javascript

const selects = ElementCollector.searchElementsByKey('{选择器关键字}');
const select = Object.values(selects)[0];
if (select) {
  select.value = '{选项 value}';
  select.dispatchEvent(new Event('change', { bubbles: true }));
}

---

CDP 命令参考

操作	CDP Runtime.evaluate 表达式
检查扩展	typeof ElementCollector !== 'undefined'
获取索引	ElementCollector.exportData()
点击	ElementCollector.searchElementsByKey('btn')[0].click()
填充	ElementCollector.searchElementsByKey('input')[0].value = 'text'
选择	ElementCollector.searchElementsByKey('select')[0].value = 'option'

---

常见关键字

操作	推荐关键字
搜索	'搜索', 'search'
提交	'提交', 'submit'
取消	'取消', 'cancel'
确认	'确定', 'confirm'
删除	'删除', 'delete'
编辑	'编辑', 'edit'
保存	'保存', 'save'

---

⚠️ 隐私与数据流说明

数据流向

text

浏览器 DOM → ElementCollector (内存索引) → CDP → 本地 AI Agent
                     ↑
              (仅 key 列表，无敏感内容)

隐私说明

1. 扩展层面：

   • ✅ Page JS Extension 完全运行在浏览器本地
   • ✅ 不主动向外部服务器发送数据
   • ✅ 数据存储在内存中，页面关闭即清除

2. Agent 层面：

   • ⚠️ AI Agent 可能将元素数据发送给 LLM 服务
   • ⚠️ 元素 key 可能包含页面文本内容（如按钮文字、输入框标签）
   • ⚠️ 请确保你的 AI Agent 配置符合隐私要求

3. 用户责任：

   • ⚠️ 用户需自行审查扩展源码
   • ⚠️ 用户需确保 AI Agent 不会将敏感数据发送到不可信的服务
   • ⚠️ 用户需避免在敏感页面使用本 Skill

数据范围

数据类型	是否收集	是否可操作	说明
元素 id	✅ 是	-	用于索引
元素 class	✅ 是	-	用于索引
元素 title	✅ 是	-	用于索引
元素 innerText	✅ 是	-	用于索引（最多 100 字符）
普通输入框	✅ 是	✅ 可读写	可搜索、填充、读取
密码字段	❌ 不收集	⚠️ 仅可写入	不索引，无法通过关键字搜索，但可通过原生 DOM 操作设置值
隐藏字段	❌ 不收集	⚠️ 仅可写入	不索引，无法通过关键字搜索，但可通过原生 DOM 操作设置值
文件上传	❌ 不收集	⚠️ 仅可写入	不索引，无法通过关键字搜索，但可通过原生 DOM 操作设置值
Cookie/Storage	❌ 否	❌ 无法访问	扩展无此权限

技术实现：

javascript

// collectAllElements() 中自动跳过敏感字段
const sensitiveTypes = ['password', 'hidden', 'file'];
if (element.tagName === 'INPUT' && sensitiveTypes.includes(element.type)) {
  return;  // 不收集到索引中，无法通过 searchElementsByKey 搜索
}

注意： 敏感字段虽不被索引，但仍可通过原生 DOM API 直接操作（如 document.querySelector('input[type="password"]').value = 'xxx'）。本插件不主动读取这些字段的值。

---

安装步骤

步骤 1：安装 Page JS Extension

bash

# 1. 下载源码
git clone https://github.com/TangJing/openclaw_access_web_page_js.git
cd openclaw_access_web_page_js

# 2. 审查源码（推荐）
# 重点检查：
# - 是否有网络请求代码
# - 是否有数据外传逻辑
# - manifest.json 权限声明

# 3. 安装扩展
# 打开 chrome://extensions/
# 开启"开发者模式"
# 点击"加载已解压的扩展程序"，选择项目目录

步骤 2：安装 OpenClaw Skill

bash

# 1. 创建 Skill 目录
mkdir -p ~/.openclaw/workspace/skills/page-js-operation

# 2. 将本 SKILL.md 保存到该目录
# 路径：~/.openclaw/workspace/skills/page-js-operation/SKILL.md

# 3. 刷新 Skills
openclaw agent --message "refresh skills"

---

使用示例

安全场景：搜索操作

bash

# 在搜索引擎页面
openclaw agent --message "use page_js_operation to fill search box with 'keyword'"
openclaw agent --message "use page_js_operation to click search button"

安全场景：导航操作

bash

# 在内容页面
openclaw agent --message "use page_js_operation to click next page button"
openclaw agent --message "use page_js_operation to select category from dropdown"

❌ 禁止场景：登录操作

bash

# 不要在登录页面使用
# openclaw agent --message "fill username and password and click login"
# 原因：涉及密码字段

---

安全最佳实践

1. 使用专用浏览器配置文件

   • 为自动化测试创建独立的 Chrome 用户配置
   • 不要在测试配置中保存任何真实账号密码

2. 限制访问域名

   • 在扩展设置中限制可访问的域名
   • 仅允许访问测试环境或公开网站

3. 用户确认机制

   • 在执行敏感操作前要求用户确认
   • 如：涉及表单提交、删除等操作

4. 定期审查

   • 定期审查扩展代码是否有更新
   • 检查 Skill 执行日志

---

技术说明

ElementCollector 工作原理

javascript

// 收集阶段
elementMap = Map<key, Element>  // key → DOM 引用
keywordMap = Map<keyword, Set<keys>>  // 关键字 → key 集合

// key 格式：id|class|title|innerText
// 示例："login-btn|btn primary||登录"

为什么节省 Token

• 传统方式：发送完整 HTML（5000-20000 tokens）
• 本插件：仅发送元素 key 列表（100-500 tokens）
• 节省率：约 95%+

---

免责声明

使用本 Skill 即表示您同意：

1. 您已自行审查并信任 Page JS Extension 源码
2. 您了解 AI Agent 可能将元素数据发送给 LLM 服务
3. 您不会在涉及敏感信息的页面使用本 Skill
4. 您自行承担使用本 Skill 的全部风险
5. 本 Skill 作者不对任何数据泄露或损失负责

---

相关链接

• GitHub 仓库
• Chrome 扩展开发文档
• Chrome DevTools Protocol