浏览器工具：Chrome 插件

CodeFlicker 提供了和浏览器连接的能力，AI 可以通过连接获取到浏览器页面上的内容，比如页面元素、控制台信息；同时也可以通过连接对浏览器的指定页面进行操作，比如点击、滚动、输入等行为。

默认的打开方式是在 IDE 内打开 web 页面，或者使用 Chrome 的沙盒模式来获取比较大的浏览器控制权限，这两种方式很便捷但也有一些局限性。但对于一些项目部署在本地环境的页面，可能对浏览器有一些依赖，比如 cookie。为了兼容这些项目，我们提供了一个 Chrome 插件，通过 Chrome 插件就可以实现对 Chrome 浏览器的控制。以下是对 Chrome 插件的安装、配置和使用介绍。

插件安装

方式一：插件市场

https://chromewebstore.google.com/detail/codeflicker-chrome-extens/chkihcfmnokicddjbagimapohpgbdlhj

如何使用？

方式一：使用浏览器插件进行网页探索

• 修改默认打开浏览器的配置，默认是 in IDE 可以切换成插件。
• 在输入框内输入 # 唤出上下文选项，选择"浏览器"。此时根据 query 的具体意图，Agent 会调用浏览器工具操作（例如查看、浏览、点击、输入等行为）。

方式二：使用浏览器插件进行项目预览

通过点击输入框下方的浏览器图标，启用预览项目能力。唤出打开方式，此时可以选择用插件打开。

使用案例

使用浏览器的典型场景

1. 启动项目

通过浏览器工具启动和预览项目。

2. 通过视觉反馈"修复/优化" UI 层功能

• 选择页面元素，进行对话
• 点击上下文可以定位到代码

3. 自主验证和修复

AI 可以自主验证修改效果并进行修复。

4. 用浏览器查看方案，生成代码

通过浏览器查看现有方案，辅助生成代码。

5. 用浏览器做方案研究

相比于 web search 通用性更强，很多网站是动态的，以及需要用户信息。