BrowserQwen：基于Qwen-Agent的浏览器智能助手

【免费下载链接】Qwen-Agent Agent framework and applications built upon Qwen, featuring Code Interpreter and Chrome browser extension. 项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-Agent

BrowserQwen是基于Qwen-Agent开发的Chrome浏览器智能助手，采用现代化的扩展架构设计，结合前后端分离服务模式，为用户提供智能化的网页内容理解和交互体验。该系统具备三层架构设计，包含浏览器扩展层、内容处理层和AI服务层，支持智能内容提取、实时交互、多格式文档处理等功能，通过精巧的模块划分和通信机制实现了高效的AI辅助浏览体验。

BrowserQwen架构设计与功能特性

BrowserQwen作为基于Qwen-Agent的浏览器智能助手，采用了现代化的Chrome扩展架构设计，结合了前后端分离的服务模式，为用户提供智能化的网页内容理解和交互体验。其架构设计体现了模块化、可扩展性和高性能的特点。

系统架构设计

BrowserQwen采用三层架构设计，确保系统的稳定性和可维护性：

1. 浏览器扩展架构

BrowserQwen基于Chrome Extension Manifest V3构建，具备以下核心组件：

manifest.json配置核心参数：

{
    "name": "BrowserQwen",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": [
        "tabs", "notifications", "storage", "scripting", "activeTab"
    ],
    "host_permissions": [
        "http://*/*", "https://*/*"
    ]
}

内容脚本(Content Script)功能特性：

• 实时监控网页DOM变化，提取文本内容
• 提供浮动按钮UI，支持拖拽定位
• 实现页面内容缓存机制
• 与后台服务进行双向通信

后台服务(Background Service)核心功能：

• 消息路由和分发处理
• 与本地数据库服务的HTTP通信
• 标签页状态管理
• 数据持久化存储

功能特性详解

1. 智能内容提取与分析

BrowserQwen具备强大的网页内容理解能力：

// 内容提取核心函数
function getPageTextContent() {
    var textContent = document.body.textContent;
    return textContent;
}

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'
    });
}

内容处理流程：

1. DOM解析：通过querySelector获取完整HTML结构
2. 内容序列化：将DOM转换为文本格式
3. 元数据提取：获取URL、标题等关键信息
4. 数据封装：按照标准格式打包传输

2. 实时交互与消息通信

系统采用基于Promise的异步通信机制：

// 消息发送核心逻辑
function send_data(msg) {
    chrome.storage.local.get(['database_host'], function(result) {
        const database = result.database_host ? 
            `http://${result.database_host}:7866/endpoint` : 
            "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));
    });
}

消息类型处理表：

消息类型	处理标志	功能描述	数据格式
页面缓存	open_tab_and_cache_from_content	存储网页内容	{content: html, url: string}
URL推送	open_popup_and_send_url_from_popup	传递当前URL	{url: string, task: 'pop_url'}
地址设置	set_addr	配置数据库地址	{addr: string, task: 'set_addr'}

3. 用户界面交互设计

BrowserQwen提供直观的用户操作界面：

浮动按钮特性：

• 可拖拽定位，适应不同网页布局
• 实时状态反馈，提升用户体验
• 上下文感知，智能提示操作

// UI组件创建与事件处理
const button = document.createElement('button');
button.style.position = 'fixed';
button.style.top = '30px';
button.style.right = '30px';
button.textContent = "Add to Qwen's Reading List";
button.style.backgroundColor = '#695DE8';
button.style.color = 'white';

// 拖拽交互实现
button.addEventListener('mousedown', (e) => {
    isDragging = true;
    initialX = e.clientX;
    initialY = e.clientY;
});

4. 数据存储与管理系统

BrowserQwen采用分层存储策略：

存储层次结构：

• Level 1: Chrome扩展本地存储(Chrome Storage API)
• Level 2: 外部数据库服务(端口7866)
• Level 3: Qwen-Agent核心知识库

5. 安全与权限管理

系统遵循最小权限原则，确保用户数据安全：

权限配置表：

权限类型	作用范围	安全级别	功能说明
tabs	当前标签页	中等	获取当前页面URL和信息
activeTab	激活标签页	低	仅在用户交互时激活
storage	本地存储	低	配置和状态持久化
scripting	内容脚本	高	动态注入和执行脚本

