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 张占位图（每个尺寸一张），后面会讲商店要求。

Chrome 插件开发

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

从一个真实问题开始

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

于是我开始想：我能不能自己写一个？

这是个典型的"想动手"时刻。但真正动手之前，有几个更前置的问题需要想清楚：

Chrome 插件到底是什么？和 userscript、网页工具、PWA 差在哪？
我想做的这个事，到底该用哪种形态？
学 Chrome 插件的"投资回报"如何？是一次性投入还是持续折腾？

写这篇文章的目的，是在你打开 manifest.json 之前，帮你想清楚这三个问题。

插件是什么

先把"插件"这个词拆开看。

Chrome 插件（Chrome Extension），也叫浏览器扩展，本质上是一段运行在 Chrome 浏览器里的代码。它能访问一些普通网页拿不到的 API，比如读取当前标签页的 URL、修改请求头、在用户点击工具栏图标时弹出一个小页面。

可以把它理解为：

插件 = 对浏览器的扩展能力 + 对已有网站的增强能力

注意两个关键词：“对浏览器” 和 “对已有网站”。这两个词决定了插件能做什么、不能做什么。

对浏览器意味着插件能拿到浏览器层面的能力，比如：

操作标签页（关闭、新建、切换）
读取和修改浏览器历史
拦截和修改网络请求
在工具栏添加图标
监听键盘快捷键

对已有网站意味着插件的核心战场是"改造现有网站"，比如：

给维基百科加一个深色模式
给 GitHub 加一个一键复制文件链接的按钮
给掘金、知乎、CSDN 屏蔽某些干扰元素

插件能做什么、不能做什么

能做的：

改造已有网站（修改 DOM、注入脚本）
提供一个常驻工具栏入口（点击图标触发动作）
跨页面保存数据（用户的偏好、笔记、历史）
监听浏览器事件（标签页变化、下载事件）

不能做（或做起来很费劲）：

完全独立的产品（需要服务端配合的复杂功能）
移动端体验（Chrome 插件不适用于移动浏览器）
高性能要求的事（不适合跑复杂的计算任务）
跨浏览器一致体验（Firefox、Edge、Safari 各有差异）

什么时候该用插件

给几个真实场景，帮你判断。

适合用插件的场景：

改造已有网站：给某个你不喜欢的网站加功能或去干扰
跨页面工具：复制当前页面内容、抓取数据、自动填表
浏览器层的小工具：标签页管理、下载管理、截图、翻译
给开发者自己用：调试、API 测试、页面抓取

不适合用插件的场景：

前端 on Leanku 的博客