AIInfoHelper

用对话驱动 AI 操作网页：填表、点击、输入、截屏；支持跨页查询与控制其它标签页完成多页任务

# InfoHelper - 插件说明 ## 简介 **InfoHelper** 是一款 Chrome 扩展，通过自然语言与 AI 对话，让 AI 代替你在当前网页上操作：填表、点击、输入、搜索等。默认使用**阿里云 DashScope**（百炼）接口与多模态模型 **qwen3.5-plus**，你只需配置阿里云 API Key 即可使用；支持截图/粘贴图片给 AI 识图、抓取 URL 内容参考、在当前页 iframe 预览链接等。 --- ## 主要功能 - **对话驱动操作**：在右侧边栏用自然语言发指令（如「在搜索框输入天气并回车」「点击登录按钮」），AI 自动调用 37 种工具执行。 - **流式输出**：AI 回复边生成边显示；深度思考（可选）过程实时展开，完成后自动折叠；工具调用过程显示工具名和状态，完成后折叠。 - **右侧对话边栏**：页面右上角「AI」按钮展开/收起边栏；支持多轮对话、新会话、历史会话（可按页面或按同一域名保持连续）；AI 回复支持 **Markdown**（含表格、列表、代码块）。**AI 活动状态指示**：请求进行中时边栏标题旁 **AI 图标**与页面「AI」按钮会**闪烁**，便于判断是否需继续等待；同时**发送按钮禁用**、**中断按钮**显示并可点击；跳转到新页面后若请求仍在进行，打开边栏仍会显示活动中状态（图标闪烁、发送禁用、中断可用）。 - **多模态识图**：可「发送时附带截图」或「+ 添加截图」、**粘贴图片**（Ctrl+V）发给 AI；缩略图带删除按钮和放大预览；图片会附带来源（截屏/外来）与尺寸信息。图片会上传到 DashScope 以 URL 引用，不占请求体大小。 - **页面操作能力**（37 种工具）： - **查看**：DOM 结构、可见文本、文本坐标、元素详情、页面信息（URL/尺寸/滚动位置） - **截图**：全屏截图、区域截图（指定坐标和大小） - **交互**：鼠标移动/点击、元素点击、键盘输入/按键、下拉框选择、滚动页面（上下/到顶底/到元素） - **等待**：等待元素出现（异步加载/弹窗） - **导航**：打开 URL、前进、后退 - **修改**：替换文本、设置文本/属性/样式/值、添加/移除 class、显示/隐藏元素、闪烁元素 - **翻译**：整页翻译（并发流式，逐条替换显示） - **资源**：获取页面媒体 URL、下载资源、抓取 URL 内容 - **预览**：iframe 浮窗加载链接、关闭预览 - **脚本**：在页面内执行 JavaScript - **智能失败处理**：工具调用最多 15 轮，连续失败会截屏检查、换策略，不会无限循环。 - **跳转后继续（通用）**：在**任意页面**，只要 AI 执行了可能引起同页跳转的操作（如点击链接、打开 URL、前进/后退），或**用户边栏开着时自己点链接/前进后退**，跳转后都会自动重新打开边栏；拉取该任务对话后自动发送「页面已跳转到…请继续执行」或「当前页面已加载…请根据当前页面继续执行」，会话在刷新/新页下仍可继续。任务消息仅由后台以完整格式（含工具调用与结果）保存，保证「继续」时 AI 能拿到完整上下文。 - **任务级存储与多标签隔离**：每个「任务」在创建时分配唯一任务 ID，对话与操作按任务保存在扩展本地（**仅后台写入**，避免展示格式覆盖导致跨页上下文丢失）；同一标签页内跳转沿用同一任务，不同标签页各自独立任务，避免多页同时操作时上下文混淆。 - **URL 抓取与预览**：`fetch_url_content` 拉取图片/网页供参考；`show_page_in_iframe` 在当前页弹出可拖动 iframe 预览。 - **可选挤占布局**：边栏可设置为「挤占页面宽度」；可选「强制在本窗口打开新页面」。 --- ## 安装与配置 1. **安装** - Chrome 打开 `chrome://extensions/`，开启「开发者模式」，点击「加载已解压的扩展程序」，选择 **AIInfoHelper** 目录。 2. **配置 API（必做）** - 默认使用**阿里云 DashScope**。右键扩展图标 → **选项**，填写： - **API Key**：在[阿里云百炼控制台](https://bailian.console.aliyun.com/)获取。 - **API 基础 URL**：默认 `https://dashscope.aliyuncs.com/compatible-mode/v1`，一般无需修改。 - **模型名称**：默认 **qwen3.5-plus**（多模态，支持识图），可按需改为 qwen3-max、qwen-turbo 等。 - 保存后即可在边栏与 AI 对话并操作页面。 3. **打开边栏** - 打开任意网页，点击页面右上角 **「AI」** 或工具栏中的扩展图标 →「在当前页打开对话边栏」。 --- ## 使用示例 - "在搜索框输入「北京天气」并回车。" - "点击页面上的登录按钮。" - "把用户名填成 admin，密码填成 123456，然后点登录。" - "让「提交」按钮闪烁一下。"（用于定位元素） - "把页面上所有「游戏」替换成「阅读」。" - "把当前页截个图 / 用这个截图里的表格总结一下。"（多模态识图） - "把这个链接里的内容抓给我看看。"（fetch_url_content） - "在页面里用浮窗打开这个链接。"（show_page_in_iframe） - "往下翻一页 / 滚到页面底部。"（scroll_page） - "返回上一页。"（go_back） - "等弹窗出来后帮我填写。"（wait_for_element + keyboard_type） - "把下拉框选成第二个选项。"（select_option） - "这个页面有多长？当前滚动到哪了？"（get_page_info） --- ## 选项说明（摘要） | 选项 | 说明 | |------|------| | 自动打开对话边栏 | 新开页/刷新后自动显示「AI」按钮。 | | 边栏挤占页面宽度 | 开启后页面内容右移，边栏不遮挡；关闭则边栏浮在页面上方。 | | 同一域名下保持会话连续 | 开启后同一网站内多页面（如淘宝商品页、搜索页）共用同一套对话与历史。 | | 强制在本窗口打开新页面 | 开启后页面中 window.open 弹窗改为在本窗口新标签打开，不新开浏览器窗口。 | | 工具执行间隔（毫秒） | 每次工具调用之间的等待时间，可避免聚焦与输入等操作过于紧凑导致失败；0 表示不等待，默认 500。 | | 启用深度思考 | 开启后 AI 会先深度推理再回复，思考过程可折叠查看；默认关闭（更快）。 | | 可信输入 | 对微信网页版等会拦截模拟操作的站点，可开启以使用调试协议发送输入。 | | Trusted Types 解除 | 可对指定网站或全部网站移除 CSP 头，以便部分脚本类能力在严格站点可用。 | | 图片压缩 / 单张最大边长·体积 | 图片上传到 DashScope 以 URL 引用，默认 768px、60KB。 | --- ## 注意事项 - 仅对**当前激活的标签页**进行操作，不跨标签页。 - 敏感信息（如密码）建议勿交由 AI 代为输入；API Key 仅存于本机，不会发给 AI 服务端。 - 部分页面（如 chrome://、扩展商店）无法注入，请在实际网页使用。 - 默认使用阿里云接口，需自行在阿里云开通并配置 API Key。 - **fetch_url_content** 与 **show_page_in_iframe** 仅支持 http/https URL；iframe 预览受目标站 X-Frame-Options 等限制，部分站点可能无法嵌入。 - 工具调用最多 15 轮；连续失败时 AI 会截屏检查并换策略，不会无限循环。 - 翻译功能采用并发流式处理，按字符数智能分批（~12K 字符/批），4 路并发，逐条替换显示。 --- ## 版本与许可 - 当前版本见扩展内或 `manifest.json` 中的 `version`（如 1.0.5）。 - 作者：技术宅（[email protected]）。 ## 相关文档 - **设计.md**：设计目标、架构、功能整合与存储设计。 - **docs/设计文档.md**：架构与模块、数据流、活动中状态与 requestInProgress、权限与安全。 - **docs/功能文档.md**：面向用户与测试的功能说明。