尧图网站建设 
Qwen-Agent 实战BrowserQwen 浏览器扩展——网页/PDF 问答、长文创作与代码解释器一体化指南【免费下载链接】Qwen-AgentAgent framework and applications built upon Qwen3.0, featuring Function Calling, MCP, Code Interpreter, RAG, Chrome extension, etc.项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-AgentBrowserQwen 是构建在 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.jsonbrowser_qwen/manifest.json 声明了扩展的基础信息manifest_version: 3使用 Service Worker 作为后台脚本background.js弹窗入口为src/popup.html默认图标为img/popup.png权限包括tabs读取标签页、notifications、storage本地存储、scripting、activeTabhost_permissions覆盖http://*/*与https://*/*允许扩展在所有普通网页上工作content_scripts将 src/content.js 注入匹配的页面https://*/*、http://*/*以及file:///*/*即本地文件也可注入。内容脚本注入 Add to Qwens Reading List 按钮content.js 是用户与扩展交互的第一触点。它会在每个网页右下角注入一个可拖拽的按钮 Add to Qwens 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、typetask: 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字典子进程脚本默认端口用途databaseqwen_server/database_server.py7866维护个人浏览历史、对话历史的数据库服务同时对外提供/endpoint接口接收扩展上报的数据workstationqwen_server/workstation_server.py7864工作台Workstation提供创作模式Editor与对话模式Chatassistantqwen_server/assistant_server.py7863浏览器内助手界面被扩展弹窗通过 iframe 内嵌端口与存储路径的默认值均定义在 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 historyQwen 会结合你浏览过的 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外还支持以下参数参数默认值说明-m, --model_serverdashscope使用 DashScope 模型服务时设为dashscope使用 vLLM、Ollama 等 OpenAI API 兼容服务时设为对应的 base_urlapi_base-k, --api_key空字符串DashScope 或兼容服务的 API Key-l, --llmqwen-plusDashScope 时取qwen-max、qwen-plus、qwen-turbo之一文档推荐qwen-max自部署服务时填模型名-s, --server_host127.0.0.1可选127.0.0.1或0.0.0.0设为0.0.0.0可允许其他机器访问本服务用于远程连接扩展弹窗-t, --max_ref_token4000检索增强生成RAG为参考资料预留的 token 数-w, --workstation_port7864创作型工作台的端口启动成功后服务会同时监听三个端口默认 7863 / 7864 / 7866。此时访问 http://127.0.0.1:7864/ 即可使用工作台Workstation的创作模式Editor与对话模式Chat。部署第二步安装浏览器助手安装 BrowserQwen 的 Chrome 插件又称 Chrome 扩展程序打开 Chrome 浏览器在地址栏输入chrome://extensions/并按下回车确保右上角的开发者模式处于打开状态点击加载已解压的扩展程序上传本项目下的 browser_qwen 目录并启用单击浏览器右上角的扩展程序图标将 BrowserQwen 固定在工具栏。注意安装 Chrome 插件后需要刷新页面插件才会在已打开页面上生效。使用流程把网页加入阅读列表并对话当你希望 Qwen 阅读当前网页的内容时按以下两步操作加入阅读列表先点击页面上注入的Add to Qwens Reading List按钮授权 Qwen 在后台分析本页面源码中该操作会把页面 HTML 缓存到本地数据库见上文cache_browser()的调用链开始对话再单击浏览器右上角扩展程序栏的 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 Qwen3.0, featuring Function Calling, MCP, Code Interpreter, RAG, Chrome extension, etc.项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Qwen-Agent 实战：BrowserQwen 浏览器扩展——网页/PDF 问答、长文创作与代码解释器一体化指南
Qwen-Agent 实战BrowserQwen 浏览器扩展——网页/PDF 问答、长文创作与代码解释器一体化指南【免费下载链接】Qwen-AgentAgent framework and applications built upon Qwen3.0, featuring Function Calling, MCP, Code Interpreter, RAG, Chrome extension, etc.项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-AgentBrowserQwen 是构建在 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.jsonbrowser_qwen/manifest.json 声明了扩展的基础信息manifest_version: 3使用 Service Worker 作为后台脚本background.js弹窗入口为src/popup.html默认图标为img/popup.png权限包括tabs读取标签页、notifications、storage本地存储、scripting、activeTabhost_permissions覆盖http://*/*与https://*/*允许扩展在所有普通网页上工作content_scripts将 src/content.js 注入匹配的页面https://*/*、http://*/*以及file:///*/*即本地文件也可注入。内容脚本注入 Add to Qwens Reading List 按钮content.js 是用户与扩展交互的第一触点。它会在每个网页右下角注入一个可拖拽的按钮 Add to Qwens 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、typetask: 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字典子进程脚本默认端口用途databaseqwen_server/database_server.py7866维护个人浏览历史、对话历史的数据库服务同时对外提供/endpoint接口接收扩展上报的数据workstationqwen_server/workstation_server.py7864工作台Workstation提供创作模式Editor与对话模式Chatassistantqwen_server/assistant_server.py7863浏览器内助手界面被扩展弹窗通过 iframe 内嵌端口与存储路径的默认值均定义在 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 historyQwen 会结合你浏览过的 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外还支持以下参数参数默认值说明-m, --model_serverdashscope使用 DashScope 模型服务时设为dashscope使用 vLLM、Ollama 等 OpenAI API 兼容服务时设为对应的 base_urlapi_base-k, --api_key空字符串DashScope 或兼容服务的 API Key-l, --llmqwen-plusDashScope 时取qwen-max、qwen-plus、qwen-turbo之一文档推荐qwen-max自部署服务时填模型名-s, --server_host127.0.0.1可选127.0.0.1或0.0.0.0设为0.0.0.0可允许其他机器访问本服务用于远程连接扩展弹窗-t, --max_ref_token4000检索增强生成RAG为参考资料预留的 token 数-w, --workstation_port7864创作型工作台的端口启动成功后服务会同时监听三个端口默认 7863 / 7864 / 7866。此时访问 http://127.0.0.1:7864/ 即可使用工作台Workstation的创作模式Editor与对话模式Chat。部署第二步安装浏览器助手安装 BrowserQwen 的 Chrome 插件又称 Chrome 扩展程序打开 Chrome 浏览器在地址栏输入chrome://extensions/并按下回车确保右上角的开发者模式处于打开状态点击加载已解压的扩展程序上传本项目下的 browser_qwen 目录并启用单击浏览器右上角的扩展程序图标将 BrowserQwen 固定在工具栏。注意安装 Chrome 插件后需要刷新页面插件才会在已打开页面上生效。使用流程把网页加入阅读列表并对话当你希望 Qwen 阅读当前网页的内容时按以下两步操作加入阅读列表先点击页面上注入的Add to Qwens Reading List按钮授权 Qwen 在后台分析本页面源码中该操作会把页面 HTML 缓存到本地数据库见上文cache_browser()的调用链开始对话再单击浏览器右上角扩展程序栏的 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 Qwen3.0, featuring Function Calling, MCP, Code Interpreter, RAG, Chrome extension, etc.项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-Agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考