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)

Security Scan

The skill's stated purpose (CDP + Page JS extension for UI test automation) matches its instructions and requirements, but it relies on a user-installed browser extension and the agent/LLM data flow — so review the extension and restrict usage to non-sensitive, controlled environments.

Purpose & Capability

Name/description, declared dependencies (Page JS Extension + CDP), and the SKILL.md instructions all focus on browser automation and element operations; there are no unrelated env vars, binaries, or installs requested.

Instruction Scope

Instructions are consistent with UI automation (exportData, searchElementsByKey, click, fill). The doc explicitly forbids sensitive sites and shows code to skip password/hidden/file inputs, which is appropriate. However, the agent-level guidance admits element keys/data may be sent to external LLMs — that creates a real exfiltration risk if the agent is misconfigured or the LLM call is not local. Also review whether the 'skip sensitive fields' logic covers all edge cases (non-INPUT elements, custom controls, attributes).

Install Mechanism

This is instruction-only (no install spec). The only install step is a manual extension install from a GitHub repo; that is reasonable for this purpose but requires the user to inspect the extension source before trusting it.

Credentials

No environment variables, secrets, or system paths are requested. The skill does not ask for unrelated credentials or persistent tokens.

Persistence & Privilege

always:false (normal). Model invocation is allowed (default), so the agent could autonomously run CDP commands that result in element data being sent to an LLM — this is expected for automated skills but increases blast radius; limit autonomous use in sensitive contexts.

Assessment

This skill appears coherent for automated UI testing, but take these precautions before use: 1) Manually review the linked Page JS extension source code (https://github.com/TangJing/openclaw_access_web_page_js) before installing; 2) Only run the skill in controlled CI/test environments, never on banking, payment, healthcare, login or other sensitive pages; 3) Ensure your agent/LLM setup does not send raw DOM content or secrets to external services — prefer local LLMs or block outbound LLM calls during tests; 4) Audit the extension's sensitive-field filtering (covers non-INPUT or custom components?) and test edge cases; 5) If you need stronger guarantees, disable autonomous invocation for this skill or restrict it to manually triggered runs.

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