DOM to Markdown

DOM to Markdown 浏览器扩展

DOM to Markdown 是一款面向开发者、内容创作者和文档写作者的 Chrome / Edge 浏览器扩展，可以在页面侧边栏将选定的 DOM 元素一键转换为 Markdown，并提供编辑、预览和导出等完整的写作工作流支持。

Chrome Web Store 链接
Edge Add-ons 链接

插件界面预览

DOM to Markdown 浏览器扩展界面预览

核心功能特性

  • DOM 点选：在网页上直接点击任意 DOM 元素作为转换源，例如文章正文区域、评论列表、文档内容区域等。
  • 格式转换：基于 turndown 将 HTML 自动转换为 Markdown，支持 GitHub Flavored Markdown（GFM），比如表格、列表、链接、代码块等常见结构。
  • 编辑与预览：
    • 在侧边栏中实时编辑生成的 Markdown 文本。
    • 提供 GitHub 风格渲染预览，方便直接查看最终效果。
  • 导出选项：
    • 导出为 .md 文件，方便保存到本地或同步到知识库。
    • 导出为独立 .html 文件，内联样式，无外部依赖，可直接发送或收藏。
    • 导出为 .png 图片，适合用于截图分享或文档嵌入。
  • 多语言支持：自动检测浏览器语言，目前支持英语和简体中文界面。

使用场景示例

  • 将技术博客或文档网站中的某一段内容提取为 Markdown，直接粘贴到自己的笔记或项目 Wiki 中。
  • 在阅读长篇文章时，只提取核心部分为 Markdown，方便后续整理、标注和再创作。
  • 处理设计规范、接口文档、产品说明页面，把网页内容转换成标准 Markdown，以便存入 Git 仓库或知识库系统。
  • 将网页内容转为 Markdown 后导出为 HTML 或图片，用于分享给不熟悉 Markdown 的同事或客户。

基本使用流程

下面以典型的「从网页中提取一段正文为 Markdown」流程为例，说明插件的使用方式。

1. 打开扩展侧边栏

  • 安装扩展后，在浏览器工具栏中找到 DOM to Markdown 图标。
  • 点击图标，在支持的浏览器中可以打开扩展侧边栏面板。

2. 在页面中选择 DOM 元素

  • 在側边栏中点击「开始选择」按钮（具体文案以实际界面为准）。
  • 鼠标移动到页面内容区域时，高亮显示当前可选中的 DOM 区块。
  • 点击目标区域（例如正文容器、评论区、文档内容区），扩展会抓取这个 DOM 作为转换源。

3. 自动转换为 Markdown

  • 选择完成后，扩展会使用 turndown 将对应的 HTML 内容转换为 Markdown。
  • 转换结果会自动填充到侧边栏中的 Markdown 编辑器中。
  • 标题、列表、代码块、链接、表格等常见结构会尽量保留对应的 Markdown 语义。

4. 实时编辑与预览

  • 您可以直接在 Markdown 编辑区域中修改内容，例如补充批注、调整结构、添加个人总结等。
  • 预览区会以 GitHub 风格实时渲染当前 Markdown，方便对照查看最终效果。

5. 导出为文件或图片

当内容整理完成后，可以根据需要选择不同的导出方式：

  • 导出为 .md 文件：
    • 适合后续导入 Obsidian、Logseq、Notion（支持 Markdown 的部分）、Git 仓库等。
  • 导出为 .html 文件：
    • 生成一个包含内联样式的独立 HTML 文件，无需加载外部 CSS。
    • 适合发送邮件附件、归档或在本地以「纯静态页面」形式查看。
  • 导出为 .png 图片：
    • 按预览区的样式生成图片，方便粘贴到 IM 工具、报告或幻灯片中。

国际化与语言支持

  • DOM to Markdown 会在启动时检测浏览器的语言设置：
    • 如果为简体中文（如 zh-CN），界面会默认显示中文。
    • 如果为英文或其他语言，则回退为英文界面。
  • 后续版本可能会逐步增加更多语言支持，欢迎通过下方联系方式提交建议。

常见问题 FAQ

DOM to Markdown 和现有的在线 Markdown 转换工具有什么区别？

  • 传统在线工具通常需要你手动复制整段 HTML 或网页源码，然后粘贴到转换框中。
  • DOM to Markdown 直接在浏览器中运行，可以「点选页面某一块 DOM」作为转换源，更直观、更精确。
  • 转换、编辑、预览、导出全部在本地浏览器中完成，不依赖远程服务器，更适合处理包含敏感信息的页面内容。

插件会修改网页内容吗？

  • 插件默认只读取并解析你选中的 DOM 内容，不会对原始网页做破坏性的修改。
  • 少数情况下，为了实现高亮、选区提示等功能，可能会临时添加样式或辅助元素，但不会影响页面的正常功能和数据。

支持哪些浏览器？

  • 当前主要支持基于 Chromium 内核的浏览器，例如：
    • Google Chrome
    • Microsoft Edge
  • 其他 Chromium 浏览器（如 Brave、Vivaldi 等）理论上也可以安装使用，具体以各浏览器对扩展商店和 Manifest 的兼容情况为准。

能否选择多个区域一起转换？

  • 首版侧重于「针对单个主要内容区域」的转换体验。
  • 如果需要将多个区域内容合并，可以分多次选择并复制生成的 Markdown 到同一个笔记文档中。
  • 后续版本可能会考虑支持多选或「按规则选区」等高级功能。

图片、视频等富媒体内容如何处理？

  • 图片一般会转换为标准 Markdown 图片语法，例如 ![alt](url)。
  • 视频、音频等复杂组件会尽量保留为链接或简单的占位内容，避免生成无法在 Markdown 环境中直接渲染的结构。
  • 如果目标是做「纯文本笔记」，建议在转换后手动整理、删除不必要的富媒体元素。

插件是否收集我的任何数据？

  • DOM to Markdown 的核心设计是本地处理，不收集、不上传、不追踪任何个人信息。
  • 所有转换过程都在浏览器本地完成，你选中的 DOM 内容不会被发送到我们的服务器。
  • 具体说明可参考本站的《浏览器插件隐私政策》页面。

支持哪些 Markdown 特性？

  • 插件依赖 turndown 并针对 GitHub Flavored Markdown（GFM）做了适配，常见支持包括：
    • 标题（# ~ ######）
    • 有序 / 无序列表
    • 链接与图片
    • 行内代码与代码块
    • 引用块
    • 表格（在可识别的情况下尽量转换）

导出的 HTML 能直接用来发布吗？

  • 导出的 HTML 是一个内联样式的静态页面，适合作为「预览」或「分享」使用。
  • 如果你有自己的站点或博客系统，通常建议还是以 Markdown 为源，在构建流程中再统一渲染为 HTML。

后续计划与反馈

  • 计划支持更多快捷键与「一键复制为 Markdown」功能。
  • 考虑增加简单的模板功能，方便将提取的内容快速套用到固定结构的笔记或文档中。
  • 支持更多语言界面和更丰富的导出样式主题。

如果你在使用过程中有任何想法、问题或建议，欢迎通过站点中的联系方式与我反馈，一起把 DOM to Markdown 打磨成更好用的网页内容整理工具。