WebClaw

🌎 简介 (Introduction)

WebClaw is an AI-powered browser automation extension with built-in LLM integration and userscript support. It seamlessly connects natural language instructions to browser actions such as clicking, typing, and data extraction.

WebClaw 是一个强大的、由大语言模型（LLM）驱动的浏览器自动化拓展插件。您只需通过自然语言下达指令，内部搭载的 Autonomous Agent（自主代理）和自动化桥接机制，就能自动帮你在当前网页执行点击、输入和内容提取等操作！

🚀 极简免编译安装 (Foolproof Installation)

为了方便非开发者快速使用，我们提供了一键提取脚本。您无需拉取源码，也不必运行任何复杂的编译命令！

For the most foolproof installation without bothering with source code or build steps:

1. 打开任意命令行/终端 (Open Terminal)
2. 复制并运行以下命令 (Run the following command):

   npx @xiaomidi/web-claw@latest

3. 几秒钟后，终端会提示提取成功。此时在您的 电脑桌面 (Desktop) 上，会自动多出一个叫 WebClaw-Extension 的文件夹。(The script extracts the fully bundled extension folder directly to your Desktop).
4. 打开具有 Chromium 内核的浏览器（例如 Chrome 或 Edge），进入扩展管理页 (Navigate to chrome://extensions).
5. 开启右上角的 开发者模式 (Developer mode)。
6. 点击左上角的 加载已解压的扩展程序 (Load unpacked)。
7. 选择您桌面上的 WebClaw-Extension 文件夹，安装即可完成！

🛠️ 核心特性 (Features)

• 🧠 LLM Integration (内置大模型桥接): Built-in bridge to large language models (llm-bridge.js) allowing dynamic parsing of user intent.
• 🤖 Autonomous Agent (自主任务代理): Leverages a core agent (agent.js) to intelligently orchestrate multi-step browser tasks.
• 🖱️ Browser Automation (DOM交互自动机): Directly interacts with web pages (automation-bridge.js) to perform automated filling, clicking, and extracting.
• 📝 User Scripts Support (自定脚本支持): Run customized interactions via an injected script (injected.js).
• 🎨 Interactive UI Panel (美观的交互面板): Comes with an aesthetic Side Panel interface for chat interaction and an intuitive Settings/Options page.

🏗️ 源码解构 (Project Structure)

For developers wishing to build from source:

src/
├── background/       # Service worker for background execution
├── content/          # Content scripts and injected scripts for DOM interaction
├── core/             # Core logic: Agent, Automation Bridge, LLM Bridge
├── lib/              # External libraries (e.g., marked.js)
├── options/          # Configuration and settings interface
├── popup/            # Extension popup menu
└── sidepanel/        # Agent interaction panel

💻 开发者使用 (Usage & Development)

If you clone the repository:

1. Run npm install
2. Run npm run dev to start Vite watch mode.
3. Automatically build using npm run build.

• Click on the WebClaw extension icon or open the Side Panel to start an interaction.
• Provide natural language commands and the built-in agent will automate your browser interactions based on the context of your active tab.

Published via npm / 🚀 Powered by AI.