浏览器AI助手：基于右键菜单与提示词工厂的智能工作流设计

1. 项目概述：一个将AI能力嵌入浏览器右键的“操作系统”

如果你和我一样，每天在浏览器里工作，频繁地在ChatGPT、Claude、Notion AI这些标签页之间来回切换，只为了完成一些重复性的小任务——比如润色一段文字、总结一篇文章、或者翻译几个句子——那么你一定能理解那种效率被割裂的烦躁感。我们并不是在质疑这些AI工具的能力，而是那个“复制-粘贴-切换标签页-等待-再复制回来”的流程，实在太不优雅了。它打断了我们沉浸式的浏览和工作状态。

正是为了解决这个痛点，我动手开发了Extension | OS。你可以把它理解为一个运行在你浏览器里的、专为AI任务设计的微型“操作系统”。它的核心思想极其简单：让AI能力在你最需要的地方，以最无感的方式出现。具体来说，就是把你常用的AI指令（我们称之为“提示词”或“Prompt”）变成浏览器右键菜单里的一个选项。选中网页上的任何文本，右键点击，选择对应的AI功能，结果瞬间就出现在它该在的地方——可能是直接替换原文，也可能是复制到剪贴板，或者在一个优雅的侧边栏里展示出来。

这个项目完全开源，基于流行的浏览器扩展框架Plasmo构建。它不绑定任何单一的AI服务商，而是作为一个聚合层，让你可以自由接入OpenAI (ChatGPT)、Anthropic (Claude)、Groq、Together.ai以及本地的Ollama等多种大模型。你的API密钥只会安全地存储在你自己的浏览器本地，所有数据流转都发生在你的设备和AI服务商之间，扩展本身只是一个高效的“调度员”。

2. 核心设计思路：为什么是“右键菜单”与“提示词工厂”？

在构思Extension | OS时，我反复问自己一个问题：什么样的交互方式，对于网页上的文本处理来说是最自然、最不打扰的？答案显然是上下文菜单（右键菜单）。当我们选中文本时，下一步本能的操作就是点击右键，看看能对它做什么。将AI功能植入这里，完美地符合了“在哪里用，就在哪里处理”的直觉。

2.1 交互范式的选择：从“目的地”到“工具箱”

传统的AI工具使用模式是“目的地模式”：你有一个明确要去的“地方”（如ChatGPT的网页），你把问题带过去，处理完再带回来。而Extension | OS倡导的是“工具箱模式”：工具就在你手边，随取随用，用完即走。这种转变带来了几个显著优势：

• 零上下文切换：你无需离开正在阅读的文档、正在编写的邮件或正在浏览的论坛。注意力流得以保持连续，这对于需要深度思考的工作至关重要。
• 操作路径极短：从“遇到问题”到“开始解决”，中间只隔了一次右键点击和一次菜单选择。这比传统的多步操作快了数倍。
• 场景化智能：由于操作直接作用于当前页面的选中文本，AI指令可以设计得非常场景化。例如，在GitHub页面上，可以有一个“解释这段代码”的专用选项；在新闻网站上，可以有一个“总结核心观点”的选项。

2.2 架构核心：“提示词工厂”与“模型路由”

为了实现高度的灵活性和用户自主权，项目没有采用硬编码功能的方式，而是设计了两个核心抽象层：

1. 提示词工厂 (Prompt Factory)：这是整个扩展的“大脑”和可编程接口。它允许用户像搭积木一样，创建、编辑和管理自己的AI指令。每个指令不仅仅是一段文本，而是一个完整的“任务单元”，包含：

   • 名称与图标：在右键菜单中如何显示。
   • 系统提示词：定义AI的“角色”和任务边界（例如：“你是一位专业的文本编辑，专注于语法修正和语气优化，不改变原意。”）。
   • 用户提示词模板：这里可以包含变量，如{selection}，运行时会被你选中的实际文本自动替换。
   • 目标模型：这个任务由哪个AI服务商的哪个模型来执行（如 GPT-4o, Claude 3 Sonnet, Llama 3.1 等）。
   • 输出行为：AI返回的结果如何处理？是直接替换选中文本、复制到剪贴板，还是在侧边栏打开？

2. 统一模型路由层：这是扩展的“神经中枢”。它向下封装了不同AI服务商（OpenAI, Anthropic, Groq等）各异的API调用方式、参数格式和错误处理。向上，它对“提示词工厂”提供一个统一的、简单的调用接口：callModel(provider, model, messages)。这意味着，无论底层接入了多少家服务商，用户和功能开发者都无需关心其差异，只需关注任务本身。