技术架构优势

1. 模块化设计：各组件职责明确，便于维护和扩展
2. 异步通信：基于Promise的异步处理，避免界面阻塞
3. 跨域支持：通过host_permissions实现全网内容访问
4. 状态管理：完善的存储机制，保证会话持续性
5. 可扩展性：插件式架构，支持功能模块动态加载

BrowserQwen的架构设计充分考虑了浏览器环境的特殊性，通过精巧的模块划分和通信机制，实现了高效的网页内容理解和智能交互功能，为用户提供了无缝的AI辅助浏览体验。

网页内容分析与PDF文档处理

BrowserQwen作为基于Qwen-Agent的浏览器智能助手，其核心能力之一就是强大的网页内容分析与PDF文档处理功能。这一功能模块使得用户能够与AI助手就当前浏览的网页内容或PDF文档进行深度交互，实现智能问答、内容摘要和知识提取。

网页内容提取机制

BrowserQwen采用先进的网页内容解析技术，通过Chrome扩展程序实时捕获和分析用户当前浏览的网页内容。其工作流程如下：

网页内容提取的核心代码位于WebExtractor工具类中：

@register_tool('web_extractor')
class WebExtractor(BaseTool):
    description = '获取网页内容'
    parameters = {
        'type': 'object',
        'properties': {
            'url': {'description': '网页URL', 'type': 'string'}
        },
        'required': ['url'],
    }

    def call(self, params: Union[str, dict], **kwargs) -> str:
        params = self._verify_json_format_args(params)
        url = params['url']
        parsed_web = SimpleDocParser().call({'url': url})
        return parsed_web

PDF文档解析技术

BrowserQwen支持多种文档格式的解析，其中PDF文档处理尤为强大。系统使用pdfplumber和pdfminer库进行深度PDF解析：

def parse_pdf(pdf_path: str, extract_image: bool = False) -> List[dict]:
    from pdfminer.high_level import extract_pages
    from pdfminer.layout import LTImage, LTRect, LTTextContainer
    
    doc = []
    pdf = pdfplumber.open(pdf_path)
    for i, page_layout in enumerate(extract_pages(pdf_path)):
        page = {'page_num': page_layout.pageid, 'content': []}
        
        # 提取文本和表格内容
        for element in page_layout:
            if isinstance(element, LTRect):
                # 处理表格
                tables = extract_tables(pdf, i)
                for table in tables:
                    table_string = table_converter(table)
                    page['content'].append({'table': table_string})
            elif isinstance(element, LTTextContainer):
                # 处理文本内容
                text = element.get_text().strip()
                if text:
                    page['content'].append({'text': text})
        
        doc.append(page)
    return doc

多格式文档支持

BrowserQwen支持丰富的文档格式，每种格式都有专门的解析器：

文档格式	解析库	支持特性	输出结构
PDF	pdfplumber/pdfminer	文本、表格、页码	分页内容
Word	python-docx	段落、表格	结构化内容
Excel	pandas	多工作表、数据表	Markdown表格
PowerPoint	python-pptx	幻灯片、文本、表格	分幻灯片内容
HTML	BeautifulSoup	网页文本、标题	清理后内容
TXT/CSV	内置	纯文本、表格数据	原始格式

内容处理流水线

文档解析完成后，内容会经过一系列处理步骤：

处理过程中的关键清理函数：

def clean_paragraph(text):
    """清理文本段落中的噪声"""
    text = rm_cid(text)  # 移除CID引用
    text = rm_hexadecimal(text)  # 移除十六进制字符
    text = rm_continuous_placeholders(text)  # 移除连续占位符
    return text

def postprocess_page_content(page_content: list) -> list:
    """后处理页面内容，去除重复识别"""
    # 移除表格和文本的重复识别
    table_obj = [p['obj'] for p in page_content if 'table' in p]
    processed_content = []
    
    for item in page_content:
        if 'text' in item:
            # 检查是否为表格内容的重复文本
            is_duplicate = any(t_obj.bbox == item['obj'].bbox 
                              for t_obj in table_obj)
            if not is_duplicate:
                processed_content.append(item)
        else:
            processed_content.append(item)
    
    return processed_content

