Chrome扩展开发系列开篇

大家好，我是 dom 哥。这是我关于 Chrome 扩展开发的系列文章，感兴趣的可以 点个小星星。

浏览器现状 🌍

研究机构 Statcounter 发布了 2023 年 9 月报告，揭示了有关浏览器的最新统计数据。

浏览器 市场份额 Chromium-based?
Chrome 63.56% Yes
Safari 19.85% No
Edge 5.43% Yes
Firefox 2.94% No
Opera ... Yes

可以看到基于 Chromium 的浏览器占了全球市场的 7 成！

对于前端开发来说，Chrome 更是形影不离的饭碗级软件 😁。既然 Chrome 这么重要，那么把它研究透一定大有裨益。

在我看来，Chrome 值得深入研究的地方早有两块：DevTools 和 Extension。

先说说 DevTools，即开发者工具，是 Chrome 为我们提供的一套功能强大的集开发，调试， 分析诸多功能于一身的内置工具。如下图所示：

像 Elements，Console，Sources， Network，Application 这些都是日常开发调试离不开的功能面板。但是我们开发者对 DevTools 的主要研究内容是怎么用。因为这些强大的功能面板都是 Chrome 内置的，作为开发者使用者，只能用，不能动代码。

然后是 Extension，即 Chrome 扩展，是留给广大开发者自由发挥的天地。

  • 想给一些页面注入 js，css？
  • 想跨浏览器的页签运行一个后台服务？
  • 想自定义新打开的标签页？
  • 想实现什么天马行空的想法？

这些都可以通过 Chrome 扩展实现！Chrome 为扩展程序提供了大量 chrome.* API 用于开放 Chrome 的能力。

大家开发的扩展可以发布到 Chrome 应用商店供海量用户选择，就像苹果的 App Store 一样！

Chrome 应用商店如下图：

甚至，如果天时地利人和，你甚至可以通过 Chrome 扩展赚点零花钱 💰 也不是不可能，不过别抱太大希望哦 😅

Chrome 扩展开发 🛠️

学习一门技术，最好的方式就是去官网，看官方文档，跟着官方文档边看边练，这是不会错的路子。

Chrome Extension 也不例外。Chrome 官方为其扩展开发提供了详尽的文档，奈何，全是英文啊～，看的我四级词汇都不够用了：

不但有文档，每个功能特性都提供了示例代码，简直不要太贴心～

总结，梳理，写系列教程 📚

记得刚接触到 Chrome Extension 时它还是 manifest V2 版本，当时是想做一个 Chrome 扩展，通过拦截网络请求修改其 header 突破跨域限制。时过境迁，如今已是 manifest V3 版本，Chrome 对 webRequest 的细则已做了调整，当初写的代码即将不再支持运行 🥹。

还折腾过一个录制页面操作的扩展，记录下鼠标点击和表单输入等操作，可以重放，模拟这些操作再还原页面状态。后来清理磁盘，居然 TMD 手贱把项目清理掉了，大腿拍青，切记 git push 大于天啊！如今 Chrome 已经有了 Recorder 工具，和我当时的目标类似，只不过我当时的做法是直接用 content_scripts 在页面上重放，而不是在 Puppeteer 里去重放。

期间还为了各种小用途开发过十几个功能不一的扩展程序。现在主要是维护一个辅助日常开发，和业务高耦合的扩展。

但，几年下来，虽写了不少扩展程序，但总感觉零碎，所以我决定把有关 Chrome 扩展开发的东西系统的梳理总结起来，通过沉淀成一份系列教程，建立起知识体系，成为自己的核心竞争力。

目前心中的大纲简单罗列如下，勾上的是已完成的：

后续慢慢完善吧，轮廓已成，细节可以慢慢雕琢。

Chrome 扩展开发似乎是个冷门，不过也可以理解，对前端开发来说，这属于一种有了更好，没有也罢的技术，就算不助我开发，也不影响我开发😂。不管怎么样，我都想坚持下去，其实我现在是奔着写一本小册的标准去的，说不定未来某天我真的会出本小册。毕竟 35 岁危机不是闹着玩儿的，提前搞搞副业总是好的，加油哟～

觉得不错可以 点个小星星 支持一下哦 🌹

posted @ 2023-12-19 09:54  dombro  阅读(764)  评论(0)  编辑  收藏  举报