企业官网建设流程全解析

Qwen-Agent 实战：BrowserQwen 浏览器扩展——网页/PDF 问答、长文创作与代码解释器一体化指南

【免费下载链接】Qwen-AgentAgent framework and applications built upon Qwen>=3.0, featuring Function Calling, MCP, Code Interpreter, RAG, Chrome extension, etc.项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-Agent

BrowserQwen 是构建在 Qwen-Agent 之上的一套较复杂的 Chrome 浏览器扩展应用：它把浏览器与 LLM Agent 连接在一起，让你能够与 Qwen 讨论当前网页或 PDF 文档，记录浏览历史并据此完成长文创作，还能调用代码解释器做数学求解、数据分析与可视化。阅读本文后，你将掌握 BrowserQwen 的整体架构与源码实现、本地数据库服务的部署命令与参数、Chrome 插件的安装步骤，以及从"把网页加入阅读列表"到"与 Qwen 对话"的完整操作流程。

BrowserQwen 是什么

BrowserQwen 是一个 Chrome 浏览器扩展（Manifest V3），由 Qwen-Agent 项目中的 browser_qwen 目录承载全部前端扩展代码，而它的"大脑"——模型服务、检索与代码执行能力——则由仓库根目录的 run_server.py 启动的一组本地服务提供。它主要有以下三大能力：

• 网页 / PDF 问答：与 Qwen 讨论当前网页或 PDF 文档的内容；
• 浏览历史管理与文字自动化：记录浏览过的网页和 PDF/Word/PPT 材料，帮助理解多个页面内容、总结浏览历史、自动化繁琐的文字工作；
• 插件集成：内置代码解释器（Code Interpreter），可用于数学问题求解、数据分析与可视化、文件处理等。

简单来说，BrowserQwen 把"浏览行为"变成了 Agent 的上下文：你看到什么，Qwen 就能知道什么，并围绕这些素材展开问答、总结与创作。

工作原理：浏览器扩展与本地服务如何协作

理解 BrowserQwen 最快的方式是沿着它的消息链路读一遍源码。整个系统由两部分组成：Chrome 扩展（前端）和本地服务端（后端），二者通过 HTTP 与 Chrome 消息机制通信。

扩展骨架：manifest.json

browser_qwen/manifest.json 声明了扩展的基础信息：

• manifest_version: 3，使用 Service Worker 作为后台脚本（background.js）；
• 弹窗入口为src/popup.html，默认图标为img/popup.png；
• 权限包括tabs（读取标签页）、notifications、storage（本地存储）、scripting、activeTab；
• host_permissions覆盖http://*/*与https://*/*，允许扩展在所有普通网页上工作；
• content_scripts将 src/content.js 注入匹配的页面（https://*/*、http://*/*以及file:///*/*，即本地文件也可注入）。

内容脚本：注入 "Add to Qwen's Reading List" 按钮

content.js 是用户与扩展交互的第一触点。它会在每个网页右下角注入一个可拖拽的按钮 "Add to Qwen's Reading List"（样式为紫色圆角按钮），并监听鼠标拖拽与单击事件。用户点击按钮后弹出确认框，确认后调用cache_browser()：

function cache_browser(){ const body = document.querySelector('html'); const text = body.innerHTML; chrome.runtime.sendMessage({ data: text, close: true, flag: 'open_tab_and_cache_from_content', type: 'html'}); }

这里会把整页的html.innerHTML连同标记type: 'html'通过消息发给后台脚本，即"让 Qwen 记住这一页"。

后台脚本：消息中转与数据上报

background.js 作为 Service Worker，负责接收内容脚本与弹窗的消息，并把数据 POST 到本地数据库服务的/endpoint接口：

chrome.storage.local.get(['database_host'], function(result) { if (result.database_host) { database = "http://"+result.database_host+":7866/endpoint"; } else { database = "http://127.0.0.1:7866/endpoint"; } fetch(database, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(msg) }) .then((response) => response.json()) .then((data) => { console.log(data.result); }); });

