从“上帝视角”到“全自动代理”：如何打造能完成复杂任务的专属 AI Agent从“上帝视角”到“全自动代理”：如何打造能

从“上帝视角”到“全自动代理”：如何打造能完成复杂任务的专属 AI Agent

在上一篇文章中，我们探讨了JS 注入与函数劫持技术，掌握了在浏览器中开启“上帝视角”的能力——我们可以任意读取网页的内部状态、拦截核心函数、甚至通过 AST 插桩来精细控制代码执行。

今天，我们将这个思路推向极致：如果我们将这种“上帝视角”赋予一个 AI（大模型），会发生什么？

传统的自动化脚本（如 Selenium、Puppeteer）往往是“盲人摸象”，只能通过识别 UI 元素（CSS 选择器、XPath）来模拟点击。这种方式脆弱且低效：一旦网页改版，脚本就挂了；而且它只能做“人能做的事”（点击、输入），很难利用程序内部的捷径。

而基于“上帝视角”的 AI Agent（智能体），则是直接与网页的“灵魂”对话。它不看皮囊（UI），直击核心（数据与逻辑）。

本文将带你构建一个基于 JS 注入 + LLM（大语言模型） 的智能自动化系统，实现真正的“降维打击”。

一、核心架构：AI 的“眼睛”与“双手”

要让 AI 完成复杂任务，我们需要打通三个环节：

1. 感知（Perception）：AI 如何实时获取网页的“真实状态”？（不再是截图，而是内存数据）
2. 决策（Brain）：AI 如何根据状态判断下一步做什么？
3. 执行（Action）：AI 如何操作网页？（不再是模拟鼠标，而是直接调用函数）

1. 感知层：不仅看“图”，更要看“心”

普通 RPA（机器人流程自动化）通过截图或 DOM 树告诉 AI 发生了什么。
高阶玩家直接把网页的全局状态对象（Store/State） 喂给 AI。

实现思路：
利用我们之前学的 Hook 技术，将网页的关键数据暴露给全局变量，供 AI 随时读取。

// 注入代码：将 React/Vue 的 Store 挂载到 window
// 假设目标网站使用了 Redux
const store = findReduxStore(); // 需要根据具体网站逆向找到 store 实例
window.__AI_STATE__ = () => store.getState();

// 或者劫持网络请求，缓存最新数据
let _latestTableData = [];
const originalFetch = window.fetch;
window.fetch = async (...args) => {
    const response = await originalFetch(...args);
    const clone = response.clone();
    const json = await clone.json();
    if (args[0].includes('/api/list')) {
        _latestTableData = json.data; // AI 可以直接读这个变量，而不用去解析复杂的 DOM 表格
    }
    return response;
};

给 AI 的 Prompt（提示词）：

"当前网页的内部数据状态是：JSON.stringify(window.__AI_STATE__())。用户的目标是：购买价格低于 500 元的红色商品。"

2. 执行层：拒绝模拟点击，直接函数调用

模拟鼠标点击 div.submit-btn 既慢又不稳定。
如果我们在上一篇中已经劫持了提交函数，为什么不直接调用它呢？

实现思路：
将网页内部的核心操作封装成 工具函数（Tools），暴露给 AI。

// 注入代码：暴露“上帝之手”工具箱
window.__AI_TOOLS__ = {
    // 直接调用 API 或内部函数提交表单，跳过 UI 填写
    submitOrder: (productId, count) => {
        // 调用网页内部的 api 模块
        window.appModules.api.createOrder({ id: productId, num: count });
        console.log(`AI 已直接下单：商品 ${productId}, 数量 ${count}`);
    },
    
    // 修改过滤器，瞬间筛选数据
    setFilter: (minPrice) => {
        // 直接修改 Vue/React 组件状态
        const app = document.querySelector('#app').__vue__;
        app.filter.price = minPrice;
        app.refreshList(); // 触发刷新
    },
    
    // 跳转页面
    gotoPage: (path) => window.router.push(path)
};

3. 决策层：LLM 作为中控大脑

现在，我们需要一个简单的 Python 或 Node.js 脚本，作为 Bridge（桥梁），连接浏览器（Puppeteer/Chrome Extension）和大模型 API。

Workflow（工作流）：

1. Bridge 通过 Chrome DevTools Protocol (CDP) 执行 window.__AI_STATE__()，拿到 JSON 数据。
2. Bridge 将 JSON 数据 + 可用工具列表 (__AI_TOOLS__) + 用户目标发送给 LLM。
3. LLM 返回要执行的代码，例如：window.__AI_TOOLS__.submitOrder(1001, 2)。
4. Bridge 在浏览器中执行这段 JS 代码。

