Token Efficient Web Operations en

Operate web page elements via CDP and Page JS Extension, save 95% Token (for UI automation testing ONLY, NOT a web browsing tool)

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:

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

typeof ElementCollector !== 'undefined'
// Returns true if extension is installed

Get Page Element Index (Non-sensitive)

ElementCollector.exportData()
// Returns: { elements: [...keys], keywords: [...], elementCount: N }
// Note: Only returns element key list, not actual DOM content

Click Button

const results = ElementCollector.searchElementsByKey('{button-keyword}');
const element = Object.values(results)[0];
if (element) element.click();

Fill Regular Input (Non-sensitive)

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

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:

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

# 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

# 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

# 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

# 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

# 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

// 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
• Chrome Extension Documentation
• Chrome DevTools Protocol