Writely 浏览器插件工作原理:AI 写作助手在网页编辑器中的实现
Writely 是一款功能强大的浏览器插件,作为 Notion AI 的替代方案,它能够在任何网页编辑器中提供无缝的 AI 写作辅助体验。这款工具突破了传统 AI 写作工具的局限,让用户在日常网页浏览和内容创作过程中都能享受到 AI 带来的便利。
核心架构:三大组件协同工作
Writely 的核心架构由三个关键部分组成,它们协同工作,确保 AI 写作助手能够在各种网页环境中稳定运行。
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