这种架构使得Extension | OS从一个固定的工具集，进化成了一个可扩展的AI能力平台。用户不仅可以使用预设的常用功能（如翻译、总结、润色），更可以发挥创造力，为自己独特的工作流定制专属的AI助手。

实操心得：在设计初期，我曾纠结于是提供几十个开箱即用的固定功能，还是提供一个可自定义的工厂。最终选择了后者。因为AI的使用场景太个人化、太碎片化了。一个固定功能列表永远无法满足所有人，而一个强大的自定义系统，却能激发用户创造出开发者都想不到的用法。这从社区反馈中得到了验证，有的用户用它来批量生成社交媒体标签，有的则用来快速格式化数据表格。

3. 详细功能拆解与实操指南

3.1 核心工作流：从安装到第一次AI右键

让我们一步步走通整个流程，确保你能顺利上手。

3.1.1 安装与初始配置

你有两种安装方式：从Chrome网上应用商店安装（最简单），或从GitHub下载开发版。

• 商店安装（推荐）：

  1. 访问Chrome网上应用商店，搜索“Extension | OS”或通过项目README中的直达链接安装。
  2. 安装后，浏览器工具栏会出现扩展图标。首次使用，必须点击图标或右键菜单中的“Options”进入设置页。
  3. 在设置页的“API Keys”板块，填入你至少一个AI服务商的API密钥。例如，填入你的OpenAI API Key。密钥仅保存在你本地浏览器的加密存储中。

• 开发版安装（适合想尝鲜最新特性或开发者）：

  1. 从GitHub仓库的Release页面下载最新的chrome-mv3-prod.zip文件。
  2. 在Chrome浏览器地址栏输入chrome://extensions/并回车。
  3. 打开右上角的“开发者模式”开关。
  4. 点击“加载已解压的扩展程序”按钮，选择你刚刚解压的文件夹。
  5. 后续配置步骤与商店版相同。

3.1.2 进行你的第一次AI右键操作

安装配置完成后，你就可以在任何网页上体验“右键即AI”的快感。

1. 在任意网页（比如一篇英文博客）中，用鼠标选中一段你想处理的文本。
2. 在选中的文本上点击右键，你会看到弹出的菜单中多了一个“Extension | OS”的栏目，其下罗列着默认内置的几个功能，例如“Fix Grammar & Spelling”（修正语法拼写）、“Summarize”（总结）、“Translate to Chinese”（翻译成中文）等。
3. 点击你需要的功能，比如“Translate to Chinese”。扩展会立刻在后台将你选中的文本和对应的指令发送给配置的AI模型。
4. 稍等片刻（取决于模型速度和网络），处理结果会以你预设的方式返回。默认情况下，它会直接替换你刚才选中的文本。一瞬间，那段英文就变成了流畅的中文。

注意事项：首次使用某个模型时，可能会因为冷启动或网络稍有延迟。如果长时间无响应，请检查：a) 扩展图标是否正常（非灰色）；b) 设置中的API密钥是否有效且有余额；c) 网络连接是否正常。你可以在扩展选项页的“Logs”标签（如果已实现）查看详细请求日志。

3.2 功能模块深度解析

3.2.1 提示词工厂：打造你的私人AI指令库

“提示词工厂”是扩展的灵魂所在。点击扩展图标，选择“Prompt Factory”即可进入。

• 界面布局：通常你会看到一个列表，展示所有已存在的提示词任务。每个任务条目都有“编辑”、“启用/禁用”、“删除”等操作按钮。
• 创建新提示词：
  • 基础信息：给任务起个易懂的名字（如“小红书风格文案”），并选个图标。
  • 系统提示词：这是指导AI行为的“宪法”。例如，对于“代码解释”任务，你可以写：“你是一位资深的软件开发工程师，请用简洁易懂的语言解释以下代码片段的功能和关键逻辑，面向初学者。”
  • 用户提示词：这里是你与AI对话的主体。务必使用{selection}作为占位符，它会在运行时被实际选中的文本替换。你还可以加入其他指令，如“输出格式为要点列表”。
  • 模型选择：从下拉列表中选择一个已配置的模型提供商和具体模型。你可以为不同任务指定不同模型，比如创意写作用Claude，代码分析用GPT-4。
  • 输出行为：
    • Replace：直接替换选中文本。最流畅，适合修改、润色。
    • Copy：将结果复制到剪贴板。适合需要将结果粘贴到别处的场景。
    • Side Panel：在浏览器侧边栏打开结果。适合需要查看长篇输出或与结果进行多轮交互的情况（未来可能扩展为聊天）。
  • 保存与测试：保存后，该任务会立刻出现在你的右键菜单中。建议先在一个测试页面（如记事本）选中少量文本进行测试，确保功能符合预期。

