什么是 Web Navigator？

Web Navigator 是一款专为 AI 智能体设计的强大扩展，旨在提供对实时网页数据和交互式浏览器会话的无缝访问。作为 Openclaw Skills 库的一部分，它允许开发人员构建能够超越其训练数据、获取当前信息、与 Web 应用程序交互并从复杂的 DOM 结构中提取结构化数据的智能体。

该技能对于需要高保真网页交互的工作流特别有效，例如导航分页结果、处理重 JavaScript 界面或执行多步搜索序列。通过集成 Web Navigator，用户可以将他们的代码智能体转变为全面的研究和自动化中心。

下载入口:https://github.com/openclaw/skills/tree/main/skills/mematron/web-navigator

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

Web Navigator 应用场景

• 执行实时市场调研和竞争对手价格监控。
• 自动从动态 Web 门户提取技术文档。
• 在开发期间验证实时 API 端点或 Web 服务的可用性。
• 针对时事进行深度研究以生成内容。

1. AI 智能体识别出对外部数据的需求并触发 Web Navigator 技能。
2. 初始化浏览器实例以导航到特定 URL 或执行搜索引擎查询。
3. 该技能分析页面内容，识别相关的 HTML 元素和导航路径。
4. 执行滚动、点击或表单提交等操作以获取所需信息。
5. 抓取并清理结构化内容，将其返回到智能体上下文进行分析或存储。

Web Navigator 配置指南

要将此功能集成到您的环境中，请使用以下命令：

# 通过 CLI 安装技能
openclaw add web-navigator

# 确保存在浏览器自动化的依赖项
npm install playwright
npx playwright install chromium

Web Navigator 数据架构与分类体系

Web Navigator 技能使用以下模式组织交互数据和结果：

name: web-navigator
description: [TODO: Complete and informative explanation of what the skill does and when to use it. Include WHEN to use this skill - specific scenarios, file types, or tasks that trigger it.]

Web Navigator

Overview

[TODO: 1-2 sentences explaining what this skill enables]

Structuring This Skill

[TODO: Choose the structure that best fits this skill's purpose. Common patterns:

1. Workflow-Based (best for sequential processes)

• Works well when there are clear step-by-step procedures
• Example: DOCX skill with "Workflow Decision Tree" -> "Reading" -> "Creating" -> "Editing"
• Structure: ## Overview -> ## Workflow Decision Tree -> ## Step 1 -> ## Step 2...

2. Task-Based (best for tool collections)

• Works well when the skill offers different operations/capabilities
• Example: PDF skill with "Quick Start" -> "Merge PDFs" -> "Split PDFs" -> "Extract Text"
• Structure: ## Overview -> ## Quick Start -> ## Task Category 1 -> ## Task Category 2...

3. Reference/Guidelines (best for standards or specifications)

• Works well for brand guidelines, coding standards, or requirements
• Example: Brand styling with "Brand Guidelines" -> "Colors" -> "Typography" -> "Features"
• Structure: ## Overview -> ## Guidelines -> ## Specifications -> ## Usage...

4. Capabilities-Based (best for integrated systems)

• Works well when the skill provides multiple interrelated features
• Example: Product Management with "Core Capabilities" -> numbered capability list
• Structure: ## Overview -> ## Core Capabilities -> ### 1. Feature -> ### 2. Feature...

Patterns can be mixed and matched as needed. Most skills combine patterns (e.g., start with task-based, add workflow for complex operations).

Delete this entire "Structuring This Skill" section when done - it's just guidance.]

[TODO: Replace with the first main section based on chosen structure]

[TODO: Add content here. See examples in existing skills:

• Code samples for technical skills
• Decision trees for complex workflows
• Concrete examples with realistic user requests
• References to scripts/templates/references as needed]

Resources (optional)

Create only the resource directories this skill actually needs. Delete this section if no resources are required.

scripts/

Executable code (Python/Bash/etc.) that can be run directly to perform specific operations.

Examples from other skills:

• PDF skill: fill_fillable_fields.py, extract_form_field_info.py - utilities for PDF manipulation
• DOCX skill: document.py, utilities.py - Python modules for document processing

Appropriate for: Python scripts, shell scripts, or any executable code that performs automation, data processing, or specific operations.

Note: Scripts may be executed without loading into context, but can still be read by Codex for patching or environment adjustments.

references/

Documentation and reference material intended to be loaded into context to inform Codex's process and thinking.

Examples from other skills:

• Product management: communication.md, context_building.md - detailed workflow guides
• BigQuery: API reference documentation and query examples
• Finance: Schema documentation, company policies

Appropriate for: In-depth documentation, API references, database schemas, comprehensive guides, or any detailed information that Codex should reference while working.

assets/

Files not intended to be loaded into context, but rather used within the output Codex produces.

Examples from other skills:

• Brand styling: PowerPoint template files (.pptx), logo files
• Frontend builder: HTML/React boilerplate project directories
• Typography: Font files (.ttf, .woff2)

Appropriate for: Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output.

Not every skill requires all three types of resources.