Writely 浏览器插件工作原理：AI 写作助手在网页编辑器中的实现
Writely 是一款功能强大的浏览器插件，作为 Notion AI 的替代方案，它能够在任何网页编辑器中提供无缝的 AI 写作辅助体验。这款工具突破了传统 AI 写作工具的局限，让用户在日常网页浏览和内容创作过程中都能享受到 AI 带来的便利。
核心架构：三大组件协同工作
Writely 的核心架构由三个关键部分组成，它们协同工作，确保 AI 写作助手能够在各种网页环境中稳定运行。
1. 内容脚本（Content Script）
内容脚本是 Writely 实现跨网页功能的基础。通过在 manifest.json和 manifest.firefox.json 中配置的 content_scripts，插件能够将必要的代码注入到用户访问的每个网页中。这一机制使得 Writely 可以在任何网页编辑器中生效，无论是简单的文本框还是复杂的富文本编辑器。
2. 后台服务（Background Service）
后台服务负责处理插件的核心逻辑和与外部 API 的通信。在 src/background/index.ts 中，我们可以看到服务 worker 监听各种事件，包括用户的选中文本操作。通过设置 contexts: ['selection']，后台服务能够感知用户在网页上的文本选择行为，为后续的 AI 处理做好准备。
3. 用户界面（UI）组件
用户界面组件是用户与 Writely 交互的桥梁。这些组件包括悬浮面板、设置界面等，它们通过 Shadow DOM 技术嵌入到网页中，既保持了界面的独立性，又能与宿主页面和谐共存。
工作流程：从文本选择到 AI 响应
Writely 的工作流程可以分为以下几个关键步骤，每个步骤都体现了其设计的精妙之处。
文本选择与识别
当用户在网页上选择文本时，src/content/utils/selection/index.ts 中的 SelectionManager 类开始工作。它不仅能够准确捕捉用户的选择范围，还能处理各种复杂情况，如输入框内的选择、跨元素的选择等。通过 onSelectionChange 方法，系统能够实时响应用户的选择行为。
图：Writely 在 Notion 编辑器中响应文本选择的演示，展示了插件如何识别用户选择并提供 AI 辅助选项
用户交互与指令发送
一旦用户选择了文本并点击 Writely 提供的功能按钮，如'修改或审查选中区域'或'从选中区域生成'（定义在 src/common/locale/zh-CN.json），系统会通过 useSelectionManager 钩子（src/content/container/store/selection.ts）获取选中的文本内容，并将用户的指令发送给后台服务。
AI 处理与结果返回
后台服务接收到用户的请求后，会调用相应的 AI API。在 src/content/container/ask-writely/result-panel/content.tsx 中，我们可以看到 queryOpenAIPrompt 函数负责将选中的文本和用户指令发送给 OpenAI API。API 返回结果后，系统会将其展示在结果面板中。
结果插入与编辑
用户可以选择将 AI 生成的结果直接替换选中的文本或追加到选中区域之后。这两个功能分别由 replace.tsx和 update.tsx（位于 src/content/container/ask-writely/result-panel/actions/）实现，通过调用 selection.replace()和 selection.append() 方法完成对网页内容的修改。
图：展示了 Writely 如何根据用户选择的文本生成 AI 响应并将结果插入到编辑器中
技术亮点：突破网页限制的创新方案
跨域通信与权限管理
为了在不同域名的网页上都能正常工作，Writely 利用了浏览器插件的跨域通信能力。通过 等 API，内容脚本和后台服务能够安全地交换数据，确保用户数据和 API 密钥的安全。