3.2.2 模型管理：连接你的AI算力网络

在“Settings”或“Providers”页面，你可以管理所有AI服务商的连接。

• 支持的服务商：目前主要包括：
  • OpenAI：支持GPT-4o, GPT-4 Turbo, GPT-3.5-Turbo等。需提供sk-开头的API Key。
  • Anthropic：支持Claude 3系列模型。需提供对应的API Key。
  • Groq：以其极快的推理速度著称，特别适合需要低延迟的交互。支持Llama、Mixtral等开源模型。
  • Together.ai：提供大量开源模型的API接入，性价比可能更高。
  • Local (Ollama)：连接本地运行的Ollama服务，完全离线，隐私性最强。
• 配置要点：
  • 每个服务商通常只需要填入一个API Key。
  • 你可以同时配置多个服务商。在提示词工厂里，可以按任务自由选择。
  • 对于Groq、Together.ai等服务，可能还需要在高级设置中指定正确的API Base URL（端点地址）。

3.2.3 本地Ollama集成：完全离线的隐私方案

对于处理敏感信息或希望完全离线的用户，集成本地Ollama是杀手级功能。

1. 安装Ollama：前往 ollama.ai 下载并安装Ollama。
2. 拉取模型：在终端运行ollama pull llama3.1（以Llama 3.1为例）来下载你需要的模型。
3. 启动Ollama服务并配置CORS：这是关键一步。为了让浏览器扩展能访问本地服务，必须设置跨域资源共享。
   • 在终端执行：OLLAMA_ORIGINS=chrome-extension://bahjnakiionbepnlbogdkojcehaeefnp ollama serve
   • 重要：bahjnakiionbepnlbogdkojcehaeefnp是Extension | OS在Chrome商店的固定ID。如果你安装的是开发版，ID会不同，需要去chrome://extensions/页面查看你的扩展ID并替换。
4. 在扩展中配置：在扩展设置页，选择“Local (Ollama)”作为提供商，地址通常为http://localhost:11434，然后选择你拉取的模型名称。
5. 测试：创建一个使用本地模型的提示词任务，测试是否正常工作。响应速度将取决于你的本地硬件性能。

避坑指南：90%的Ollama连接问题都出在CORS配置上。确保环境变量OLLAMA_ORIGINS设置正确且生效。在macOS上，如果你希望永久设置，可能需要通过launchctl setenv或写入shell配置文件（如.zshrc）的方式。Windows用户则需要在系统环境变量或启动Ollama的终端会话中设置。

3.3 高级特性与未来展望

3.3.1 智能选区菜单

除了传统的右键菜单，Extension | OS还实验性地提供了“智能选区菜单”功能。当你用鼠标拖拽选中文本后，稍微停顿或释放鼠标，一个简洁的小浮窗会紧挨着选中区域出现，上面直接显示你最常用的几个AI操作按钮。这进一步缩短了操作路径，体验更佳。你可以在设置中启用或关闭此功能。

3.3.2 混合代理

这是项目一个非常前瞻性的特性。其理念是：对于一个复杂的任务，不依赖于单一模型的输出，而是将任务分发给多个不同的模型（或同一模型的不同参数设置），然后通过一个“裁判”模型或规则来综合、择优或整合所有结果，最终给出一个更可靠、更优质的答案。这类似于机器学习中的“集成学习”。虽然该功能仍在预发布阶段，但它指明了未来AI应用的一个方向：利用多样性来提升稳定性和质量。

3.3.3 数据与隐私

所有用户数据，包括API密钥、自定义提示词、以及临时缓存的处理结果，都通过浏览器的chrome.storage.localAPI存储在本地设备上。扩展的代码逻辑不包含任何将用户数据外传到第三方服务器的行为（匿名遥测功能默认关闭且可配置）。当你使用云端AI服务商时，数据仅在你和该服务商之间传输，Extension | OS仅作为中转代理。使用本地Ollama时，则实现完全端到端的隐私处理。

4. 开发视角：技术栈选型与架构决策

作为一个开源项目，其技术实现也对开发者有参考价值。项目主要基于以下技术构建：