智能内容检索

解析后的内容存储到知识库中，支持多种检索方式：

class HybridSearch(BaseTool):
    """混合搜索：结合关键词和向量搜索"""
    
    def search(self, query: str, docs: List[Record], max_ref_token: int = 4096) -> list:
        # 关键词搜索
        keyword_results = self.keyword_search(query, docs)
        # 向量搜索
        vector_results = self.vector_search(query, docs)
        # 结果融合和排序
        combined = self.combine_results(keyword_results, vector_results)
        return self.get_topk(combined, docs, max_ref_token)

实际应用场景

网页内容分析与PDF文档处理功能在多个场景中发挥重要作用：

1. 学术研究：快速提取论文关键信息，进行文献综述
2. 商业分析：解析报表和数据文档，生成洞察报告
3. 学习辅助：提取教材重点内容，创建学习笔记
4. 内容创作：基于多源资料生成高质量文章
5. 知识管理：建立个人知识库，实现智能检索

性能优化策略

为确保处理效率，BrowserQwen采用了多项优化措施：

• 增量处理：只处理新添加或修改的内容
• 缓存机制：对已解析内容进行缓存，避免重复处理
• 并行处理：支持多个文档同时解析
• 内存管理：大型文档分块处理，避免内存溢出
• 错误恢复：解析失败时提供详细的错误信息和恢复建议

通过这套完整的内容分析与处理系统，BrowserQwen能够智能地理解和处理各种格式的文档内容，为用户提供准确、高效的智能问答服务。

工作站模式与编辑器模式详解

BrowserQwen作为基于Qwen-Agent的浏览器智能助手，其核心功能之一就是工作站模式（Workstation Mode），该模式又细分为编辑器模式（Editor Mode）和聊天模式（Chat Mode）。本文将深入解析工作站模式中的编辑器模式，探讨其技术实现、功能特性以及实际应用场景。

编辑器模式的技术架构

编辑器模式是BrowserQwen工作站的核心组件，专门为基于浏览网页和PDF文档的长文创作而设计。其技术架构基于Qwen-Agent框架，通过多个智能代理协同工作来实现复杂的文本生成任务。

核心功能组件

ArticleAgent：文章创作智能体

ArticleAgent是编辑器模式的核心组件，继承自Assistant类，专门处理文章创作任务。它能够根据参考材料创作主题文章或续写现有文章。

class ArticleAgent(Assistant):
    """文章创作智能体
    
    基于参考材料创作主题文章或续写文章
    """
    
    def _run(self, messages: List[Message], 
             lang: str = 'en', 
             full_article: bool = False, 
             **kwargs) -> Iterator[List[Message]]:
        
        # 使用内存代理进行数据管理
        *_, last = self.mem.run(messages=messages, **kwargs)
        _ref = last[-1][CONTENT]
        
        response = []
        if _ref:
            response.append(Message(ASSISTANT, 
                f'>\n> 搜索相关信息: \n{_ref}\n'))
            yield response
        
        # 根据创作类型选择不同的写作代理
        if full_article:
            writing_agent = WriteFromScratch(llm=self.llm)
        else:
            writing_agent = ContinueWriting(llm=self.llm)
            response.append(Message(ASSISTANT, '>\n> 正在创作文本: \n'))
            yield response
        
        # 执行文本生成
        for rsp in writing_agent.run(messages=messages, 
                                   lang=lang, 
                                   knowledge=_ref):
            if rsp:
                yield response + rsp

写作代理类型

编辑器模式支持两种主要的写作代理：

代理类型	功能描述	适用场景
WriteFromScratch	从零开始创作完整文章	全新主题创作
ContinueWriting	基于现有内容续写文章	文章扩展和补充

工作流程详解

编辑器模式的工作流程可以分为以下几个关键阶段：

1. 参考材料收集与处理

系统首先通过内存代理收集和管理用户浏览的网页和文档内容，构建参考材料库：

# 内存代理处理参考材料
*_, last = self.mem.run(messages=messages, **kwargs)
_ref = last[-1][CONTENT]

2. 创作类型判断

根据用户需求判断是创作完整文章还是续写现有内容：

if full_article:
    writing_agent = WriteFromScratch(llm=self.llm)
