揭秘Writely工作原理：如何让AI写作助手在任何网页编辑器中无缝运行
揭秘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利用了浏览器插件的跨域通信能力。通过chrome.runtime.sendMessage等API，内容脚本和后台服务能够安全地交换数据，确保用户数据和API密钥的安全。
自适应UI与样式隔离
Writely的用户界面采用了现代化的设计，能够自适应不同的网页环境。通过使用Shadow DOM技术，插件的样式不会与宿主页面的样式发生冲突，保证了在各种网站上都能提供一致的用户体验。
灵活的配置选项
用户可以通过设置界面自定义Writely的行为，包括API密钥、AI模型选择、语言偏好等。assets/config.png展示了这些配置选项，让用户能够根据自己的需求调整插件的性能和功能。
图：Writely的设置界面，用户可以在这里配置API密钥、选择AI模型和设置语言偏好
安装与使用：简单几步开启AI写作之旅
要开始使用Writely，只需按照以下步骤操作：
- 克隆仓库：
git clone https://gitcode.com/gh_mirrors/wr/writely - 根据项目文档进行构建
- 在浏览器中加载已解压的扩展程序
- 在设置界面中配置您的OpenAI API密钥
- 开始在任何网页编辑器中享受AI写作辅助
Writely的设计理念是让AI写作辅助无处不在，无需切换应用或复制粘贴内容。通过深入理解其工作原理，用户可以更好地利用这款工具提升写作效率和质量。无论是日常办公、内容创作还是学习研究，Writely都能成为您的得力助手，让AI写作变得简单而高效。