@clawhub-tangjing-d942a3999f
Operate web page elements via CDP and Page JS Extension, save 95% Token (for UI automation testing ONLY, NOT a web browsing tool)
---
name: page_js_operation
description: Operate web page elements via CDP and Page JS Extension, save 95% Token (for UI automation testing ONLY, NOT a web browsing tool)
tools:
- cdp
---
# Page JS CDP Web Operation Skill
## ⚠️ Important Notice
**This Skill is designed EXCLUSIVELY for browser automation testing scenarios.**
**This is NOT a tool for daily website browsing or general web access.**
### 🎯 Purpose & Scope
**✅ Designed for:**
- Automation testing environments (CI/CD pipelines)
- UI test script development and validation
- Page function verification during development
- Automated regression testing
- Web scraping of PUBLIC information only
**❌ NOT Designed for:**
- ❌ Daily website browsing
- ❌ Personal web automation assistant
- ❌ Handling personal accounts or credentials
- ❌ Automating personal workflows on websites
- ❌ Any production use involving real user data
### 🔒 Privacy Field Policy
**Strict Rules for Sensitive Fields (password, hidden, file):**
| Action | Allowed? | Condition |
|--------|----------|-----------|
| **Read value** | ❌ **NEVER** | Extension code skips these fields during collection |
| **Write value** | ⚠️ **User instruction ONLY** | Requires EXPLICIT user command, never auto-collected |
**Technical Guarantee:**
```javascript
// In collectAllElements() - sensitive fields are NEVER collected
const sensitiveTypes = ['password', 'hidden', 'file'];
if (element.tagName === 'INPUT' && sensitiveTypes.includes(element.type)) {
return; // Skipped - not indexed, not searchable
}
```
**What this means:**
- Password/hidden/file fields **cannot be discovered** via `searchElementsByKey()`
- They **can only be operated** via direct DOM commands with explicit user instruction
- Example: `document.querySelector('input[type="password"]').value = 'xxx'` requires user-provided selector
- The extension **never proactively reads** these fields
### Dependencies
This Skill **must** be used with the following components:
1. **Page JS Extension** - Chrome Extension (manual installation required)
- GitHub: https://github.com/TangJing/openclaw_access_web_page_js
- **Please download and review source code before installation**
- Installation: `chrome://extensions/` → Developer mode → Load unpacked
2. **CDP Environment** - Chrome DevTools Protocol access
- Local: `http://127.0.0.1:9222`
- Or automation frameworks like Puppeteer/Playwright
---
## Workflow
1. **Check Extension** → Verify `ElementCollector` is injected (first time only)
2. **Get Element Index** → Call `exportData()` to get element key list (non-sensitive)
3. **AI Analysis** → Identify target elements by keys (buttons, inputs, etc.)
4. **Execute Operation** → Perform click/input operations via CDP
---
## ⚠️ Security Restrictions
### Prohibited Page Types
**DO NOT use this Skill on:**
- 🔒 Banking/financial websites
- 🔒 Login/registration pages (involving passwords)
- 🔒 Payment pages
- 🔒 Healthcare/medical websites
- 🔒 Government/ID-related websites
- 🔒 Any pages containing personal sensitive information
### Prohibited Data Types
**DO NOT read or modify:**
- Password input fields (`type="password"`)
- Credit card number inputs
- National ID number inputs
- Other sensitive personal data fields
### Recommended Operation Scenarios
**This Skill is suitable for:**
- ✅ Web operations with public information
- ✅ Automation testing environments
- ✅ Non-sensitive form filling (e.g., search boxes)
- ✅ Button click operations
- ✅ Dropdown selection operations
---
## Operation Templates
### Check Extension Availability (First Launch)
```javascript
typeof ElementCollector !== 'undefined'
// Returns true if extension is installed
```
### Get Page Element Index (Non-sensitive)
```javascript
ElementCollector.exportData()
// Returns: { elements: [...keys], keywords: [...], elementCount: N }
// Note: Only returns element key list, not actual DOM content
```
### Click Button
```javascript
const results = ElementCollector.searchElementsByKey('{button-keyword}');
const element = Object.values(results)[0];
if (element) element.click();
```
### Fill Regular Input (Non-sensitive)
```javascript
const inputs = ElementCollector.searchElementsByKey('{search-box/input}');
const input = Object.values(inputs)[0];
if (input) {
input.value = '{value}';
input.dispatchEvent(new Event('input', { bubbles: true }));
}
```
### Select Dropdown Option
```javascript
const selects = ElementCollector.searchElementsByKey('{selector-keyword}');
const select = Object.values(selects)[0];
if (select) {
select.value = '{option-value}';
select.dispatchEvent(new Event('change', { bubbles: true }));
}
```
---
## CDP Command Reference
| Operation | CDP Runtime.evaluate Expression |
|-----------|--------------------------------|
| Check extension | `typeof ElementCollector !== 'undefined'` |
| Get index | `ElementCollector.exportData()` |
| Click | `ElementCollector.searchElementsByKey('btn')[0].click()` |
| Fill | `ElementCollector.searchElementsByKey('input')[0].value = 'text'` |
| Select | `ElementCollector.searchElementsByKey('select')[0].value = 'option'` |
---
## Common Keywords
| Operation | Recommended Keywords |
|-----------|---------------------|
| Search | `'搜索'`, `'search'` |
| Submit | `'提交'`, `'submit'` |
| Cancel | `'取消'`, `'cancel'` |
| Confirm | `'确定'`, `'confirm'` |
| Delete | `'删除'`, `'delete'` |
| Edit | `'编辑'`, `'edit'` |
| Save | `'保存'`, `'save'` |
---
## ⚠️ Privacy & Data Flow
### Data Flow
```
Browser DOM → ElementCollector (Memory Index) → CDP → Local AI Agent
↑
(Key list only, no sensitive content)
```
### Privacy Notice
1. **Extension Level**:
- ✅ Page JS Extension runs entirely in browser locally
- ✅ Does not proactively send data to external servers
- ✅ Data stored in memory, cleared when page closes
2. **Agent Level**:
- ⚠️ **AI Agent may send element data to LLM services**
- ⚠️ Element keys may contain page text content (button labels, input labels)
- ⚠️ Ensure your AI Agent configuration meets privacy requirements
3. **User Responsibility**:
- ⚠️ Users must review extension source code themselves
- ⚠️ Users must ensure AI Agent won't send sensitive data to untrusted services
- ⚠️ Users must avoid using this Skill on sensitive pages
### Data Scope
| Data Type | Collected | Operable | Description |
|-----------|-----------|----------|-------------|
| Element id | ✅ Yes | - | For indexing |
| Element class | ✅ Yes | - | For indexing |
| Element title | ✅ Yes | - | For indexing |
| Element innerText | ✅ Yes | - | For indexing (max 100 chars) |
| Regular inputs | ✅ Yes | ✅ Read/Write | Searchable, fillable, readable |
| Password fields | ❌ **Not collected** | ⚠️ **Write via explicit user command ONLY** | Never indexed, never readable, can only write with explicit user DOM command |
| Hidden fields | ❌ **Not collected** | ⚠️ **Write via explicit user command ONLY** | Never indexed, never readable, can only write with explicit user DOM command |
| File uploads | ❌ **Not collected** | ⚠️ **Write via explicit user command ONLY** | Never indexed, never readable, can only write with explicit user DOM command |
| Cookie/Storage | ❌ No | ❌ Inaccessible | Extension has no such permission |
**Key Points:**
1. **Sensitive fields are NEVER collected** - They don't appear in `exportData()` results
2. **Sensitive fields are NEVER readable** - No API exists to read their values
3. **Writing requires explicit user command** - User must provide exact DOM selector
4. **This extension does NOT auto-fill sensitive fields** - No credential handling
**Technical Implementation:**
```javascript
// Automatically skip sensitive fields in collectAllElements()
const sensitiveTypes = ['password', 'hidden', 'file'];
if (element.tagName === 'INPUT' && sensitiveTypes.includes(element.type)) {
return; // Not collected to index, cannot search via searchElementsByKey
}
```
**Note:** Sensitive fields are not indexed but can still be operated via native DOM API with explicit user command (e.g., `document.querySelector('input[type="password"]').value = 'xxx'`). This extension does not proactively read values from these fields.
---
## Installation Steps
### Step 1: Install Page JS Extension
```bash
# 1. Download source code
git clone https://github.com/TangJing/openclaw_access_web_page_js.git
cd openclaw_access_web_page_js
# 2. Review source code (recommended)
# Check for:
# - Network request code
# - Data exfiltration logic
# - manifest.json permissions
# 3. Install extension
# Open chrome://extensions/
# Enable "Developer mode"
# Click "Load unpacked", select project directory
```
### Step 2: Install OpenClaw Skill
```bash
# 1. Create Skill directory
mkdir -p ~/.openclaw/workspace/skills/page-js-operation
# 2. Save this SKILL.md to the directory
# Path: ~/.openclaw/workspace/skills/page-js-operation/SKILL.md
# 3. Refresh Skills
openclaw agent --message "refresh skills"
```
---
## Usage Examples
### Safe Scenario: Search Operation
```bash
# On search engine page
openclaw agent --message "use page_js_operation to fill search box with 'keyword'"
openclaw agent --message "use page_js_operation to click search button"
```
### Safe Scenario: Navigation Operation
```bash
# On content page
openclaw agent --message "use page_js_operation to click next page button"
openclaw agent --message "use page_js_operation to select category from dropdown"
```
### ❌ Prohibited Scenario: Login Operation
```bash
# DO NOT use on login pages
# openclaw agent --message "fill username and password and click login"
# Reason: Involves password fields
```
---
## Security Best Practices
1. **Use Dedicated Browser Profile**
- Create separate Chrome user profile for automation testing
- Do not save any real account credentials in test profile
2. **Limit Accessible Domains**
- Restrict accessible domains in extension settings
- Only allow test environments or public websites
3. **User Confirmation Mechanism**
- Require user confirmation before sensitive operations
- E.g., form submissions, deletions
4. **Regular Review**
- Periodically review extension code for updates
- Check Skill execution logs
---
## Technical Notes
### ElementCollector Working Principle
```javascript
// Collection phase
elementMap = Map<key, Element> // key → DOM reference
keywordMap = Map<keyword, Set<keys>> // keyword → key set
// key format: id|class|title|innerText
// Example: "login-btn|btn primary||Login"
```
### Why Token Savings
- **Traditional**: Send complete HTML (5000-20000 tokens)
- **This Extension**: Send element key list only (100-500 tokens)
- **Savings**: ~95%+
---
## Disclaimer
**By using this Skill, you agree:**
1. You have reviewed and trust the Page JS Extension source code
2. You understand this Skill is for **automation testing ONLY**, NOT for daily web browsing
3. You understand AI Agent may send element data to LLM services
4. You will not use this Skill on pages involving sensitive information
5. You understand sensitive fields (password/hidden/file) are **NEVER collected or readable**
6. You understand writing to sensitive fields requires **explicit user command**
7. You assume all risks of using this Skill
8. The Skill author is not liable for any data breaches or losses
**Intended Use:** This Skill is designed exclusively for automated UI testing in development and CI/CD environments. It is NOT a general-purpose web automation tool for personal use.
---
## Links
- [GitHub Repository](https://github.com/TangJing/openclaw_access_web_page_js)
- [Chrome Extension Documentation](https://developer.chrome.com/docs/extensions/)
- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)
通过 CDP 和 Page JS Extension 操作网页元素，节省 95% Token（仅用于 UI 自动化测试）
---
name: page_js_operation
description: 通过 CDP 和 Page JS Extension 操作网页元素，节省 95% Token（仅用于 UI 自动化测试）
tools:
- cdp
---
# 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'` |
---
## ⚠️ 隐私与数据流说明
### 数据流向
```
浏览器 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 仓库](https://github.com/TangJing/openclaw_access_web_page_js)
- [Chrome 扩展开发文档](https://developer.chrome.com/docs/extensions/)
- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)
FILE:SKILL_EN.md
---
name: page_js_operation
description: Operate web page elements via CDP and Page JS Extension, save 95% Token (for UI automation testing only)
tools:
- cdp
---
# Page JS CDP Web Operation Skill
## ⚠️ Important Notice
**This Skill is designed for browser automation testing scenarios only, NOT for handling sensitive data pages.**
### 🎯 Usage Recommendations
**✅ Recommended for:**
- Automation testing environments
- UI testing in CI/CD pipelines
- Page function verification during development
- Web operation demos with public information
**❌ NOT Recommended for:**
- Daily website browsing
- Pages handling personal sensitive information
- Production environment automation (unless thoroughly tested)
### Dependencies
This Skill **must** be used with the following components:
1. **Page JS Extension** - Chrome Extension (manual installation required)
- GitHub: https://github.com/TangJing/openclaw_access_web_page_js
- **Please download and review source code before installation**
- Installation: `chrome://extensions/` → Developer mode → Load unpacked
2. **CDP Environment** - Chrome DevTools Protocol access
- Local: `http://127.0.0.1:9222`
- Or automation frameworks like Puppeteer/Playwright
---
## Workflow
1. **Check Extension** → Verify `ElementCollector` is injected (first time only)
2. **Get Element Index** → Call `exportData()` to get element key list (non-sensitive)
3. **AI Analysis** → Identify target elements by keys (buttons, inputs, etc.)
4. **Execute Operation** → Perform click/input operations via CDP
---
## ⚠️ Security Restrictions
### Prohibited Page Types
**DO NOT use this Skill on:**
- 🔒 Banking/financial websites
- 🔒 Login/registration pages (involving passwords)
- 🔒 Payment pages
- 🔒 Healthcare/medical websites
- 🔒 Government/ID-related websites
- 🔒 Any pages containing personal sensitive information
### Prohibited Data Types
**DO NOT read or modify:**
- Password input fields (`type="password"`)
- Credit card number inputs
- National ID number inputs
- Other sensitive personal data fields
### Recommended Operation Scenarios
**This Skill is suitable for:**
- ✅ Web operations with public information
- ✅ Automation testing environments
- ✅ Non-sensitive form filling (e.g., search boxes)
- ✅ Button click operations
- ✅ Dropdown selection operations
---
## Operation Templates
### Check Extension Availability (First Launch)
```javascript
typeof ElementCollector !== 'undefined'
// Returns true if extension is installed
```
### Get Page Element Index (Non-sensitive)
```javascript
ElementCollector.exportData()
// Returns: { elements: [...keys], keywords: [...], elementCount: N }
// Note: Only returns element key list, not actual DOM content
```
### Click Button
```javascript
const results = ElementCollector.searchElementsByKey('{button-keyword}');
const element = Object.values(results)[0];
if (element) element.click();
```
### Fill Regular Input (Non-sensitive)
```javascript
const inputs = ElementCollector.searchElementsByKey('{search-box/input}');
const input = Object.values(inputs)[0];
if (input) {
input.value = '{value}';
input.dispatchEvent(new Event('input', { bubbles: true }));
}
```
### Select Dropdown Option
```javascript
const selects = ElementCollector.searchElementsByKey('{selector-keyword}');
const select = Object.values(selects)[0];
if (select) {
select.value = '{option-value}';
select.dispatchEvent(new Event('change', { bubbles: true }));
}
```
---
## CDP Command Reference
| Operation | CDP Runtime.evaluate Expression |
|-----------|--------------------------------|
| Check extension | `typeof ElementCollector !== 'undefined'` |
| Get index | `ElementCollector.exportData()` |
| Click | `ElementCollector.searchElementsByKey('btn')[0].click()` |
| Fill | `ElementCollector.searchElementsByKey('input')[0].value = 'text'` |
| Select | `ElementCollector.searchElementsByKey('select')[0].value = 'option'` |
---
## Common Keywords
| Operation | Recommended Keywords |
|-----------|---------------------|
| Search | `'搜索'`, `'search'` |
| Submit | `'提交'`, `'submit'` |
| Cancel | `'取消'`, `'cancel'` |
| Confirm | `'确定'`, `'confirm'` |
| Delete | `'删除'`, `'delete'` |
| Edit | `'编辑'`, `'edit'` |
| Save | `'保存'`, `'save'` |
---
## ⚠️ Privacy & Data Flow
### Data Flow
```
Browser DOM → ElementCollector (Memory Index) → CDP → Local AI Agent
↑
(Key list only, no sensitive content)
```
### Privacy Notice
1. **Extension Level**:
- ✅ Page JS Extension runs entirely in browser locally
- ✅ Does not proactively send data to external servers
- ✅ Data stored in memory, cleared when page closes
2. **Agent Level**:
- ⚠️ **AI Agent may send element data to LLM services**
- ⚠️ Element keys may contain page text content (button labels, input labels)
- ⚠️ Ensure your AI Agent configuration meets privacy requirements
3. **User Responsibility**:
- ⚠️ Users must review extension source code themselves
- ⚠️ Users must ensure AI Agent won't send sensitive data to untrusted services
- ⚠️ Users must avoid using this Skill on sensitive pages
### Data Scope
| Data Type | Collected | Operable | Description |
|-----------|-----------|----------|-------------|
| Element id | ✅ Yes | - | For indexing |
| Element class | ✅ Yes | - | For indexing |
| Element title | ✅ Yes | - | For indexing |
| Element innerText | ✅ Yes | - | For indexing (max 100 chars) |
| Regular inputs | ✅ Yes | ✅ Read/Write | Searchable, fillable, readable |
| Password fields | ❌ **Not collected** | ⚠️ **Write only** | Not indexed, cannot search by keyword, but can set value via native DOM |
| Hidden fields | ❌ **Not collected** | ⚠️ **Write only** | Not indexed, cannot search by keyword, but can set value via native DOM |
| File uploads | ❌ **Not collected** | ⚠️ **Write only** | Not indexed, cannot search by keyword, but can set value via native DOM |
| Cookie/Storage | ❌ No | ❌ Inaccessible | Extension has no such permission |
**Technical Implementation:**
```javascript
// Automatically skip sensitive fields in collectAllElements()
const sensitiveTypes = ['password', 'hidden', 'file'];
if (element.tagName === 'INPUT' && sensitiveTypes.includes(element.type)) {
return; // Not collected to index, cannot search via searchElementsByKey
}
```
**Note:** Sensitive fields are not indexed but can still be operated via native DOM API (e.g., `document.querySelector('input[type="password"]').value = 'xxx'`). This extension does not proactively read values from these fields.
---
## Installation Steps
### Step 1: Install Page JS Extension
```bash
# 1. Download source code
git clone https://github.com/TangJing/openclaw_access_web_page_js.git
cd openclaw_access_web_page_js
# 2. Review source code (recommended)
# Check for:
# - Network request code
# - Data exfiltration logic
# - manifest.json permissions
# 3. Install extension
# Open chrome://extensions/
# Enable "Developer mode"
# Click "Load unpacked", select project directory
```
### Step 2: Install OpenClaw Skill
```bash
# 1. Create Skill directory
mkdir -p ~/.openclaw/workspace/skills/page-js-operation
# 2. Save this SKILL.md to the directory
# Path: ~/.openclaw/workspace/skills/page-js-operation/SKILL.md
# 3. Refresh Skills
openclaw agent --message "refresh skills"
```
---
## Usage Examples
### Safe Scenario: Search Operation
```bash
# On search engine page
openclaw agent --message "use page_js_operation to fill search box with 'keyword'"
openclaw agent --message "use page_js_operation to click search button"
```
### Safe Scenario: Navigation Operation
```bash
# On content page
openclaw agent --message "use page_js_operation to click next page button"
openclaw agent --message "use page_js_operation to select category from dropdown"
```
### ❌ Prohibited Scenario: Login Operation
```bash
# DO NOT use on login pages
# openclaw agent --message "fill username and password and click login"
# Reason: Involves password fields
```
---
## Security Best Practices
1. **Use Dedicated Browser Profile**
- Create separate Chrome user profile for automation testing
- Do not save any real account credentials in test profile
2. **Limit Accessible Domains**
- Restrict accessible domains in extension settings
- Only allow test environments or public websites
3. **User Confirmation Mechanism**
- Require user confirmation before sensitive operations
- E.g., form submissions, deletions
4. **Regular Review**
- Periodically review extension code for updates
- Check Skill execution logs
---
## Technical Notes
### ElementCollector Working Principle
```javascript
// Collection phase
elementMap = Map<key, Element> // key → DOM reference
keywordMap = Map<keyword, Set<keys>> // keyword → key set
// key format: id|class|title|innerText
// Example: "login-btn|btn primary||Login"
```
### Why Token Savings
- **Traditional**: Send complete HTML (5000-20000 tokens)
- **This Extension**: Send element key list only (100-500 tokens)
- **Savings**: ~95%+
---
## Disclaimer
**By using this Skill, you agree:**
1. You have reviewed and trust the Page JS Extension source code
2. You understand AI Agent may send element data to LLM services
3. You will not use this Skill on pages involving sensitive information
4. You assume all risks of using this Skill
5. The Skill author is not liable for any data breaches or losses
---
## Links
- [GitHub Repository](https://github.com/TangJing/openclaw_access_web_page_js)
- [Chrome Extension Documentation](https://developer.chrome.com/docs/extensions/)
- [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/)