拒绝手动搬砖！我撸了一个能把网页秒变 Markdown 的“神仙”插件
标签： #Chrome扩展 #Markdown #前端开发 #TypeScript #生产力工具 分类： 前端 / 开发工具
💡 痛点：为什么我需要一个更好的 Markdown 转换器？
作为一个“仓鼠症”晚期的技术博主，我每天都会在网上看到大量优秀的技术文章。为了方便日后查阅和沉淀知识，我习惯将它们保存到本地的 Markdown 库中。
但这个过程简直是搬砖现场：
- 格式全丢：直接复制粘贴，标题变成了加粗，代码块变成了普通文本。
- 图片杀手：好不容易整理完，过几个月打开一看，图片全是 404（防盗链或原站挂了）。
- 结构混乱：侧边栏、广告、评论区混杂在一起，手动清理简直要命。
- 链接追踪：URL 后面带着一长串
utm_source=...，强迫症表示不能忍。
我尝试过市面上现有的工具，要么提取不够智能，要么对图片的处理极其敷衍。既然没有完美的，那就自己动手，丰衣足食！于是，MD Pro 诞生了。
🚀 MD Pro：你的网页“净化”与“转换”专家
MD Pro 不仅仅是一个转换器，它更像是一个懂你的智能过滤器。它能帮你把凌乱的 HTML 页面瞬间变成一份整洁、标准、带元信息的 Markdown 文件。
1. 像“手术刀”一样精准的正文提取
我集成了 Mozilla 开源的 Readability 算法（就是 Firefox 阅读模式背后的那个英雄）。它能像手术刀一样，精准切掉导航栏、广告、弹窗，只保留文章的灵魂——正文。
2. 拒绝“图裂”，两种图片保命方案
这是 MD Pro 的核心竞争力。针对图片问题，我提供了两种“止痛药”：
- 内联模式 (Base64)：把图片直接编进 Markdown。优点是单文件搞定一切，发给谁都能看，永远不怕图裂；缺点是文件会变大。
- ZIP 打包模式：图片原样下载，与 Markdown 文件一起打包成 ZIP。这是本地知识库的最佳选择，既保证了图片离线可用，又保持了 Markdown 文件的清爽。
3. 强迫症福音：链接自动清理
它会自动扫描文章里的所有链接，把那些讨厌的 utm_ 追踪参数全部剔除，还你一个干净的 URL 存档。
🛠️ 功能亮点一览
- 一键触发：点击图标、右键菜单、或者一个帅气的快捷键
Cmd+Shift+Y(Mac) /Ctrl+Shift+Y(Win)。 - 命名一键生成：支持
{title}、{date}、{site}等变量，自动生成你想要的文件名。 - 自动 Frontmatter：抓取时自动生成 YAML 格式的元信息（标题、来源、抓取时间），完美适配 Obsidian、Hugo 等工具。
🧱 技术栈揭秘：如何构建一个现代化的 Chrome 插件？
作为一名开发者，除了好用，开发体验也得爽。MD Pro 的底层架构非常现代：
- Manifest V3：紧跟 Chrome 官方步伐，采用最新的插件架构，性能更强，安全性更高。
- TypeScript + Vite：类型安全保命，Vite 带来的秒级热更新让调试插件不再痛苦。
- Turndown + GFM 插件：确保转换出的 Markdown 完美支持 GitHub 风格，尤其是表格和任务列表。
- JSZip：在浏览器端完成打包，不经过任何后端服务器，保护隐私的同时效率极高。
🎁 立即尝试
方法：从 GitHub 仓库拉取代码，本地安装
1. 获取代码 -GitHub: [github.com/tingyu9315/…] ⭐ 如果对您有帮助，欢迎 Star
2. 安装扩展（本地加载）
- 打开 Chrome，地址栏输入
chrome://extensions/ - 右上角开启“开发者模式”
- 点击“加载已解压的扩展程序”
- 选择插件目录
dist - 安装完成
小贴士：Side Panel 依赖较新版本 Chrome，建议 114+。
🌈 未来展望
这只是 MD Pro 的 1.0 版本，未来我还计划加入：
- 📂 批量处理：一键把所有打开的标签页都转了。
- 🎨 更多格式：PDF、Word 导出支持。
- 🖼️ 图片压缩：在 Base64 转换前进行智能压缩，减小文件体积。
结语
MD Pro 是为了解决我自己的真实需求而生的，它让我的知识采集过程从“体力活”变成了“技术活”。如果你也受够了手动搬砖，欢迎试试这个小工具。
如果你觉得这个项目对你有帮助，欢迎点个 Star 或者在评论区留言交流！
- GitHub: [github.com/tingyu9315/…]
- 开源协议: MIT
