如何透過 AI 瀏覽器自動化建立由 LLM 驅動的網絡機械人

AI‑Powered Browser Automation Is Trending: Build a LLM‑Driven Web Bot in Minutes

Introduction

Developers are racing to pair large language models with the Chrome DevTools Protocol, and the surge in Google Trends and Hacker News searches proves it: “AI browser automation” is no longer a niche experiment. In this hands‑on guide you’ll see how to spin up a fully‑functional LLM‑backed web bot, compare the top platforms, and ship a real‑world price‑monitoring script—all with concrete code you can copy‑paste today.

Quick‑Start Overview

Frequently Asked Questions

Why It Matters Right Now

1. LLM capabilities have exploded – 2023‑2024 models understand multi‑step instructions, generate code on the fly, and reason about UI state.
2. Browser APIs are native and low‑latency – CDP and WebExtension hooks let you manipulate the DOM programmatically without extra drivers.
3. Cost is negligible – A single inference costs a few cents; automating 1 000 form fills is cheaper than a junior developer’s hourly wage.
4. Compliance is easier – Sandboxed extensions give you audit logs that satisfy GDPR and emerging AI regulations.
5. Community momentum – Projects like Ego‑Lite, Chrome‑AI‑Bot, and Auto‑GPT‑Web are already open‑source and battle‑tested.

Architecture at a Glance

+----------------+       +-------------------+       +-------------------+
|  Your Script   | <---> |  Chrome DevTools  | <---> |  Chrome / Edge    |
| (Node.js)      |       |  Protocol (CDP)   |       |  Browser UI       |
+----------------+       +-------------------+       +-------------------+
        |                         |
        v                         v
+----------------+       +-------------------+
|  LLM Provider  | <---> |  Prompt Builder   |
| (OpenAI, …)    |       |  (JSON, system)   |
+----------------+       +-------------------+

Your script builds a prompt describing the current DOM, sends it to the LLM, receives a concise action plan (e.g., “click the button with text Add to Cart”), and issues the corresponding CDP command.

Platform Comparison

Bottom line: If you already use Node, Puppeteer‑Core gives the smallest footprint; for cross‑language teams, Playwright is the most flexible.

Step‑by‑Step Implementation

1. Set Up Chrome for Remote Debugging

# macOS / Linux
google-chrome \
  --headless \
  --disable-gpu \
  --remote-debugging-port=9222 \
  --no-sandbox

Tip: On CI, add --disable-dev-shm-usage to avoid container memory limits.

2. Install Dependencies

npm init -y
npm i puppeteer-core chrome-remote-interface openai

3. Create the Prompt Builder

// prompt.js
export function buildPrompt(url, html) {
  return `
You are an AI assistant that can interact with a web page.
The page URL is: ${url}
The relevant HTML snippet is:
\`\`\`html
${html}
\`\`\`

Your task: return a JSON array of actions the browser should perform.
Each action must have:
{
  "type": "click|type|select|navigate",
  "selector": "CSS selector",
  "value": "text to type (optional)"
}
Only return valid JSON, no explanations.
`;
}

4. Call the LLM

// llm.js
import { Configuration, OpenAIApi } from "openai";

const config = new Configuration({ apiKey: process.env.OPENAI_API_KEY });
const client = new OpenAIApi(config);

export async function getActions(prompt) {
  const resp = await client.createChatCompletion({
    model: "gpt-4o-mini",
    messages: [{ role: "user", content: prompt }],
    temperature: 0,
  });
  return JSON.parse(resp.data.choices[0].message.content);
}

5. Drive Chrome via CDP

// ai-browser-bot.js
import puppeteer from "puppeteer-core";
import { buildPrompt } from "./prompt.js";
import { getActions } from "./llm.js";

(async () => {
  const browser = await puppeteer.connect({
    browserURL: "http://127.0.0.1:9222",
    defaultViewport: null,
  });
  const page = await browser.newPage();
  await page.goto("https://example.com/products");

  // Grab a minimal DOM snapshot (you can refine the selector)
  const html = await page.evaluate(() => document.body.innerHTML);
  const prompt = buildPrompt(page.url(), html);
  const actions = await getActions(prompt);

  for (const act of actions) {
    switch (act.type) {
      case "click":
        await page.click(act.selector);
        break;
      case "type":
        await page.type(act.selector, act.value);
        break;
      case "navigate":
        await page.goto(act.value);
        break;
      // add more cases as needed
    }
  }

  // Example: extract price after navigation
  const price = await page.evaluate(() => {
    const el = document.querySelector(".price");
    return el ? el.textContent.trim() : null;
  });
  console.log("Current price:", price);

  await browser.disconnect();
})();

Run it:

node ai-browser-bot.js

You should see the bot navigate, click, type, and finally print the product price.

Reusable Script Library

All three live in the utils/ folder and are pure functions that accept a page object from Puppeteer or Playwright.

Security & Compliance Checklist

1. API Key protection – Store OPENAI_API_KEY (or Anthropic key) in a secret manager (Vault, GitHub Secrets).
2. Least‑privilege extension – If you ship a Chrome extension, request only scripting and activeTab permissions.

Herramienta mencionada: Groq Cloud