feat(wip): 浏览器插件扩展

[Facefall]

Description

参考 #297 (comment) 进行开发, 目前是 draft 阶段

设计思考如下:

大体流程为:

1. 插件配置初始化
2. 进行定时轮询 + 网页 tab 匹配
3. context 提取条件触发, 存储到本地(IndexDB)中
4. 定时同步到 OpenContext 中

2025-12-07134207.mp4

Closes: #(issue)

🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is an existing issue
for this change. If not, please create an issue before you create this PR, unless the fix is very small.

Not adhering to this guideline will result in the PR being closed.

[Facefall]

@qin-ctx @pandaCure please review thanks, its up to minimal mvp version

[qin-ctx]

@qin-ctx @pandaCure please review thanks, its up to minimal mvp version

get

[hobbytp]

我的理解是抓屏的好处是试图能和我们肉眼看到的信息对齐，所以即使网页的dom有很多信息，但是应该只关注我们看到的网页最终渲染结果。如果抓dom的话，会不会最终embedding后的无用信息反而更多了呢？这个和MineContext的初衷是不是背离了？
还是说你的方案里面会自动抓取页面主要信息？

我个人常用的一个场景是网页上有个长文或博客，我感兴趣但是又不想花太多时间读取，就会用一个自己写的chrome插件调用@mozilla/readability来获取文章主体，然后用大模型分析总结或提问。这里用browser-use的话，是不是可以让用户通过某种方式，比如点击页面的某个范围（比如鼠标移动上去会红框显示之类的）或自动优选主体但用户可以改选，然后dom的这块信息就会加入到MineContext里面去，并且当我们这样操作的时候，后台的录屏会自动停止来减少重复。当然也有可能我没有完全理解你的方案, 毕竟网页上的智能抓取方案总是受欢迎的。

[Facefall]

我的初衷是为了降低 token 消耗,如果只是通过 dom 结构提取信息内容, 那么对于这种纯文本的信息内容提取, 使用开源模型就可以做了.

vlm 进行图片识别本身就昂贵,而且我个人理解,视觉编码的 token 效率低于纯文本,即使网页中只包含文字，vlm 也需要需要先“看懂”再提取.

"如果抓dom的话，会不会最终embedding后的无用信息反而更多了呢". 这个我没有论证过, 但是确实可能会有类似的 case, 就是网页重看不见的元素噪声太大, 导致模型识别有误.

但是我觉得这一块可以尝试,以下我做的一个测试:
prompt:

你是专业的HTML内容提取专家，负责从网页HTML DOM结构中识别、过滤和报告核心内容。排除所有无关元素（广告、导航栏、脚本代码等），专注于提取页面实质信息。

- 核心技能：
  1. DOM结构分析：理解HTML文档层级和标签语义
  2. 内容智能过滤：识别并保留有价值的信息块
  3. 关键信息提取：自动抓取标题/正文/元数据
  4. 结构化报告生成：按标准格式输出内容

# 输出要求：
- 必须使用JSON格式输出，包含以下字段：
  {
    "page_title": "页面标题",
    "main_content": ["段落1文本", "段落2文本", ...],
    "key_entities": {
      "people": [],
      "organizations": [],
      "locations": []
    },
    "metadata": {
      "word_count": 整数,
      "content_quality_rating": "A+/A/B/C"
    }
  }
- 过滤要求：删除所有<style>/<script>标签、广告类元素（含class含ad的DIV）、重复内容块
- 提取优先级：保持原始段落顺序，但去除空白段落和单字符段落

# 工作流程：
1. 接收用户提供的完整HTML DOM字符串
2. 分步解析执行：
   [1] 文档预处理
      √ 删除所有<script>/<style>标签
      √ 移除class/id含ad/banner/promo的元素
      √ 过滤图片/视频等媒体资源标签
   [2] 核心内容识别
      √ 优先定位<article>/<main>/<main-content>标签
      √ 若无语义化标签，查找最大文本容器
      √ 保留h1-h6标题层级结构
   [3] 关键信息处理
      √ 识别命名实体（人物/组织/地点）
      √ 合并分散段落（相邻p标签自动连接）
   [4] 质量评估
      √ 根据文本密度评分A+(>0.7)/A(>0.5)/B(>0.3)/C(<0.3)
      √ 计算实际内容字数（不含HTML标签）
