Writely 是一款替代 Notion AI 的浏览器插件，通过内容脚本、后台服务和用户界面三大组件协同工作。其核心流程包括文本选择识别、指令发送、AI 处理及结果插入。技术亮点涵盖跨域通信、Shadow DOM 样式隔离及灵活配置。安装需克隆源码构建并配置 API 密钥，旨在实现任何网页编辑器中的无缝 AI 辅助体验。
Writely 是一款功能强大的浏览器插件，作为 Notion AI 的替代方案，它能够在任何网页编辑器中提供无缝的 AI 写作辅助体验。这款工具突破了传统 AI 写作工具的局限，让用户在日常网页浏览和内容创作过程中都能享受到 AI 带来的便利。
Writely 的核心架构由三个关键部分组成，它们协同工作，确保 AI 写作助手能够在各种网页环境中稳定运行。
内容脚本是 Writely 实现跨网页功能的基础。通过在 manifest.json和 manifest.firefox.json 中配置的 content_scripts，插件能够将必要的代码注入到用户访问的每个网页中。这一机制使得 Writely 可以在任何网页编辑器中生效，无论是简单的文本框还是复杂的富文本编辑器。
后台服务负责处理插件的核心逻辑和与外部 API 的通信。在 src/background/index.ts 中，我们可以看到服务 worker 监听各种事件，包括用户的选中文本操作。通过设置 contexts: ['selection']，后台服务能够感知用户在网页上的文本选择行为，为后续的 AI 处理做好准备。
用户界面组件是用户与 Writely 交互的桥梁。这些组件包括悬浮面板、设置界面等，它们通过 Shadow DOM 技术嵌入到网页中，既保持了界面的独立性，又能与宿主页面和谐共存。
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 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 密钥的安全。
Writely 的用户界面采用了现代化的设计，能够自适应不同的网页环境。通过使用 Shadow DOM 技术，插件的样式不会与宿主页面的样式发生冲突，保证了在各种网站上都能提供一致的用户体验。
用户可以通过设置界面自定义 Writely 的行为，包括 API 密钥、AI 模型选择、语言偏好等。配置文件展示了这些配置选项，让用户能够根据自己的需求调整插件的性能和功能。
要开始使用 Writely，只需按照以下步骤操作：
Writely 的设计理念是让 AI 写作辅助无处不在，无需切换应用或复制粘贴内容。通过深入理解其工作原理，用户可以更好地利用这款工具提升写作效率和质量。无论是日常办公、内容创作还是学习研究，Writely 都能成为您的得力助手，让 AI 写作变得简单而高效。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