• Plasmo框架：这是一个基于React的现代浏览器扩展开发框架。它极大地简化了Chrome Extension Manifest V3的开发流程，提供了热重载、一流的React/TypeScript支持、以及易于管理的多入口点（如弹出窗口、选项页、内容脚本、侧边栏）。选择Plasmo避免了从零开始配置Webpack、处理manifest文件等繁琐工作，让开发者能聚焦于功能逻辑。
• React + TypeScript + Tailwind CSS：前端界面的黄金组合。TypeScript提供了良好的类型安全，减少了运行时错误。Tailwind CSS则实现了快速、一致的UI开发。Shadcn/ui组件库的引入，进一步提升了UI的专业性和可访问性。
• 模型API的统一抽象层：这是后端逻辑的核心。代码中为每个支持的AI提供商（OpenAI、Anthropic等）实现了一个统一的适配器接口。每个适配器负责将内部的通用请求格式，转换为对应提供商API所需的特定HTTP请求（包括URL、Headers、Body格式）。这种设计使得添加一个新的AI服务商变得非常清晰和模块化，只需实现一个新的适配器类即可。
• 状态与存储管理：使用Plasmo提供的@plasmohq/storage库来安全、便捷地管理用户配置和提示词数据。它底层封装了Chrome的存储API，并提供了类似React Hooks的响应式数据访问方式，使得在React组件中同步读取/写入存储数据变得非常简单。

一个关键的技术决策点：如何处理浏览器扩展中常见的“内容脚本”与“后台服务Worker”之间的通信，以及如何管理右键菜单的动态更新？项目采用了Chrome Extension Manifest V3推荐的Service Worker作为后台常驻逻辑（处理API调用、菜单管理），而内容脚本则轻量化，主要负责与页面DOM交互（获取选中文本、替换内容）。两者通过chrome.runtime.sendMessage进行通信。右键菜单项则根据存储在chrome.storage中的提示词列表动态创建和更新。

5. 常见问题与故障排查实录

在实际使用和开发过程中，我遇到了不少典型问题。这里将它们整理成表，希望能帮你快速排雷。

个人踩坑心得：浏览器扩展开发，尤其是涉及内容脚本与页面交互的部分，充满了各种边界情况。一个在简单页面上运行完美的DOM替换脚本，可能在Gmail、Notion或某个复杂的Web应用里完全失效。我的经验是：优先保证核心功能（右键菜单调用API）在大多数标准网页上的稳定性，对于特殊页面，提供优雅的降级方案（如复制到剪贴板）。同时，建立完善的错误捕获和用户反馈机制（例如，在结果区域显示简洁的错误信息，并引导用户去查看日志），比追求100%的兼容性更重要。

6. 从用户到贡献者：如何参与这个开源项目

如果你对这个项目感兴趣，无论是想反馈问题、请求新功能，还是直接贡献代码，都非常欢迎。项目托管在GitHub上，采用MIT开源协议。

• 反馈问题：在GitHub仓库的Issues页面，搜索是否已有类似问题。如果没有，可以新建一个Issue，清晰地描述问题现象、复现步骤、你的浏览器版本、扩展版本以及期望的行为。附上截图或错误日志会极大帮助定位问题。
• 功能请求：同样在Issues页面提出。描述你希望添加的功能、它解决什么痛点、以及你设想的大致使用方式。社区投票高的功能请求会被优先考虑。
• 贡献代码：
  1. Fork项目仓库到你的账户。
  2. 克隆你的Fork到本地：git clone https://github.com/你的用户名/extensionOS.git
  3. 安装依赖：pnpm install（项目推荐使用pnpm）。
  4. 启动开发模式：pnpm dev。这会启动一个开发服务器，并加载一个开发版本的扩展到你的浏览器（需在chrome://extensions/加载build/chrome-mv3-dev文件夹）。
  5. 进行你的修改。项目结构清晰，主要逻辑在src目录下。
  6. 确保代码风格一致（项目可能配置了ESLint和Prettier），并编写或更新相关测试。
  7. 提交更改，推送到你的Fork，然后在原仓库发起Pull Request。

给新贡献者的建议：可以从解决一些标记为good first issue的简单问题开始，例如修复一个拼写错误、更新一个依赖版本、或者为一个组件添加测试。在实现新功能前，最好先在Issues里讨论一下设计方案，确保它与项目整体架构和方向一致。

开发这样一款工具，最大的成就感来自于看到它实实在在地融入并优化了人们的工作流。它不再是一个需要被刻意想起和打开的应用，而是变成了像复制粘贴一样自然的浏览器原生能力。这种“无感”的赋能，正是技术应该追求的方向。如果你厌倦了在无数个AI工具标签页间跳跃，不妨试试让AI就待在你手边，右键一点，即是智能。