3. 错误处理：
   - HTML格式错误 → 返回{'error':'Invalid HTML structure'}
   - 无有效内容 → 返回{'warning':'No meaningful content detected'}

# 初始化：
当接收到用户HTML输入时立即激活处理流程。初次请求时响应："DOM分析引擎已就绪，请提供HTML文档"（后续请求直接输出结果）

输入这里我以你的个人 github 首页的 html 作为测试:

hobbytp-github.html

以下是使用 grok v4 的内容输出:

{
  "page_title": "hobbytp (Peng Tan)",
  "main_content": [
    "AI Enthusiast, Cloud Native Solution Arch. hobbytp has 99 repositories available. Follow their code on GitHub.",
    "Full-Stack GenAI & Distributed Systems Engineer\nFrom OpenStack & Kubernetes foundations to Multi-Agent (MAS) orchestration and Context Engineering.",
    "🔭 Core Focus:",
    "GenAI System Engineering: Retrieval, RAG optimization, prompt/context compression, finetuning (PEFT/LoRA), evaluation.",
    "Multi-Agent Architectures: Planning + tool routing + adaptive memory strategies, Agentic Context Engineering",
    "Cloud Native & Infra: OpenStack, Kubernetes, Service Mesh (Istio/Envoy), microservices resilience, AI Infra",
    "Bridging Infra ↔ AI: Turning distributed platforms into intelligent, automatable systems.",
    "🌱 Selected Strengths:",
    "Built MAS prototypes integrating LangGraph + custom evaluators for decision refinement.",
    "Experience in performance-tuning service mesh traffic & observability pipelines.",
    "🚀Tech Stack (condensed):",
    "Languages: Python, Go, TypeScript, C/C++, Shell",
    "AI: LangChain, LangGraph, AutoGen, RAG, Finetuning",
    "Infra: Kubernetes, OpenStack, Docker, Istio, Envoy",
    "Data & Messaging: PostgreSQL, Redis, Kafka, etc.",
    "Tooling: CI/CD, Observability (Prometheus/Grafana/OpenTelemetry)",
    "Current Exploration:",
    "Agent evaluation frameworks",
    "Agent RL",
    "AI Coding Assistant",
    "📫 Contact: [email protected] | Blog: https://hobbytp.github.io/",
    "2,344 contributions in the last year"
  ],
  "key_entities": {
    "people": ["Peng Tan"],
    "organizations": ["GitHub", "WeChat"],
    "locations": ["SH, China"]
  },
  "metadata": {
    "word_count": 248,
    "content_quality_rating": "A"
  }
}

