PageAgent Browser Enhancement

Enhanced browser DOM manipulation using PageAgent's page-controller. Injects into any web page to provide precise DOM extraction, interactive element detecti...

Security Scan

The skill's code and instructions match its claimed purpose (injecting a PageController into web pages) but there are execution and dependency inconsistencies and a powerful ability to run arbitrary JS in pages that you should review before use.

Purpose & Capability

The name/description and included files align: the skill injects PageController into pages and exposes a window.__PA__ API for precise DOM operations. However the SKILL.md and files expect you to run Node/Bash scripts (node, bash, and a Node WebSocket module like 'ws' or Node 22+ global WebSocket) and to talk to a local CDP endpoint, but registry metadata declares no required binaries/dependencies. The missing declaration for required runtime tools (node, possibly npm modules) and the implicit need for a local CDP endpoint (default 127.0.0.1:18800) is an incoherence that affects install/run expectations.

Instruction Scope

Runtime instructions are consistent with the stated purpose: inject library via CDP, call getState(), click/input/select/scroll, re-read state. The API includes execJS(script) which enables executing arbitrary JavaScript inside the target page — this is expected for a page-manipulation tool but also means the agent (or any user following the instructions) can read any page DOM, including sensitive logged-in content, and run scripts that could exfiltrate data if misused. The SKILL.md does not instruct or attempt to exfiltrate externally, which is appropriate, but the capability itself is powerful and should be used only on pages you trust or in isolated profiles as suggested.

Install Mechanism

There is no install spec (instruction-only) and the code files are bundled with the skill. That is consistent with an instruction-first skill. The inject scripts run at user invocation; nothing in the install spec downloads code from remote URLs or writes installers to disk automatically.

Credentials

The skill requests no environment variables or credentials, and the bundled code does not itself reference external API keys. The only environmental requirement implicit in the scripts is access to a local CDP endpoint (defaulting to http://127.0.0.1:18800) and a working Node runtime (and possibly the 'ws' module). Those are reasonable for a browser-injection tool but should have been declared.

Persistence & Privilege

always is false and the skill does not request system-wide persistence or modify other skills/config. It injects into pages only when you run the provided injection commands; no autonomous or always-on privilege escalation is apparent.

What to consider before installing

This skill appears to do what it says (inject PageAgent/PageController into pages) but exercise caution before installing or running it. Practical points to check before use: 1) The SKILL.md and scripts assume you can run 'node' and bash and access a local CDP endpoint (default http://127.0.0.1:18800) — the registry metadata did not declare these required binaries or Node modules (e.g., 'ws'), so ensure your environment meets these requirements. 2) The injected API exposes execJS and can read and manipulate any page DOM — only run it against pages you control or in an isolated browser profile; do not use it on sites containing sensitive data unless you trust the skill. 3) Review the bundled JS yourself (or run in a disposable environment) because arbitrary JS will be evaluated in target pages. 4) Prefer the provided isolated profile option (profile="openclaw") and avoid exposing the CDP endpoint to untrusted networks. If you want to proceed, ask the publisher to update metadata to list Node and any required modules/binaries so requirements are explicit.

PageAgent Browser Enhancement Skill

Injects alibaba/page-agent v1.5.6 PageController into web pages via the browser tool's evaluate action. Gives you superior DOM manipulation compared to basic browser actions.

Key Advantages Over Basic Browser Tool

1. cursor:pointer heuristic — detects clickable elements even without semantic tags
2. Full event chain — mouseenter→mouseover→mousedown→focus→mouseup→click (not just .click())
3. React/Vue compatible input — uses native value setter to bypass framework interception
4. contenteditable support — proper beforeinput/input event dispatch
5. Indexed elements — [N]<tag> format for precise LLM-directed operations
6. Incremental change detection — *[N] marks new elements since last step

Usage Flow

Step 1: Inject PageController into the page

Use the CDP injection script (handles the 72KB library injection):

node ~/.openclaw/workspace/skills/page-agent/scripts/inject-cdp.mjs <TARGET_ID>

Where TARGET_ID is from browser(action="open", ...). The script injects both page-controller-global.js and inject.js via CDP WebSocket, outputting ✅ injected on success.

Step 2: Get page state (DOM extraction)

// Returns { url, title, header, content, footer }
// content is the LLM-readable simplified HTML with indexed interactive elements
const state = await window.__PA__.getState();
return JSON.stringify({ url: state.url, title: state.title, content: state.content, footer: state.footer });

The content field looks like:

[0]<a aria-label=首页 />
[1]<div >PageAgent />
[2]<button role=button>快速开始 />
[3]<input placeholder=搜索... type=text />

Step 3: Perform actions by index

// Click element at index 2
await window.__PA__.click(2);

// Type text into input at index 3
await window.__PA__.input(3, "hello world");

// Select dropdown option
await window.__PA__.select(5, "Option A");

// Scroll down 1 page
await window.__PA__.scroll(true, 1);

// Scroll specific element
await window.__PA__.scrollElement(4, true, 1);

Step 4: Re-read state after actions

After each action, call getState() again to see the updated DOM. Look for *[N] markers which indicate newly appeared elements.

Practical Workflow: Design → Code → Operate

1. Design: Use frontend-design skill to create the page
2. Serve: Start a local dev server (npx serve or framework dev server)
3. Open: browser(action="open", targetUrl="http://localhost:3000")
4. Inject: Load PageController into the page (Step 1 above)
5. Inspect: Get DOM state to understand current page structure
6. Operate: Click, type, scroll to test and interact with the page
7. Iterate: Modify code based on what you observe, re-inject, repeat

Tips

• Always re-inject after page navigation (SPA route changes are fine, full reloads need re-inject)
• The content output is token-efficient — use it instead of screenshots when possible
• For long pages, use scroll + getState to see content below the fold
• Clean up highlights with window.__PA__.cleanUp() before taking screenshots
• Use profile="openclaw" for the isolated browser, or profile="chrome" for the Chrome extension relay

Files

• scripts/page-controller.js — PageController library (72KB, from @page-agent/page-controller@1.5.6)
• scripts/inject.js — Helper wrapper that creates window.__PA__ API