page-js-operation（页面 js 操作）

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/ → 开发者模式 → 加载已解压的扩展程序

1. 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 适用于：

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

操作模板

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

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

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

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

点击按钮

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

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

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

选择下拉选项

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

CDP 命令参考

常见关键字

⚠️ 隐私与数据流说明

数据流向

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

隐私说明

1. 扩展层面：

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

1. Agent 层面：

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

1. 用户责任：

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

数据范围

技术实现：

// 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

# 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

# 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"

使用示例

安全场景：搜索操作

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

安全场景：导航操作

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

❌ 禁止场景：登录操作

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

安全最佳实践

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

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

1. 限制访问域名

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

1. 用户确认机制

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

1. 定期审查

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

技术说明

ElementCollector 工作原理

// 收集阶段
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