另一份测试(csdn 的某份博文),即使只看总结输出,我们也能大致理解到这篇网页讲述的内容:

  "page_title": "在网页中运行EXE程序的完整指南（2025年最新方案）",
  "main_content": [
    "随着Web技术的快速发展，将传统桌面应用程序（EXE）集成到网页中的需求日益增多。本文将详细介绍6种主流实现方案，涵盖从传统技术到现代云原生的完整解决方案。",
    "一、WebAssembly方案（现代推荐）\n实现原理: 通过Emscripten工具链将C/C++代码编译为WASM模块，利用浏览器的高性能虚拟机执行原生代码。",
    "实施步骤:\n1. 环境准备 安装Emscripten SDK:\n```bash\ngit clone https://github.com/emscripten-core/emsdk.git\n./emsdk install latest\n./emsdk activate latest\n```\n2. 编译转换 使用emcc编译器生成WASM模块:\n```bash\nemcc main.c -o app.html -s WASM=1\n```\n3. 网页集成\n```html\n<script>\nfetch('app.wasm')\n  .then(res => res.arrayBuffer())\n  .then(bytes => WebAssembly.instantiate(bytes))\n  .then(results => {\n    results.instance.exports._start();\n  });\n</script>\n```\n优势与局限\n✅ 性能接近原生，安全沙箱机制\n❗️ 需要源码支持，无法直接转换二进制EXE",
    "二、Electron桌面应用集成\n实现原理: 通过Node.js的child_process模块调用本地EXE文件，结合Chromium渲染引擎构建混合应用。",
    "开发流程\n1. 创建基础项目\n```bash\nnpm init electron-app@latest my-app\n```\n2. 添加EXE调用功能\n```javascript\nconst { exec } = require('child_process');\n\nfunction launchExe() {\n  exec('path/to/program.exe', (err, stdout) => {\n    if(err) console.error(err);\n  });\n}\n```\n3. 打包部署 使用electron-forge生成安装包:\n```bash\nnpm run make\n```\n安全建议\n- 需签署应用证书防止安全警告\n- 建议通过IPC机制隔离敏感操作",
    "三、云端虚拟化方案\n实施方案\n1. 服务器部署 推荐使用腾讯云CVM部署应用\n2. WebRTC串流配置\n```javascript\nconst peer = new RTCPeerConnection();\nnavigator.mediaDevices.getDisplayMedia()\n  .then(stream => peer.addStream(stream));\n```\n3. 客户端接入 集成NoVNC库实现浏览器访问:\n```html\n<script src=\"https://novnc.com/noVNC/vnc.js\"></script>\n<div id=\"vnc-canvas\"></div>\n```\n成本分析\n资源类型\t月成本估算\n4核8G云服务器\t¥480\n5Mbps带宽\t¥900",
    "四、浏览器插件方案（传统方式）\nNPAPI插件开发\n```cpp\n#include &lt;npapi.h&gt;\n\nNPError NPP_New(NPMIMEType pluginType, NPP instance,\n                uint16_t mode, int16_t argc, char* argn[],\n                char* argv[], NPSavedData* saved) {\n  // 初始化代码\n  return NPERR_NO_ERROR;\n}\n```\n注册表配置\n```reg\nWindows Registry Editor Version 5.00\n\n[HKEY_LOCAL_MACHINE\\SOFTWARE\\MozillaPlugins\\@mycompany.com/MyPlugin]\n\"Description\"=\"My EXE Runner\"\n\"Path\"=\"C:\\\\plugin\\\\npMyPlugin.dll\"\n```\n浏览器支持现状\n浏览器\t支持状态\nChrome\t❌ 已弃用\nFirefox\t❌ 已弃用\nEdge\t❌ 不支持",
    "五、服务器端执行方案\nCGI接口配置\n```python\n# adduser.py\nimport cgi\n\nform = cgi.FieldStorage()\nprint(\"Content-type: text/html\\n\")\nprint(f\"&lt;h1&gt;Welcome {form['username'].value}&lt;/h1&gt;\")\n```\nNginx配置\n```nginx\nlocation /cgi-bin/ {\n  gzip off;\n  fastcgi_pass  unix:/var/run/fcgiwrap.socket;\n  include       fastcgi_params;\n}\n```\n安全防护\n1. 设置chroot jail环境\n2. 使用Docker隔离进程\n3. 配置严格的权限控制",
    "六、ClickOnce部署方案\n项目配置\n```xml\n<!-- MyApp.csproj -->\n<PropertyGroup>\n  <PublishUrl>http://cdn.6v6.ren/apps/</PublishUrl>\n  <Install>true</Install>\n  <PublisherName>6V6 Tech</PublisherName>\n</PropertyGroup>\n```\n签名证书\n```powershell\nNew-SelfSignedCertificate -Type CodeSigningCert \\\n  -Subject \"CN=6V6 Software\" \\\n  -KeyAlgorithm RSA \\\n  -KeyLength 2048 \\\n  -CertStoreLocation \"Cert:\\\\CurrentUser\\My\"\n```\n技术选型建议表\n方案\t开发难度\t安全性\t跨平台\t适用场景\nWebAssembly\t★★★★\t★★★★★\t是\t高性能计算\nElectron\t★★★\t★★★☆\t是\t混合应用\n云端虚拟化\t★★\t★★★★☆\t是\t企业级应用\nClickOnce\t★★\t★★★☆\t否\tWindows内部系统\n\n访问 6v6-博客网 获取更多技术干货\n涵盖前沿技术解析、开发实战经验、架构设计方法论等专业内容\n\n版权声明：本文采用CC BY-NC-SA 4.0协议，转载请注明出处"
  ],
  "key_entities": {
    "people": [
      "2503_90908880"
    ],
    "organizations": [
      "Emscripten",
      "Node.js",
      "腾讯云",
      "NoVNC"
    ],
    "locations": []
  },
  "metadata": {
    "word_count": 248,
    "content_quality_rating": "A+"
  }
}

至于你说的使用 browser-use 的方式, 随手将内容划入 MineContext 里, 我认为也有必要. 例如在一些 spa 网页里, html 没有什么内容, 如果用手动的方式,将内容块存到 minecontext 里,我觉得是一个 ok 的思路.