else:
    writing_agent = ContinueWriting(llm=self.llm)

3. 文本生成与迭代

采用流式生成方式，逐步输出创作内容：

for rsp in writing_agent.run(messages=messages, 
                           lang=lang, 
                           knowledge=_ref):
    if rsp:
        yield response + rsp

高级功能特性

多语言支持

编辑器模式支持中英文创作，通过lang参数控制输出语言：

def _run(self, messages: List[Message], 
         lang: str = 'en',  # 支持'en'或'zh'
         full_article: bool = False, 
         **kwargs):

插件集成能力

编辑器模式可以调用各种插件来辅助富文本创作，包括：

• 代码解释器插件：用于数据可视化和数学计算
• 文档解析插件：处理PDF、Word、PowerPoint等文档格式
• 搜索工具插件：实时获取最新信息

实时预览与编辑

实际应用场景

技术文档创作

基于多个技术博客和API文档，自动生成综合性的技术指南：

# 示例：生成Python数据分析指南
article_agent = ArticleAgent(llm=llm_config)
messages = [{
    'role': 'user', 
    'content': '基于我浏览的pandas和matplotlib文档，创作一份完整的数据分析教程'
}]
response = article_agent.run(messages=messages, 
                           full_article=True, 
                           lang='zh')

学术论文辅助

帮助研究人员整理文献资料并生成论文初稿：

# 示例：学术论文续写
messages = [{
    'role': 'user', 
    'content': '基于这些研究论文，继续完善我的机器学习综述文章'
}]
response = article_agent.run(messages=messages, 
                           full_article=False, 
                           lang='en')

商业报告生成

整合多个市场分析网页，生成综合商业报告：

# 示例：市场分析报告
messages = [{
    'role': 'user', 
    'content': '基于这些市场数据网页，生成2024年AI行业趋势报告'
}]
response = article_agent.run(messages=messages, 
                           full_article=True, 
                           lang='zh')

性能优化策略

编辑器模式采用了多种性能优化策略：

1. 增量式生成：采用流式输出，减少用户等待时间
2. 内存管理：智能缓存和重用参考材料
3. 并行处理：同时处理多个参考文档
4. 结果缓存：缓存生成结果以供后续使用

技术实现细节

消息处理机制

系统使用标准化的消息格式进行通信：

Message(ASSISTANT, f'>\n> 搜索相关信息: \n{_ref}\n')

错误处理与恢复

完善的异常处理机制确保系统稳定性：

try:
    response = writing_agent.run(messages=messages, 
                               lang=lang, 
                               knowledge=_ref)
except ModelServiceError as ex:
    # 处理模型服务错误
    history[-1][1] = str(ex)
except Exception as ex:
    # 处理其他异常
    raise ValueError(ex)

编辑器模式作为BrowserQwen工作站的核心功能，通过智能的文章创作能力和丰富的插件集成，为用户提供了强大的文本生成工具。无论是技术文档、学术论文还是商业报告，都能通过这一模式高效完成创作任务。

Chrome扩展安装与配置指南

BrowserQwen作为Qwen-Agent生态系统的浏览器智能助手，其Chrome扩展安装与配置过程设计得既直观又高效。本节将详细介绍从本地服务部署到浏览器扩展安装的完整流程，确保您能够快速上手并充分利用这一强大的AI助手工具。

本地数据库服务部署

BrowserQwen的核心功能依赖于本地运行的数据库服务，该服务负责管理您的浏览历史、对话记录以及文档分析任务。部署过程根据您使用的模型服务有所不同：

使用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密钥
python run_server.py --llm qwen-max --model_server dashscope --workstation_port 7864 --api_key YOUR_DASHSCOPE_API_KEY

使用自定义模型服务

如果您部署了自己的模型服务（如使用vLLM部署的Qwen1.5-72B-Chat），使用以下配置：

# 指定模型服务并启动数据库服务
# 示例：假设Qwen1.5-72B-Chat通过vLLM部署在http://localhost:8000/v1
python run_server.py --llm Qwen1.5-72B-Chat --model_server http://localhost:8000/v1 --workstation_port 7864 --api_key EMPTY

服务启动成功后，您可以通过访问 http://127.0.0.1:7864/ 使用工作站的编辑模式和聊天模式。