从中可以看出两个关键设计：

• 扩展默认向127.0.0.1:7866/endpoint上报数据，database_host可在扩展弹窗中自定义，用于连接远程部署的服务端；
• 消息通过task字段区分用途：task: 'cache'表示缓存网页内容（含content、url、type），task: 'pop_url'表示上报当前打开的页面 URL。

弹窗：内嵌助手界面

popup.html 与 popup.js 实现扩展弹窗。弹窗打开时会先读取当前活动标签页 URL 并上报，随后在弹窗中通过iframe加载助手界面：

chrome.storage.local.get(['database_host'], function(result) { popup_url = result.database_host ? "http://"+result.database_host+":7863/" : "http://127.0.0.1:7863/"; var iframe = document.createElement('iframe'); iframe.src = popup_url; iframe_area.appendChild(iframe); });

也就是说，扩展弹窗本身只是一个"壳"，真正可对话的界面由本地服务在7863 端口提供；弹窗底部还提供了一个 "Customize Address" 输入框，可修改database_host以连接部署在其他机器的服务端。

本地服务端：三进程协同

仓库根目录的 run_server.py 是服务端的统一入口，它会按顺序拉起三个子进程（见main()中的servers字典）：

端口与存储路径的默认值均定义在 qwen_server/server_config.json 中，例如fast_api_port: 7866、app_in_browser_port: 7863、workstation_port: 7864、max_days: 7（浏览历史保留天数），以及工作区、下载目录、代码解释器工作目录等路径配置。对应的配置结构由 qwen_server/schema.py 中的PathConfig与ServerConfig两个 Pydantic 模型定义，run_server.py在启动前会把命令行参数写入这份配置。

功能演示

工作台 · 创作模式

根据浏览过的网页、PDF 素材进行长文创作：你可以在创作模式中选择浏览历史的时间范围（Start Date / End Date），让 Qwen 基于这些素材生成结构化长文。例如输入 "title World population history"，Qwen 会结合你浏览过的 World population、World Population by Year 等页面，输出包含引言、逐年分析、净变化与密度、资料与方法、结论等章节的完整文章。

创作模式还支持调用插件辅助富文本创作：在创作过程中调用代码解释器等插件，对素材做计算、图表或数据整理，再把结果融入 Markdown/HTML 富文本输出，适合撰写包含数据论证的长篇内容。

工作台 · 对话模式

多网页问答：勾选多个已浏览页面作为上下文，Qwen 会综合多个网页的信息回答你的问题，无需手动复制粘贴内容。

使用代码解释器绘制数据图表：在对话模式中，Qwen 会自动规划执行步骤（Thought / Action / Action Input / Observation），调用code_interpreter工具运行 Python 代码。例如向它提问 "2021 年亚洲人口占比 46.6%，创建饼图"，它会自动导入matplotlib、定义人口分布数据、绘制饼图并展示生成结果，实现"一句话出图"的数据分析体验。

浏览器助手

网页问答：点击扩展图标打开弹窗，即可与 Qwen 交流当前网页内容。

PDF 文档问答：浏览本地 PDF 或网页内嵌的 PDF（如 arXiv 论文）时，可直接就文档内容提问。例如打开 Transformer 论文（1706.03762），提问 "what is the conclusion of this paper?"，Qwen 会结合论文正文总结其核心结论（基于注意力机制、不依赖循环或卷积、并行性更强且训练时间更短等）。

部署第一步：启动本地数据库服务

BrowserQwen 依赖一台在你本地机器（即你可以打开 Chrome 的那台机器）上运行的服务，用于维护个人浏览历史与对话历史。启动入口是仓库根目录的run_server.py。

方案 A：使用 DashScope 模型服务

如果你使用 DashScope 提供的模型服务，执行以下命令：

