返回文章列表

从网页选中文本到 flomo：本地草稿工作流与格式边界

作者：Flomo Extension · 发布于 · 更新于

网页摘录最容易产生两个误解：一是“选中文字就会自动上传”，二是“加入草稿会保留原网页的全部格式和来源”。Flomo Extension 1.20.0 的实际行为都不是这样。

当前流程是：用户完成鼠标选择后，扩展显示一个浮动入口；只有再次点击“添加到 flomo extension 草稿”，选区的纯文本才会进入浏览器本地草稿。页面链接、标题、图片和原始样式不会随选区自动保存。

本文依据 Flomo Extension 1.20.0 源码核对，日期为 2026 年 8 月 1 日。示例用于解释当前实现，不代表与所有网页编辑器、代码块或动态页面都已完成兼容性测试。

选中文本后，扩展具体做了什么

普通网页内容脚本运行在 *://*/* 范围，并监听鼠标选择动作。一次完整的加入草稿流程如下：

  1. 用户在网页中用鼠标选择一段文字；
  2. mouseup 触发后，脚本调用 window.getSelection()；
  3. 对选区结果执行 toString().trim()，得到纯文本；
  4. 在选区上方显示“添加到 flomo extension 草稿”；
  5. 用户点击浮动入口；
  6. 文本通过扩展内部消息交给后台；
  7. 后台把它包在一个 HTML 段落中，并追加到 flomo-draft；
  8. 下次打开扩展弹窗时，编辑器读取这份本地草稿。

只是拖动并选中文字，不会执行第 6、7 步。用户可以点关闭图标，也可以取消选区；没有点击“添加到草稿”就不会由这条路径写入本地草稿。

多次摘录怎样排列

如果本地已经有草稿，新摘录会追加在末尾，每次选区使用一个段落容器：

<p>第一次选择的文字</p>
<p>第二次选择的文字</p>

因此，多次点击的先后顺序会成为草稿顺序。扩展不会按网页位置重新排序，也不会自动合并相邻摘录。

更实用的工作方式是先写一个主题，再按阅读顺序加入少量片段。例如：

#阅读/产品

问题：这篇文章怎样解释新用户流失？

[摘录一]
用户第一次完成任务前需要经过三个配置步骤。

[我的判断]
真正应验证的不是步骤总数，而是每一步是否有即时反馈。

来源：https://example.com/article

当前版本不会自动加上方括号标题和来源链接；这些内容需要用户自己补充。

草稿保存在哪里，什么时候会被清空

草稿键名为 flomo-draft，写入浏览器扩展的本地存储区域。以下动作会更新它：

  • 点击网页选区旁的“添加到草稿”；
  • 在扩展编辑器中输入、删除或调整内容；
  • 扩展弹窗卸载前执行草稿保存。

源码没有为草稿设置固定失效时间。退出 Flomo Extension 账户时，当前退出逻辑只删除账户摘要，没有同时清空草稿。

收到 flomo 页面内容脚本返回的正向保存结果后，弹窗会把本地草稿设为空。重要内容应先复制一份，并在 flomo 页面核对结果；清空时机与结果确认方式见《Flomo Extension 保存流程与故障排查》。

哪些内容会保留，哪些不会

原网页内容 加入草稿后的结果 原因
普通文字 保留选区的文字内容 使用选区的纯文本结果
粗体、颜色、字号 不保留原样式 没有复制选区 HTML
超链接 通常只留下可见文字 页面 URL 和链接地址没有被一起读取
图片、视频、附件 不加入草稿 当前消息只传递字符串
页面标题与网址 不自动加入 当前选区流程没有读取这些字段
多个网页片段 按点击顺序追加 后台把每次选择追加为新段落
原网页复杂换行 不保证原结构 整个选区字符串被放进单个段落容器

这意味着该功能更适合“摘取一小段文字，再补充自己的判断”，不适合保存完整网页快照。

代码、尖括号和特殊字符需要检查