二、实战演练：自动完成“极速抢票”任务

假设我们要在一个购票网站上，自动抢购一张“周杰伦演唱会”的门票。

步骤 1：注入探针（Hook）

我们分析网页，发现它用了一个全局变量 window.ticketData 存储余票信息，以及一个 buy(id) 函数用于下单。

// 我们的注入脚本 inject.js
(function() {
    // 1. 暴露状态获取器
    window.getTicketState = () => {
        // 过滤掉无关 UI 数据，只给 AI 核心信息
        return window.ticketData.list.map(t => ({
            id: t.id,
            name: t.concertName,
            price: t.price,
            canBuy: t.status === 1
        }));
    };

    // 2. 暴露操作动作
    window.doBuy = (id) => {
        console.log("AI 尝试购买 ID:", id);
        // 直接调用网站内部逻辑，比点按钮快 10 倍
        window.internalApp.services.order.create(id); 
    };
})();

步骤 2：构建 AI 思考循环（The Loop）

我们在 Node.js 中运行这个循环：

// 伪代码：AI Agent 主循环
async function runAIAgent() {
    while (true) {
        // 1. 观察：在浏览器执行 JS 获取状态
        const state = await page.evaluate(() => window.getTicketState());
        
        // 2. 思考：询问 LLM
        const prompt = `
            当前票务状态：${JSON.stringify(state)}
            我的目标：帮我买一张“周杰伦”的票，价格不限。
            你可以使用的 JS 函数：window.doBuy(id)。
            如果没有票，请回答 "WAIT"。
            如果有票，请返回具体的 JS 执行代码。
        `;
        
        const aiResponse = await callLLM(prompt); // 假设返回 "window.doBuy(1024)"
        
        // 3. 行动：执行 AI 的决定
        if (aiResponse !== "WAIT") {
            await page.evaluate(aiResponse);
            console.log("任务完成，AI 已下单！");
            break;
        }
        
        // 4. 等待：避免请求过频
        await sleep(1000);
    }
}

步骤 3：效果展示

• 传统脚本：还在 document.querySelector('.btn').click()，结果因为弹窗广告挡住了按钮，点击失败。
• 你的 AI Agent：
1. 1. 直接读取内存，发现 ID 1024 的票状态变成了 canBuy: true。
2. 2. 无视页面上的广告弹窗（因为根本不操作 UI）。
3. 3. 直接调用 doBuy(1024) 函数。
4. 4. 耗时：50ms。 抢票成功。

三、进阶：处理复杂逻辑与反爬

面对更复杂的任务，单一的循环可能不够。我们需要引入 ReAct（Reasoning + Acting） 模式。

1. 动态修正错误

如果 doBuy(1024) 报错了（例如“库存不足”），我们在 try-catch 中捕获错误，并将错误信息反馈给 AI：

"上次执行 doBuy(1024) 失败，错误信息是：'Inventory limit exceeded'。请重新决策。"

AI 收到反馈后，可能会分析数据，发现还有另一张 ID 1025 的票，于是输出 doBuy(1025)。这就是 AI 的自我纠错能力。

2. 绕过人机验证

利用“上帝视角”，我们可以监听验证码组件的加载。
当检测到 window.captchaVisible === true 时，AI 可以暂停自动化流程，通过系统通知（System Notification）呼叫人类介入：“主人，需要滑块验证，请帮帮我！”
等人类手动滑过验证码后，AI 检测到状态变化，继续接管操作。

四、总结：从“脚本小子”到“架构师”

通过这篇软文，我们完成了一次思维升级：

1. Level 1（按键精灵）：模拟鼠标键盘，不仅慢，而且笨。
2. Level 2（DOM 操作）：使用 jQuery/Puppeteer 操作 DOM，比 Level 1 稳，但容易受 UI 改版影响。
3. Level 3（JS 注入/上帝视角）：直接读写内存变量，调用内部函数。这是逆向工程师的手段。
4. Level 4（AI Agent）：JS 注入 + LLM 大脑。将 Level 3 的能力封装成工具，交给 AI 去调度。

这就是构建下一代自动化工具的核心秘密。
你不再需要为每一个网站的每一个按钮写死代码。你只需要搭建好“感知”和“行动”的桥梁，剩下的复杂逻辑判断，交给 AI 去完成。

动手试试吧！ 找一个简单的网页（比如 Todo List Demo），试着注入一个 window.getAllTodos() 和 window.addTodo()，然后让 ChatGPT 来帮你操作它。

从“上帝视角”到“全自动代理”：如何打造能完成复杂任务的专属 AI Agent