现如今的时代,绝大多数人都要跟浏览器打交道的,说到浏览器那肯定是Chrome
浏览器一家独大,具体数据请看👇
知名流量监测机构 Statcounter 公布了 7 月份全球桌面浏览器市场份额,主要数据如下:
浏览器 | 市场份额 | 月涨跌份额 |
---|---|---|
Chrome | 66.19% | -0.74% |
Edge | 10.84% | +0.2% |
Safari | 8.94% | +0.01% |
Firefox | 8.08% | +0.28% |
Opera | 3.06% | +0.08% |
IE | 0.75% |
浏览器扩展插件的用途
chrome://dino/
)游戏,想必都玩过)
总之扩展程序让浏览器的功能更加强大,更加贴合用户使用。不管是不是软件开发人员,或多或少都会使用到浏览器扩展插件,常见的比如:书签、网页翻译、广告屏蔽......
学习Chrome扩展插件势在必行🏃♂️🐱🏍
扩展程序是基于 Web 技术(如 HTML、CSS 和 JavaScript)构建的软件程序,使用户能够自定义 Chrome 浏览体验。(前端开发人员技能范围之内😁😁)
本文从应用着手,通过讲解扩展插件的特性来启发读者对其进一步探索。
要创建扩展,您需要组合一些资源清单: manifest.json
、 JavaScript
、 HTML
和 CSS
文件、图片等。
Chrome扩展文件以.crx为后缀名,.crx实际上是一个压缩文件,使用解压文件打开这个文件就可以看到其中的文件目录
下图是 Axure
扩展插件原文件:
因此可以认为,我们实际上就是写一个Web应用,然后将按照Chrome的规定将一个快捷方式放在Chrome工具栏上。如下图:
上图中左边地址栏内部的按钮是page action(Chrome插件,直接内置在Chrome里的),右边地址栏外部的是 browser action(Chrome 扩展插件)
对于开发和测试,您可以使用扩展开发者模式将这些“解压”加载到 Chrome 中,或者直接拖动crx
文件到管理扩展插件页面。如果扩展感到满意,也可以打包并分享给小伙伴使用。
popup.html
可以在里面放置任何html
元素,它的宽度是自适应的。当然,这个弹出窗口不会被Chrome拦截
下图是 FeHelper
扩展插件的弹出窗👇
Chrome扩展插件中比较核心的几个概念:Extension Page
、background.js
、content_script.js
下图展示他们之间的关系,以及如何通信
(图片来源网络,侵删)
运行时的三个进程:
Extension Page
,主要包括backgrount.html
和popup.html
, backgrount.html
中没有任何内容,是通过background.js
创建生成,当浏览器打开时,会自动加载插件的background.js文件,它独立于网页并且一直运行在后台,它主要通过调用浏览器提供的API和浏览器进行交互
popup.html
有内容的,跟我们普通的web页面一样,由html
、css
、Javascript
组成,它是按需加载的,需要用户去点击地址栏的按钮去触发,才能弹出页面。
Web Page
,当打开页面时,会将content_script.js
加载并注入到该网页的环境中,它和网页中引入的Javascript
一样,可以操作该网页的DOM Tree
,改变页面的展示效果
Extension Page
和content_script.js
之间的消息通信。
本文介绍的是 chrome 扩展基础知识,相信看完以上之后,你会对 Chrome 扩展插件有了一个比较清晰的认识。相信chrome扩展会大有作为,会不会迫不急待的要体验一下呢🤔,我根据Chrome插件开发官网示例写的一个小扩展插件,点击这里查看项目。
🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。
🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉
🎁 欢迎大家评论交流, 蟹蟹😊