当前后台把选区字符串直接插入 <p>...</p>，源码中没有在这一步显式执行 HTML 特殊字符转义。草稿之后又作为 HTML 交给编辑器。

因此，摘录以下内容后应特别检查编辑器结果：

  • 包含 <div>、</script> 等尖括号的代码；
  • 含有 &、<、> 的表达式；
  • 依赖空格、制表符或换行的配置片段；
  • 从在线 IDE、终端或富文本编辑器选取的内容。

不要假设代码会按原样显示。保存前在扩展编辑器中逐字符检查；需要保留格式时，更稳妥的做法是先转成普通说明文字，或在尖括号外增加解释，而不是把扩展当作代码剪贴板。

弹窗编辑器当前支持哪些格式

1.20.0 的工具栏配置包含：

  • 粗体；
  • 下划线；
  • 无序列表；
  • 有序列表；
  • 黄色背景标记；
  • 从 flomo 页面读取的标签；
  • 表情。

编辑器还显示当前文字长度，并尝试保留默认的 #flomo-extension 标签。保存前，黄色背景使用特定的 RGB 样式；发送时，当前代码会把匹配到的样式转换成 <mark> 标签。

这里有三个格式边界：

  1. 只有恰好匹配当前黄色背景样式的内容会执行这次转换；
  2. 标签列表来自已打开的 flomo 页面，页面未连接或结构变化时可能为空；
  3. 源码没有在弹窗配置中设置明确的最大字数，但 flomo 网页仍可能有自己的输入限制，不能据此理解为“无限长度”。

标签列表不可用时，可以直接输入 #标签。如果需要层级标签，先用一条测试笔记确认 flomo 当前网页如何解析。

一个更可靠的摘录模板

只保存原文会让未来的自己难以判断“为什么要留”。可以在扩展草稿中固定加入四项：

#阅读/主题

摘录：
（从网页加入的一小段原文）

我的理解：
（用自己的话说明它为什么重要）

下一步：
（要验证、查找或执行的一件事）

来源：
（手动粘贴页面 URL；必要时写作者和日期）

这个模板同时弥补当前选区功能不自动保留来源的限制。引用他人内容时，应控制摘录长度、注明来源并遵守原网站的版权和使用规则。

隐私边界：读取选区与加入草稿不是同一步

内容脚本因为匹配所有普通网页，可以在页面内响应鼠标选择，并取得当时的选区文本。当前代码只有在用户点击浮动入口后，才把该文本发给扩展后台并写入本地草稿。

本次检查到的选区路径没有调用 Chrome 扩展自身的 Flomo Extension 账户 API。不过，这个结论只描述被核验版本的源码路径，不是对商店安装包、第三方依赖或未来版本的独立保证。不要在密码管理器、支付页面、客户后台等敏感环境中使用选区摘录；不需要该能力时，可以通过 Chrome 的网站访问设置限制扩展运行范围。

完整的权限、Google 登录和账户数据说明见《Flomo Extension 权限与数据流》。

当前没有自动完成的事情

在本次核验范围内，选区工作流没有实现以下能力：

  • 自动保存整篇网页；
  • 自动附带页面标题、URL、作者或发布日期；
  • 保留链接、图片和原网页 CSS；
  • 判断摘录是否重复；
  • 验证用户是否有权转载选中的内容；
  • 为保存到 flomo 的结果生成服务端笔记 ID。

这些不是隐藏功能，而是当前实现的明确边界。了解边界后，可以把扩展用于短摘录和个人思考，而把网页归档、代码片段保存与版权管理交给更合适的工具。

核验范围与版本

本文由 Flomo Extension 项目于 2026 年 8 月 1 日依据版本 1.20.0 源码整理。检查范围包括全网页选区监听、扩展内部消息、后台草稿追加、本地存储、弹窗富文本工具栏和发送前 HTML 转换。未对所有网站进行兼容性测试，也未验证浏览器商店构建包与源码树逐字节一致。