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

从一行代码到 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....

2025年01月22日 · 8 min · Leanku