Chrome 插件开发实战：一键把当前页面存为 Markdown

Wed, 22 Jan 2025 00:00:00 +0800

从一行代码到 Chrome Web Store 上架。本文用一个具体例子走通 Chrome 插件开发完整流程：manifest.json、content script、popup 通信、文件下载、用户偏好存储、上架审核。

为什么要做这个插件

我经常在浏览器里看技术文章。看到好的想存到 Obsidian，复制粘贴格式全乱。打开"另存为"保存下来是带广告、导航栏、侧边栏的 HTML。想找一个干净的 Markdown 版本，要么没有，要么是闭源插件不敢装。

装个现成插件不放心。写个 userscript 分发麻烦。干脆自己写一个。

这是个"改造已有网站"的小工具，Chrome 插件是最合适的形态。如果你还不确定插件是不是解决你问题的最佳方案，可以先看《Chrome 插件开发》。

我们要做的版本

最终交付一个能本地转、能下载、能存用户偏好的插件：

点击工具栏图标，弹出一个 popup
popup 上一个按钮"保存为 Markdown"
点击后，把当前页面转成干净的 Markdown，触发下载
几个 checkbox 让用户自定义：是否包含图片、是否包含代码块、文件名格式

这个版本足够简单，又覆盖了插件开发的核心链路：content script、popup 通信、文件下载、用户偏好存储。

准备工作

需要：

Chrome 浏览器（任何最近版本都行）
一个空文件夹
一个文本编辑器

不需要：

Node.js
npm
任何前端框架
任何构建工具

整个项目就是几个静态文件，加一个第三方库。装一个依赖就要搭构建，搭构建就要讲 webpack / vite / TypeScript，整个文章会跑偏。

第三方库：Turndown.js

用来把 HTML 转成 Markdown。同类插件 80% 在用，成熟稳定。

下载地址：https://unpkg.com/turndown@7.2.0/dist/turndown.js

下载下来保存到 vendor/turndown.js（自己创建 vendor 目录）。

项目结构：

 1markdown-saver/
 2├── manifest.json
 3├── content.js
 4├── popup.html
 5├── popup.js
 6├── icons/
 7│ ├── icon16.png
 8│ ├── icon32.png
 9│ ├── icon48.png
10│ └── icon128.png
11└── vendor/
12 └── turndown.js

图标先随便找 4 张占位图（每个尺寸一张），后面会讲商店要求。

JavaScript on Leanku 的博客

Chrome 插件开发实战：一键把当前页面存为 Markdown

为什么要做这个插件

我们要做的版本

准备工作