技术 - DevOps on Loen bloghttps://blog.loen.top/posts/tech-frontend/Recent content in 技术 - DevOps on Loen blogHugozh-CN浏览器插件开发https://blog.loen.top/posts/tech-frontend/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/Mon, 15 Dec 2025 10:11:10 +0800https://blog.loen.top/posts/tech-frontend/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91/<h2 id="-官方文档和教程">📚 <strong>官方文档和教程</strong></h2> <h3 id="1-核心官方文档"><strong>1. 核心官方文档</strong></h3> <ul> <li><strong><a href="https://developer.chrome.com/docs/extensions">Chrome Extensions Developer Guide</a></strong> - <strong>必读起点</strong> <ul> <li>最权威、最完整的官方文档</li> <li>包含Manifest V3的完整迁移指南</li> </ul> </li> <li><strong><a href="https://developer.chrome.com/docs/extensions/reference">Chrome Extensions API Reference</a></strong> - API查询手册</li> <li><strong><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">MDN WebExtensions Guide</a></strong> - 跨浏览器标准</li> </ul> <h3 id="2-官方教程和示例"><strong>2. 官方教程和示例</strong></h3> <ul> <li><strong><a href="https://developer.chrome.com/docs/extensions/get-started">Getting Started Tutorial</a></strong> - 5分钟创建第一个插件</li> <li><strong><a href="https://github.com/GoogleChrome/chrome-extensions-samples">Extension Samples GitHub</a></strong> - <strong>黄金资源！</strong> <ul> <li>100+个官方示例项目</li> <li>按功能分类，代码质量高</li> <li>适合直接学习复制</li> </ul> </li> </ul> <h2 id="-学习路径推荐">🚀 <strong>学习路径推荐</strong></h2> <h3 id="阶段1基础入门1-2周"><strong>阶段1：基础入门（1-2周）</strong></h3> <ol> <li><strong>官方Hello World</strong> - 了解基础结构</li> <li><strong>阅读Manifest V3文档</strong> - 理解新版变化</li> <li><strong>尝试简单插件</strong>：如页面背景色修改器</li> </ol> <h3 id="阶段2核心概念2-3周"><strong>阶段2：核心概念（2-3周）</strong></h3> <ol> <li><strong>内容脚本 vs 后台脚本</strong></li> <li><strong>消息传递机制</strong></li> <li><strong>存储API使用</strong></li> <li><strong>权限系统实践</strong></li> </ol> <h3 id="阶段3实战项目1-2个月"><strong>阶段3：实战项目（1-2个月）</strong></h3> <p>从简单到复杂逐步实践</p> <h2 id="-优秀开源项目推荐">🌟 <strong>优秀开源项目推荐</strong></h2> <h3 id="a-初学者友好型"><strong>A. 初学者友好型</strong></h3> <table> <thead> <tr> <th>项目</th> <th>简介</th> <th>学习重点</th> </tr> </thead> <tbody> <tr> <td><strong><a href="https://github.com/lumariver/reading-time-extension">Reading Time</a></strong></td> <td>显示文章阅读时间</td> <td>内容脚本、DOM操作</td> </tr> <tr> <td><strong><a href="https://github.com/bitwarden/browser">Tab Manager</a></strong></td> <td>简单的标签页管理</td> <td>tabs API、弹出页面</td> </tr> <tr> <td><strong><a href="https://github.com/simov/markdown-viewer">Markdown Viewer</a></strong></td> <td>查看Markdown文件</td> <td>文件访问、内容渲染</td> </tr> </tbody> </table> <h3 id="b-中级项目推荐重点学习"><strong>B. 中级项目（推荐重点学习）</strong></h3> <table> <thead> <tr> <th>项目</th> <th>简介</th> <th>技术栈</th> <th>学习价值</th> </tr> </thead> <tbody> <tr> <td><strong><a href="https://github.com/tulios/json-viewer">JSON Viewer</a></strong></td> <td>JSON格式化查看器</td> <td>Content Script、样式隔离</td> <td>⭐⭐⭐⭐⭐</td> </tr> <tr> <td><strong><a href="https://github.com/webclipper/web-clipper">Web Clipper</a></strong></td> <td>网页剪辑工具</td> <td>复杂DOM操作、截图</td> <td>⭐⭐⭐⭐</td> </tr> <tr> <td><strong><a href="https://github.com/darkreader/darkreader">Dark Reader</a></strong></td> <td>黑暗模式插件</td> <td>高性能CSS注入、主题系统</td> <td>⭐⭐⭐⭐⭐</td> </tr> <tr> <td><strong><a href="https://github.com/ovity/octotree">Octotree</a></strong></td> <td>GitHub文件树</td> <td>复杂UI、API调用</td> <td>⭐⭐⭐⭐</td> </tr> </tbody> </table> <h3 id="c-大型完整项目"><strong>C. 大型完整项目</strong></h3> <table> <thead> <tr> <th>项目</th> <th>简介</th> <th>技术栈</th> <th>特色</th> </tr> </thead> <tbody> <tr> <td><strong><a href="https://github.com/1Password/1password-browser-extension">1Password</a></strong></td> <td>密码管理器</td> <td>React、TypeScript、加密</td> <td>企业级代码质量</td> </tr> <tr> <td><strong><a href="https://github.com/gorhill/uBlock">uBlock Origin</a></strong></td> <td>广告拦截器</td> <td>高性能过滤、规则引擎</td> <td>性能优化典范</td> </tr> <tr> <td><strong><a href="https://github.com/Tampermonkey/tampermonkey">Tampermonkey</a></strong></td> <td>用户脚本管理器</td> <td>沙箱、脚本执行</td> <td>插件中的插件</td> </tr> <tr> <td><strong><a href="https://github.com/bitwarden/browser">Bitwarden</a></strong></td> <td>开源密码管理器</td> <td>跨平台、加密</td> <td>完整产品体验</td> </tr> </tbody> </table> <h2 id="-开发工具和框架">🛠️ <strong>开发工具和框架</strong></h2> <h3 id="1-脚手架工具"><strong>1. 脚手架工具</strong></h3> <ul> <li><strong><a href="https://github.com/dutiyesh/chrome-extension-cli">chrome-extensions-cli</a></strong> - 快速创建项目</li> <li><strong><a href="https://docs.plasmo.com/">plasmo</a></strong> - 现代化框架（推荐！） <ul> <li>支持React、TypeScript</li> <li>热重载、自动构建</li> </ul> </li> </ul> <h3 id="2-开发辅助工具"><strong>2. 开发辅助工具</strong></h3> <ul> <li><strong><a href="https://chrome.google.com/webstore/detail/extensions-developer-too/ohmmkhmmmpcnpikjeljgnaoabkaalbgc">Extension Developer Tools</a></strong></li> <li><strong><a href="https://chrome.google.com/webstore/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin">CRX Viewer</a></strong></li> </ul> <h3 id="3-实用库"><strong>3. 实用库</strong></h3> <ul> <li><strong><a href="https://github.com/mozilla/webextension-polyfill">webextension-polyfill</a></strong> - 跨浏览器兼容</li> <li><strong><a href="https://github.com/acvetkov/chrome-extension-async">chrome-extension-async</a></strong> - Promise化API</li> </ul> <h2 id="-优质学习资源">📖 <strong>优质学习资源</strong></h2> <h3 id="1-视频教程"><strong>1. 视频教程</strong></h3> <ul> <li><strong><a href="https://youtu.be/ikB2_0dvbYU">Chrome Extensions Crash Course</a></strong> - Traversy Media</li> <li><strong><a href="https://youtu.be/4Qy3F7cL8jI">Build a Chrome Extension</a></strong> - Fireship</li> </ul> <h3 id="2-博客和文章"><strong>2. 博客和文章</strong></h3> <ul> <li><strong><a href="https://zhuanlan.zhihu.com/p/59996584">Chrome Extensions 开发全攻略</a></strong> - 中文详细教程</li> <li><strong><a href="https://developer.chrome.com/docs/extensions/mv3/intro/">Manifest V3 迁移指南</a></strong> - 必读</li> </ul> <h3 id="3-社区"><strong>3. 社区</strong></h3> <ul> <li><strong><a href="https://groups.google.com/a/chromium.org/g/chromium-extensions">Chrome Extensions Forum</a></strong></li> <li><strong><a href="https://stackoverflow.com/questions/tagged/google-chrome-extension">Stack Overflow - chrome-extension tag</a></strong></li> </ul> <h2 id="-实战学习建议">🎯 <strong>实战学习建议</strong></h2> <h3 id="第一步分析简单项目"><strong>第一步：分析简单项目</strong></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span><span class="lnt">5 </span><span class="lnt">6 </span><span class="lnt">7 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># 1. 克隆一个简单项目</span> </span></span><span class="line"><span class="cl">git clone https://github.com/GoogleChrome/chrome-extensions-samples </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl"><span class="c1"># 2. 重点研究这些示例：</span> </span></span><span class="line"><span class="cl">- examples/hello-world/ </span></span><span class="line"><span class="cl">- examples/page-redder/ </span></span><span class="line"><span class="cl">- examples/tabs-manager/ </span></span></code></pre></td></tr></table> </div> </div><h3 id="第二步动手修改"><strong>第二步：动手修改</strong></h3> <ol> <li>选一个简单示例</li> <li>逐行理解代码</li> <li>尝试添加新功能</li> <li>调试和测试</li> </ol> <h3 id="第三步自己从头创建"><strong>第三步：自己从头创建</strong></h3> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="c1"># 使用Plasmo脚手架</span> </span></span><span class="line"><span class="cl">npm create plasmo@latest </span></span><span class="line"><span class="cl"><span class="c1"># 选择TypeScript + React</span> </span></span></code></pre></td></tr></table> </div> </div><h2 id="-代码学习技巧">🔍 <strong>代码学习技巧</strong></h2> <h3 id="阅读开源项目时关注"><strong>阅读开源项目时关注：</strong></h3> <ol> <li><strong>目录结构</strong> - 如何组织代码</li> <li><strong>manifest.json</strong> - 权限配置</li> <li><strong>消息传递流程</strong> - content ↔ background ↔ popup</li> <li><strong>错误处理</strong> - 如何优雅处理异常</li> <li><strong>安全性</strong> - 如何保护用户数据</li> </ol> <h3 id="特别推荐的代码阅读清单"><strong>特别推荐的代码阅读清单：</strong></h3> <ol> <li><strong><a href="https://github.com/tulios/json-viewer">JSON Viewer</a></strong> - 学习内容脚本最佳实践</li> <li><strong><a href="https://github.com/darkreader/darkreader">Dark Reader</a></strong> - 学习性能优化</li> <li><strong><a href="https://github.com/1Password/1password-browser-extension">1Password</a></strong> - 学习企业级架构</li> </ol> <h2 id="-快速上手练习">💡 <strong>快速上手练习</strong></h2> <h3 id="练习1修改页面样式"><strong>练习1：修改页面样式</strong></h3> <p>创建一个改变所有网站背景色的插件</p>