前端 | Leanku

从一行代码到 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 目录）。项目结构： markdown-saver/ ├── manifest.json ├── content....

从一个真实问题开始我经常在浏览器里看技术文章。看到好的想存到 Obsidian，复制粘贴格式全乱。打开"另存为"保存下来是带广告、导航栏、侧边栏的 HTML。想找一个干净的 Markdown 版本，要么没有，要么是闭源插件不敢用。于是我开始想：我能不能自己写一个？这是个典型的"想动手"时刻。但真正动手之前，有几个更前置的问题需要想清楚： Chrome 插件到底是什么？和 userscript、网页工具、PWA 差在哪？我想做的这个事，到底该用哪种形态？学 Chrome 插件的"投资回报"如何？是一次性投入还是持续折腾？写这篇文章的目的，是在你打开 manifest.json 之前，帮你想清楚这三个问题。插件是什么先把"插件"这个词拆开看。 Chrome 插件（Chrome Extension），也叫浏览器扩展，本质上是一段运行在 Chrome 浏览器里的代码。它能访问一些普通网页拿不到的 API，比如读取当前标签页的 URL、修改请求头、在用户点击工具栏图标时弹出一个小页面。可以把它理解为：插件 = 对浏览器的扩展能力 + 对已有网站的增强能力注意两个关键词：“对浏览器” 和 “对已有网站”。这两个词决定了插件能做什么、不能做什么。对浏览器意味着插件能拿到浏览器层面的能力，比如：操作标签页（关闭、新建、切换）读取和修改浏览器历史拦截和修改网络请求在工具栏添加图标监听键盘快捷键对已有网站意味着插件的核心战场是"改造现有网站"，比如：给维基百科加一个深色模式给 GitHub 加一个一键复制文件链接的按钮给掘金、知乎、CSDN 屏蔽某些干扰元素插件能做什么、不能做什么能做的：改造已有网站（修改 DOM、注入脚本）提供一个常驻工具栏入口（点击图标触发动作）跨页面保存数据（用户的偏好、笔记、历史）监听浏览器事件（标签页变化、下载事件）不能做（或做起来很费劲）：完全独立的产品（需要服务端配合的复杂功能）移动端体验（Chrome 插件不适用于移动浏览器）高性能要求的事（不适合跑复杂的计算任务）跨浏览器一致体验（Firefox、Edge、Safari 各有差异）什么时候该用插件给几个真实场景，帮你判断。适合用插件的场景：改造已有网站：给某个你不喜欢的网站加功能或去干扰跨页面工具：复制当前页面内容、抓取数据、自动填表浏览器层的小工具：标签页管理、下载管理、截图、翻译给开发者自己用：调试、API 测试、页面抓取不适合用插件的场景：...