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