Token Efficient Web Operations

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

Security Scan

The skill's requests and instructions are coherent with its stated purpose (browser UI automation using a local Page JS extension + CDP), but it depends on an external, user-installed Chrome extension whose code you must review and operate only in isolated/test environments.

Purpose & Capability

The skill's name/description (token-efficient web operations for UI automation) matches what it asks for: a Page JS Chrome extension and CDP access. There are no unrelated env vars, binaries, or hidden requirements.

Instruction Scope

SKILL.md confines actions to using ElementCollector via CDP (exporting element keys, searching, clicking, filling non-sensitive inputs). It explicitly warns against sensitive pages and discloses that element keys may include innerText. Note: the extension can be manipulated via native DOM APIs to write to non-indexed fields (e.g., password/hidden/file), and the agent may send element keys to external LLMs — so follow the prohibition on sensitive pages and ensure agent behaviour is constrained.

Install Mechanism

Instruction-only skill (no automated install). The extension must be manually downloaded from an external GitHub repo and loaded unpacked. That reduces platform-level risk, but the extension repo is unverified: you must review manifest.json and source for network calls/remote code before loading. No automated downloads or extraction are performed by the skill itself.

Credentials

Skill declares no credentials, env vars, or config paths — appropriate for a local browser automation helper. The only data flow risk is that element keys (which may contain page text) could be sent by the AI agent to LLM services; the skill flags this, but protecting that requires agent configuration.

Persistence & Privilege

No elevated persistence is requested (always:false). The skill does not modify other skills or system configs. Autonomous invocation is enabled by default on the platform, which is normal; consider restricting autonomous runs if you want tighter control.

Assessment

This skill is internally consistent for UI automation, but it depends on a third-party Chrome extension you must trust. Before installing: (1) review the extension repo and manifest.json for any network or background permissions (host_permissions, webRequest, remote code loads); (2) load the extension into an isolated Chrome profile used only for testing; (3) restrict which domains the extension can access; (4) ensure your AI agent is configured so it will not send element keys to untrusted external LLM endpoints (or disable network access during tests); (5) avoid using the skill on any page with sensitive data. If you cannot or will not review the extension source, treat the extension as untrusted and do not install it in a profile with real accounts or sensitive data.

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

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

---

操作模板

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

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 命令参考

操作	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'

---

⚠️ 隐私与数据流说明

数据流向

浏览器 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	❌ 否	❌ 无法访问	扩展无此权限

技术实现：

// 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 用户配置
   • 不要在测试配置中保存任何真实账号密码

2. 限制访问域名

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

3. 用户确认机制

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

4. 定期审查

   • 定期审查扩展代码是否有更新
   • 检查 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