Midscene.js：让AI成为你的浏览器自动化助手

想要让AI帮你自动完成浏览器操作吗？Midscene.js是一款开源的浏览器自动化工具，它通过自然语言交互让任何人都能轻松实现网页操作自动化。无需编程基础，只需用日常语言告诉AI你想做什么，它就能帮你完成点击、输入、数据提取等复杂操作，让浏览器自动化变得像聊天一样简单。

为什么选择Midscene.js？三大核心价值解析

Midscene.js解决了传统浏览器自动化工具的三大痛点：

• 零代码门槛：用自然语言代替复杂代码，普通人也能快速上手
• 多场景适用：无论是日常浏览、数据采集还是功能测试，都能轻松应对
• 无缝集成能力：支持与Playwright、Puppeteer等工具结合，满足高级需求

核心功能探秘：四大模块让自动化更简单

直观的操作界面：所见即所得的控制中心

Midscene.js的扩展界面设计简洁直观，主要分为三个功能区域：

• 左侧UI Context：实时显示当前网页截图，让AI准确理解页面结构
• 中间指令输入区：用自然语言输入操作指令，如"点击搜索框并输入'人工智能'"
• 右侧控制面板：包含三大核心功能标签页：
  • Action：执行点击、输入、滚动等操作
  • Query：查询页面元素信息和状态
  • Assert：验证页面内容是否符合预期

强大的Bridge模式：本地终端直接控制浏览器

Bridge模式是Midscene.js的特色功能，它打破了浏览器沙箱限制，让你可以通过本地终端直接控制浏览器。

这一模式的核心优势在于：

• 会话复用：保持登录状态进行多步骤操作
• 脚本与手动结合：自动化脚本和手动操作可以无缝切换
• 跨工具协作：与本地开发环境完美集成

安全的Playground测试环境： risk-free调试空间

Playground提供了一个隔离的测试环境，让你可以安全地调试自动化指令，而不会影响真实网页数据。

测试环境特点：

• 实时预览：立即查看指令执行效果
• 错误提示：清晰显示操作失败原因
• 历史记录：保存过往操作，便于对比优化

详细的报告生成：自动化流程全记录

每次执行自动化操作后，系统会自动生成详细报告，包括操作时间轴、页面截图对比和结果验证信息，帮助你分析和优化自动化流程。

3步完成Midscene.js安装配置

准备工作

在开始安装前，请确保你的环境满足以下条件：

• Chrome浏览器（版本90+）
• Node.js（版本14+）
• Git

方法一：开发者模式安装（推荐开发者）

1. 克隆项目仓库：

git clone https://gitcode.com/GitHub_Trending/mid/midscene

2. 构建扩展文件：

cd midscene/apps/chrome-extension
pnpm install
pnpm run build

3. 安装扩展：
   • 打开Chrome浏览器，输入chrome://extensions/
   • 开启右上角"开发者模式"
   • 点击"加载已解压的扩展程序"
   • 选择项目中的apps/chrome-extension/dist目录

方法二：打包文件安装（适合普通用户）

1. 从项目发布页面下载最新的扩展打包文件
2. 打开Chrome扩展页面（chrome://extensions/）
3. 将下载的CRX文件拖放到扩展页面即可完成安装

场景化应用示例：Midscene.js实战案例

案例一：自动搜索并收集信息

目标：搜索"2024年人工智能发展报告"并保存前5条结果

操作步骤：

1. 在扩展指令框输入："在当前页面的搜索框中输入'2024年人工智能发展报告'，然后点击搜索按钮"
2. 切换到Query标签，输入："提取搜索结果中前5条的标题和链接"
3. 点击"Run"按钮执行指令
4. 在生成的报告中查看并导出结果

案例二：电商网站自动比价

目标：在电商网站上搜索"无线耳机"并比较前3款产品的价格

操作步骤：

1. 访问目标电商网站
2. 在Action标签输入："点击搜索框，输入'无线耳机'，按回车键搜索"
3. 切换到Assert标签，输入："验证搜索结果数量大于3"
4. 再切换到Query标签，输入："提取前3个商品的名称和价格"
5. 执行后查看报告中的价格对比信息

5个提升效率的实用技巧

1. 指令精准化

技巧：使用具体元素描述代替模糊指令。例如：

• 不推荐："点击那个按钮"
• 推荐："点击页面右上角的蓝色'登录'按钮"

2. 分步执行复杂操作

技巧：将复杂任务拆分为多个简单指令。例如，登录操作可以拆分为：

1. "点击页面右上角的'登录'链接"
2. "在用户名输入框中输入'我的账号'"
3. "在密码输入框中输入'我的密码'"
4. "点击'登录'按钮"

3. 利用Bridge模式实现会话保持

技巧：通过Bridge模式连接本地终端，实现跨页面会话保持：

const agent = new AgentOverChromeBridge();
await agent.connectCurrentTab();
// 执行登录操作...
// 后续操作将保持登录状态

4. 使用Playground测试复杂流程

技巧：在Playground中先测试完整流程，再应用到实际网站。Playground提供了模拟环境，可避免误操作影响真实数据。

5. 善用报告分析优化指令

技巧：每次执行后查看报告，根据失败原因优化指令。报告中会显示操作失败的具体位置和可能原因，帮助你调整指令表述。

常见问题与解决方案

问题一：扩展安装后无法启动

可能原因：

• 浏览器版本过低
• 扩展构建不完整
• 浏览器安全设置阻止

解决方案：

1. 确认Chrome版本在90以上
2. 重新执行构建命令：pnpm run build
3. 在扩展页面开启"允许访问文件URL"选项

问题二：Bridge模式连接失败

可能原因：

• 端口被占用
• 扩展未启用Bridge模式
• 本地服务未启动

解决方案：

1. 检查是否有其他程序占用8080端口
2. 在扩展设置中确认Bridge模式已启用
3. 重启本地服务：pnpm run start:bridge

问题三：AI无法正确识别页面元素

可能原因：

• 页面结构复杂
• 元素描述不够具体
• AI模型理解偏差

解决方案：

1. 提供更详细的元素描述，包括位置、颜色、文本等特征
2. 使用UI Context中的截图辅助定位
3. 尝试不同的描述方式，避免歧义

总结：开启你的浏览器自动化之旅

Midscene.js通过自然语言交互，让浏览器自动化变得简单易用。无论你是需要提高工作效率的普通用户，还是寻求快速开发测试工具的开发者，都能从中受益。从安装配置到高级应用，Midscene.js提供了完整的解决方案，让AI真正成为你的浏览器操作助手。

现在就克隆项目，开始体验浏览器自动化的便捷吧！