本 Skill 仅用于浏览器自动化测试场景，不适用于处理敏感数据页面。
✅ 推荐用于：
❌ 不推荐用于：
本 Skill 必须 配合以下组件使用：
chrome://extensions/ → 开发者模式 → 加载已解压的扩展程序http://127.0.0.1:9222ElementCollector 已注入（仅首次）exportData() 获取元素 key 列表（非敏感数据）不要在以下页面使用本 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 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 列表，无敏感内容)
| 数据类型 | 是否收集 | 是否可操作 | 说明 |
|---|---|---|---|
| ---------- | ---------- | ----------- | ------ |
| 元素 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. 下载源码
git clone https://github.com/TangJing/openclaw_access_web_page_js.git
cd openclaw_access_web_page_js
# 2. 审查源码（推荐）
# 重点检查：
# - 是否有网络请求代码
# - 是否有数据外传逻辑
# - manifest.json 权限声明
# 3. 安装扩展
# 打开 chrome://extensions/
# 开启"开发者模式"
# 点击"加载已解压的扩展程序"，选择项目目录
# 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"
# 原因：涉及密码字段
// 收集阶段
elementMap = Map<key, Element> // key → DOM 引用
keywordMap = Map<keyword, Set<keys>> // 关键字 → key 集合
// key 格式：id|class|title|innerText
// 示例："login-btn|btn primary||登录"
使用本 Skill 即表示您同意：
共 1 个版本