# 启动数据库服务，通过 --llm 参数指定您希望通过 DashScope 使用的具体模型 # 参数 --llm 可以是如下之一，按资源消耗从小到大排序： # - qwen1.5-7b/14b/72b-chat （与开源的 Qwen1.5-7B/14B/72B-Chat 相同模型） # - qwen-turbo, qwen-plus, qwen-max （推荐使用 qwen-max） # 您需要将 YOUR_DASHSCOPE_API_KEY 替换为您的真实 API-KEY。 python run_server.py --llm qwen-max --model_server dashscope --workstation_port 7864 --api_key YOUR_DASHSCOPE_API_KEY

方案 B：使用自部署模型服务

如果你没有使用 DashScope，而是部署了自己的模型服务（例如通过 vLLM 部署的 Qwen1.5-72B-Chat），请将--model_server指定为兼容 OpenAI 协议的 API 地址：

# 指定模型服务，并启动数据库服务。 # 示例: 假设 Qwen1.5-72B-Chat 已经通过 vLLM 部署于 http://localhost:8000/v1，则可用以下参数指定模型服务： # --llm Qwen1.5-72B-Chat --model_server http://localhost:8000/v1 --api_key EMPTY python run_server.py --llm {MODEL} --model_server {API_BASE} --workstation_port 7864 --api_key {API_KEY}

完整参数说明

run_server.py通过argparse解析参数（见 run_server.py），除文档示例中的--llm、--model_server、--workstation_port、--api_key外，还支持以下参数：

启动成功后，服务会同时监听三个端口（默认 7863 / 7864 / 7866）。此时访问 http://127.0.0.1:7864/ 即可使用工作台（Workstation）的创作模式（Editor）与对话模式（Chat）。

部署第二步：安装浏览器助手

安装 BrowserQwen 的 Chrome 插件（又称 Chrome 扩展程序）：

1. 打开 Chrome 浏览器，在地址栏输入chrome://extensions/并按下回车；
2. 确保右上角的开发者模式处于打开状态，点击加载已解压的扩展程序，上传本项目下的 browser_qwen 目录并启用；
3. 单击浏览器右上角的扩展程序图标，将 BrowserQwen 固定在工具栏。

注意：安装 Chrome 插件后，需要刷新页面，插件才会在已打开页面上生效。

使用流程：把网页加入阅读列表并对话

当你希望 Qwen 阅读当前网页的内容时，按以下两步操作：

1. 加入阅读列表：先点击页面上注入的Add to Qwen's Reading List按钮，授权 Qwen 在后台分析本页面（源码中该操作会把页面 HTML 缓存到本地数据库，见上文cache_browser()的调用链）；
2. 开始对话：再单击浏览器右上角扩展程序栏的 Qwen 图标，在弹出的助手中与 Qwen 交流当前页面的内容。

如果弹窗连接的是非本机服务，可在弹窗底部的 "Customize Address" 输入框中填写数据库服务的地址（database_host），扩展会将其保存在chrome.storage.local中并用于后续所有数据上报与 iframe 加载，这与 background.js 和 popup.js 中的database_host读取逻辑一致。

小结

BrowserQwen 的完整闭环可以概括为：浏览 → 缓存（content.js→background.js→ 7866 数据库服务）→ 检索与理解（RAG + LLM）→ 问答/创作/执行（工作台 7864、助手 7863）。配合 run_server.py 对dashscope与 OpenAI 兼容服务的双重支持，你既可以用云端qwen-max开箱即用，也可以把整套能力接回自部署的 vLLM 模型服务。对于想深入学习的读者，建议继续阅读扩展源码 browser_qwen、服务端配置 qwen_server/server_config.json 以及工作台实现 qwen_server/workstation_server.py，即可在此基础上二次开发属于自己的浏览器 Agent。

【免费下载链接】Qwen-AgentAgent framework and applications built upon Qwen>=3.0, featuring Function Calling, MCP, Code Interpreter, RAG, Chrome extension, etc.项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-Agent