Skip to Content
技术文档技术架构Layer 1: 插件层

L1层:浏览器插件架构

L1层架构定位: L1层(采购意图采集层)是智能采购平台四层架构的最前端,直接与用户交互。本层主要职责包括:

  • 意图识别:提取商品页面信息,调用服务端AI进行内容理解
  • 用户交互:提供简洁直观的采购意图录入界面
  • 数据采集:将用户采购需求结构化为标准数据格式
  • 安全认证:确保用户身份和数据传输的安全性
  • 跨平台适配:支持主流电商平台的页面结构识别

技术特点:

  • 浏览器插件使用DOM API提取页面商品信息
  • 通过HTTP API调用服务端AI服务进行内容识别和理解
  • 采用Manifest V3规范确保插件安全性和性能
  • 数据不在本地存储,实时传输到后端处理

3.1 L1层功能与交互设计

浏览器插件作为智能采购平台的L1层(采购意图采集层),负责在电商平台上捕获用户的采购意图并提供直观的交互体验:

3.1.1 L1层插件激活与界面

界面设计要点:

  • 非侵入式:仅在识别到商品页面时显示小巧的浮动按钮
  • 快速激活:一键弹出采集界面,无需页面跳转
  • 信息预填:自动填充商品信息,减少用户输入
  • 即时反馈:提交后立即显示成功状态和后续流程

3.1.2 核心交互流程

步骤用户操作插件行为预期结果
1浏览商品页面后台检测页面内容识别商品信息
2点击”代购”按钮弹出采集面板显示商品详情
3确认/修改信息实时验证输入确保数据完整
4点击提交数据加密传输后端接收处理
5等待反馈显示处理状态提示操作结果

3.2 L1层智能采集策略(基于 Browser-Use 的国产AI智能识别)

3.2.1 国产AI模型驱动的智能识别方案

采用 Browser-Use 工具进行商品信息的智能识别,相比传统DOM选择器更加稳定和智能:

Browser-Use 集成架构:

// Browser-Use 商品信息提取示例 import { BrowserUse } from 'browser-use'; class ProductExtractor { constructor() { this.browserUse = new BrowserUse({ model: 'qwen-vl-plus', // 使用阿里通义千问视觉模型 headless: true }); } async extractProductInfo(url) { const task = ` 分析当前商品页面,提取以下信息: 1. 商品标题 2. 商品价格 3. 商品规格/型号 4. 店铺名称 5. 商品图片链接 6. 库存状态 返回JSON格式的结构化数据 `; const result = await this.browserUse.execute(task, { url: url, format: 'json' }); return this.validateAndClean(result); } }

3.2.2 国产AI智能识别优势

国产AI模型选型优势:

模型提供商模型名称核心优势适用场景
阿里云通义千问-VL中文理解优秀,成本低廉主力商品识别模型
百度文心一言-视觉版本土化定制,合规性好备用识别引擎
智谱AIGLM-4V推理能力强,响应速度快复杂页面解析

相比国外模型的优势:

  • 合规性保障:符合国内数据安全和隐私保护法规
  • 成本优势:调用费用普遍低于国外同类产品50%以上
  • 中文优化:对中文商品描述理解更准确
  • 本土化支持:更好的技术服务和定制化能力
  • 网络稳定性:国内部署,避免网络延迟和封禁风险

相比传统选择器的技术优势:

对比维度传统DOM选择器Browser-Use+国产AI方案
页面适应性页面结构变化易失效AI理解语义,适应性强
维护成本需频繁更新选择器自适应,几乎无维护
准确性依赖固定规则AI智能判断,准确性高
扩展性新平台需重新适配通用性强,快速支持新平台
中文支持需要额外处理原生中文优化
容错性选择器失效即无法工作多种策略自动切换

3.2.3 淘宝平台专用适配策略

主要适配目标:

  • 淘宝平台:主要目标平台,重点支持
  • 多平台支持:架构支持京东、拼多多等平台扩展

淘宝平台特殊优化:

  • 重点适配淘宝商品页面结构
  • 优化对淘宝价格显示规则的理解
  • 支持淘宝特有的SKU规格选择
  • 适配淘宝店铺信息提取

