Chrome扩展开发系列开篇

  • Chrome扩展开发系列开篇已关闭评论
  • 66 次浏览
  • A+
所属分类:Web前端
摘要

大家好,我是 dom 哥。这是我关于 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 为我们提供的一套功能强大的集开发,调试, 分析诸多功能于一身的内置工具。如下图所示:

Chrome扩展开发系列开篇

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

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

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

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

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

Chrome 应用商店如下图:

Chrome扩展开发系列开篇

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

Chrome 扩展开发 🛠️

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

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

Chrome扩展开发系列开篇

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

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

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

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

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

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

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

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

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

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