Chrome扩展安装步骤

BrowserQwen扩展的安装过程遵循标准的Chrome扩展安装流程：

1. 打开扩展管理页面：

   • 在Chrome浏览器地址栏中输入 chrome://extensions/ 并按Enter键

2. 启用开发者模式：

   • 确保右上角的"开发者模式"开关处于开启状态

3. 加载扩展程序：

   • 点击"加载已解压的扩展程序"按钮
   • 选择本项目中的 browser_qwen 目录进行上传
   • 启用刚刚添加的扩展

4. 固定扩展图标：

   • 点击浏览器右上角的扩展图标
   • 将BrowserQwen固定到工具栏以便快速访问

重要提示：安装扩展后需要刷新页面才能使扩展生效。

扩展配置详解

BrowserQwen扩展的配置通过manifest.json文件定义，主要包含以下关键配置：

配置项	值	说明
manifest_version	3	使用Manifest V3规范
permissions	tabs, notifications, storage, scripting, activeTab	必要的浏览器权限
host_permissions	http:///, https:///	允许访问所有HTTP/HTTPS网站
content_scripts	src/content.js	内容脚本注入配置

扩展的核心功能通过三个主要文件实现：

// popup.js - 处理弹出窗口逻辑
chrome.storage.local.get(['database_host'], function(result) {
    if (result.database_host) {
        popup_url = "http://"+result.database_host+":7863/";
    } else {
        popup_url = "http://127.0.0.1:7863/";
    }
    // 创建iframe加载工作站界面
});

// 自定义服务器地址配置
document.getElementById('set_addr').addEventListener('click', function() {
    var addr = document.getElementById('addr').value;
    chrome.storage.local.set({database_host: addr}, function() {
        console.log('database_host set to ' + addr);
    });
});

端口配置说明

BrowserQwen使用特定的端口进行服务通信：

• 端口7863: 助手服务端口，处理浏览器扩展的实时请求
• 端口7864: 工作站服务端口，提供编辑和聊天界面
• 这些端口在 run_server.py 中通过 --workstation_port 参数配置

使用流程与交互

安装配置完成后，BrowserQwen的使用流程如下：

1. 页面内容分析：

   • 点击页面上的"Add to Qwen's Reading List"按钮
   • 授权Qwen在后台分析当前页面内容

2. 启动交互：

   • 点击浏览器右上角的Qwen图标
   • 开始与Qwen关于当前页面内容的对话

3. 多文档处理：

   • 扩展会自动记录浏览的网页和PDF/Word/PPT材料
   • 支持跨页面内容理解和摘要生成

常见配置问题解决

端口冲突处理： 如果7863或7864端口被占用，可以通过修改 run_server.py 的端口参数来解决：

python run_server.py --llm qwen-max --model_server dashscope --workstation_port 7870 --api_key YOUR_API_KEY

然后相应修改扩展中的端口配置。

网络环境配置： 对于复杂的网络环境，可以通过扩展的设置界面自定义服务器地址：

// 在扩展弹出窗口中输入自定义服务器地址
// 格式：IP地址或域名（不需要http://前缀）

通过以上详细的安装与配置指南，您可以顺利部署BrowserQwen扩展，并开始享受AI辅助的智能浏览体验。扩展的设计充分考虑了易用性和灵活性，确保在不同环境下都能稳定运行。

总结

BrowserQwen作为基于Qwen-Agent的浏览器智能助手，通过先进的Chrome扩展架构和智能内容处理能力，为用户提供了强大的网页浏览辅助功能。系统支持网页内容分析、PDF文档处理、多格式文档解析，以及工作站模式和编辑器模式等高级功能。通过本地数据库服务部署和简单的Chrome扩展安装配置，用户可以快速启用这一智能助手，享受AI驱动的浏览体验、内容创作辅助和智能问答服务。BrowserQwen的模块化设计、异步通信机制和跨域支持等特点，使其成为一个高效、稳定且易于扩展的浏览器智能助手解决方案。

【免费下载链接】Qwen-Agent Agent framework and applications built upon Qwen, featuring Code Interpreter and Chrome browser extension. 项目地址: https://gitcode.com/GitHub_Trending/qw/Qwen-Agent