平台语义模板示例:

const platformTemplates = { taobao: { context: "这是淘宝商品页面", instructions: ` 重点关注: - 商品标题通常在页面顶部 - 价格信息在右侧详情区 - 规格选择在价格下方 - 店铺信息在价格附近 `, validation: { priceFormat: /^¥?\d+\.?\d*$/, titleLength: { min: 5, max: 200 } } }, jd: { context: "这是京东商品页面", instructions: ` 重点关注: - 商品名称在左上角 - 价格显示为红色数字 - 商品型号在基本信息中 `, validation: { priceFormat: /^¥\d+\.?\d*$/, shopPattern: /.*$/ } } };

3.2.4 数据质量保证

多层验证机制:

  • 语义验证:AI判断提取内容是否符合商品信息特征
  • 格式验证:检查价格、标题等字段格式正确性
  • 完整性验证:确保必需字段都已提取
  • 合理性验证:价格范围、标题长度等合理性检查
  • 一致性验证:多次提取结果的一致性对比

容错与重试策略:

class ProductExtractorWithRetry { async extractWithRetry(url, maxRetries = 3) { for (let i = 0; i < maxRetries; i++) { try { const result = await this.extractProductInfo(url); if (this.validateResult(result)) { return result; } // 调整策略重试 await this.adjustStrategy(i); } catch (error) { console.log(`提取失败,第${i+1}次重试:`, error); if (i === maxRetries - 1) { // 最后一次失败,返回部分数据或使用备用方案 return await this.fallbackExtraction(url); } } } } async fallbackExtraction(url) { // 备用方案:使用传统选择器或用户手工输入 return await this.manualFallback(url); } }

3.2.5 基本稳定性保证

基本容错机制:

  • 提取失败时自动重试(最多3次)
  • 超时保护(单次请求60秒超时)
  • 异常情况下支持手动补充

质量控制机制:

  • 必填字段检查(商品名称、价格)
  • 数据格式验证(价格数值合理性)
  • 用户确认机制(提交前二次确认)

3.3 L1层OAuth认证集成

采用标准OAuth 2.0协议进行用户身份认证,确保安全可靠。

OAuth认证优势:

  • 安全性高:用户密码不经过插件,避免泄露风险
  • 标准化:采用成熟的OAuth 2.0标准协议
  • 易集成:支持企业现有SSO系统集成
  • 自动刷新:Refresh Token机制,无需用户重复登录

3.4 L1层安全与合规设计

3.4.1 数据安全策略

数据安全原则:

  • 不存储原则:插件不在本地存储任何采集数据
  • 加密传输:所有数据传输均采用HTTPS协议
  • 最小化采集:只采集业务必需的商品信息
  • 脱敏处理:敏感信息进行脱敏或加密处理

安全措施:

  • 数据最小化:只采集业务必需的信息
  • 传输安全:全程HTTPS + TLS1.3加密
  • 访问控制:基于OAuth的权限管理
  • 直接传输:数据不在插件内存储

3.4.2 隐私保护措施

保护措施实施方法效果
数据匿名化用户ID哈希处理无法追溯个人身份
脱敏处理敏感字段加星号处理保护个人隐私
透明告知明确告知采集目的和范围符合法规要求
权限最小化仅申请必要的浏览器权限降低权限滥用风险
用户控制提供数据删除功能增强用户数据自主权
透明度清晰的隐私政策说明提升用户信任度

3.4.3 合规性设计

插件商店规范:

  • 遵循Chrome Web Store政策
  • 详细的权限说明和使用目的
  • 定期安全审核和更新
  • 用户反馈和问题处理机制

企业合规要求:

  • 支持企业级安全策略配置
  • 提供详细的操作审计日志
  • 兼容企业数据分类标准
  • 支持合规性检查和报告

技术实现要点:

  • 轻量化部署:插件包体积控制在2MB以内
  • 性能优化:后台运行不影响浏览器性能
  • 更新机制:支持自动更新和灰度发布
  • 错误处理:完善的异常捕获和用户提示