企业官网建设流程全解析

Midscene Chrome扩展：AI浏览器自动化，3分钟跑通第一条指令

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene

周二下午三点，官网还有 40 页商品价格要抄，你翻到第 12 页手腕开始发酸。Midscene Chrome 扩展是 AI 浏览器自动化工具：在扩展面板里输入一句自然语言，浏览器自己点击、翻页、把数据抓回来。

它替你干掉哪几件破事

重复的网页活儿，不该靠手速硬扛。这三种情况你大概率都碰上过：

• 表单字段多，填错一处整单重交
• 页面上的数据要一条条手工抄进表格
• 页面改版后，之前攒的脚本集体失效

⚡️ 从零跑通第一条指令

1. 拉仓库、装依赖、构建扩展，三行命令搞定：

git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene && pnpm install pnpm --filter chrome-extension run build

构建完成后，项目apps/chrome-extension/目录下会多出一个dist目录，里面就是完整的扩展文件。

2. 在 Chrome 里装扩展，全程点鼠标：

   • 在地址栏输入chrome://extensions/回车，进入扩展管理页
   • 打开右上角的"开发者模式"开关
   • 点击"加载已解压的扩展程序"按钮
   • 在弹出的窗口里选中项目里的dist目录

3. 装好后工具栏会出现 Midscene 图标，点开它，侧边面板滑出来。先点顶部的设置图标，把多模态模型配置粘贴进去保存——没有这一步，它"看"不懂页面。

4. 打开任意网页，在面板输入框里写一句人话，比如"在搜索框输入 Midscene.js，然后点击搜索"，点 Run。

浏览器自己动起来：光标移到搜索框、逐字敲入、点下按钮，你只需要看着。

三个能力，按你的用法看

在浏览器面板里直接下指令

什么时候用：第一次试一条指令、想确认 AI 找没找对元素、快速验证某个操作靠不靠谱，都在面板里做，不用先写工程。

界面长什么样：左边写指令，右边看网页实时反应。左侧有指令类型切换——Action 执行操作、Query 提取数据、Assert 检查界面，下面是 Prompt 输入框和 Run 按钮；右侧是目标网页的实时画面，每跑一次，右边的页面就跟着动一次，找不到元素时它也会直接把原因标出来。

从本地终端接管同一个浏览器

什么时候用：脚本要反复跑，但你希望它跑着的时候你还能插一手。比如登录弹窗弹出来脚本处理不了，你手动点掉，它接着往下走。

界面长什么样：扩展面板切到 Bridge Mode，状态栏显示"Listening for connection"，图标上亮一个黄点表示在等连接。你在本地终端跑一个引用了AgentOverChromeBridge的脚本，它能直接接管你已经打开的 Chrome——cookies 和登录状态原样复用，脚本不用重新登录一遍。

同一句话控制 Android / iOS

手机接上电脑后，在 Android Playground 的面板里输入"打开设置，查看当前的安卓版本号"，左边把指令拆成 Planning、定位元素、点击一步步打勾，右边同步显示手机屏幕。指令语言和 Web 端完全一样，不用换一套说法。

两条可以直接抄的工作流

1. 电商价格巡查

   • 目标：定时盯商品价格，低于阈值就提醒你
   • 要配什么：一句"打开商品页，抓取当前价格"的自然语言指令 + 商品页地址
   • 跑起来后：浏览器自己打开页面、读出价格，返回结构化结果，每天重跑一次就行

2. 表单批量填写

   • 目标：同一张表重复填几十条
   • 要配什么：描述各字段填什么的指令 + 每条数据
   • 跑起来后：浏览器逐个输入框定位、填入、提交，你只管递下一条数据

📌 翻车了先查这三处

• 扩展加载不出来：先查dist目录是不是构建后的完整内容、选没选对目录；再不行重启浏览器重新加载。
• 指令跑了却没反应或点错位置：先看网络稳不稳、目标页面是否完全加载完；再把指令写具体些，别只说"搜索一下"，说"在顶部搜索框输入 Midscene"。
• 手机连不上：确认 USB 调试已开启、驱动装好了；拔掉数据线重插一次。

📎 资料都在这

• 官方文档：快速开始指南 —— 从配模型到跑通第一条指令，照着走一遍就行
• 示例脚本：packages/cli/tests/midscene_scripts/ —— 一批经过实际跑通的 YAML 脚本，抄一个改改就能用
• 核心源码：packages/core/src/ —— 理解画面、执行指令的引擎所在，看懂面板之后可以翻

周二下午四点，那 40 页价格让扩展抓完了，你剩下的活儿只剩把结果贴进表格。省下来的时间拿去干正事——比如看看价格这波波动到底正常不正常。下次再碰到重复的网页活儿，先试着把它写成一句话。

【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene