【谷歌插件】基本原理

1、认识插件

浏览器插件,又被称为扩展程序,顾名思义就是在浏览器原有的功能上,扩展一些其他功能,像跨域、代理什么的,也可以开发属于你们的特色插件。

插件有两种安装方式,1、谷歌扩展程序商店下载,2、本地安装。无论下载的插件还是本地安装的插件,都会作为本地文件应用在你的浏览器中,注意是本地文件,就算没有网络也可以访问的本地文件。

这是一个本地插件文件

这是谷歌扩展程序页面

打开右上角开发者模式,把插件拖入扩展程序页面,就可以在页面中使用插件赋予的功能,划词、链接、常驻头像、侧边框等等

作为开发者,这些功能是怎么实现的呢,我们先来了解插件的原理。

2、了解插件

背景

我们从浏览器说起,浏览器会有一个后台 - background,它会在你的计算机中默默运行,相当于人体的大脑,用于发送指令、统筹全局,background的强大甚至可以读取任何页面cookie,当然是在用户同意的前提下。大脑有了,然后就是其他组成部分了,----页签,页签指的是浏览器每个页面标签,如图下图。这些页签相当于人体的各个器官,组成一个完整的浏览器。页签里面就是页面。

那么,大脑可以做什么?操作身体。background可以干什么?操作页签。

谷歌插件开发,主要分为四个模块:background、content-script、side、popup。

background:生命周期最长,会一直运行在浏览器的后台,除非插件卸载或者是浏览器卸载。功能强大,可以使用浏览器的绝大多数API。比如说关闭某个页签、打开某个页签、访问页签的icon、访问页签的url、访问页签的title、访问页签中的cookie等等,也可以监听某个页签关闭、打开、刷新、切换等事件。

content-script:注入页面的内容,谷歌浏览器的每个页签都对应一个页面,页面中的内容就是content-script,谷歌提供开发者强大的权限,我们可以修改页面中的任何内容!没错是任何内容!如图中所示,我在页面中植入了一个划词搜索框、常驻头像、还有一个列表元素:

popup:浮框,独立的,对应任何一个页签。一般在点击右上角插件图标时出现,也可以通过路径作为页面访问。多用于给用户提供一个快捷的插件设置页面。比如说有的用户不喜欢某个功能,那我定义一个划词工具栏的开关、常驻头像的开关,用户可以根据开关来设置自己的喜好。

不需要把popup模块想象的那么复杂,很简单他就是一个弹框兼页面,其他啥也不是,上面说的用户偏好设置功能,那也是通过给background发消息来实现的。popup本身没什么意义,要是非说哟有什么特别的地方,可以作为弹框显示算不算特别呢。。。。。。

side_panel:侧边栏,浏览器右侧的面板,可以划分为页签级侧边栏和全局侧边栏。默认为全局侧边栏。全局侧边栏是指所有的页签共用一个侧边栏,页签发生变化侧边栏不会变化。页签级侧边栏是指每个页签对应一个侧边栏,页签发生变化侧边栏也会发生变化。

和popup一样,侧边栏本身没有什么特别的作用,只是作为一个抽屉供开发者赋予它能力。

3、通讯

基本原理了解完了。那么问题来了,如果我在侧边栏中想要获取页面数据怎么实现呢?我在页面中又怎么获取侧边栏的数据呢?我在popup文件中设置状态之后怎么通知backround呢?background如何把设置的状态反馈给popup呢?这些状态background又怎么下发到所有或者指定页签呢?页签又如何读取background这些状态呢?页面怎么给background发消息呢?background怎么接收页面消息呢?

绕晕了吧,别想太复杂,就是发布订阅的原理,比如background可以作为发布者、也能作为接收者,其他如是。

今天先讲到这里吧,下班了,改天讲讲这些模块之间的通讯方式,基本原理就算结束了。之后再抽时间讲讲构建一个插件项目(权限、文件、打包)、以及我在开发中踩到的一些坑。。。。。。

相关推荐
万少12 小时前
HarmonyOS官方模板集成创新活动-流蓝卡片
前端·harmonyos
-To be number.wan14 小时前
C++ 赋值运算符重载:深拷贝 vs 浅拷贝的生死线!
前端·c++
噢,我明白了15 小时前
JavaScript 中处理时间格式的核心方式
前端·javascript
纸上的彩虹15 小时前
半年一百个页面,重构系统也重构了我对前端工作的理解
前端·程序员·架构
be or not to be16 小时前
深入理解 CSS 浮动布局(float)
前端·css
LYFlied16 小时前
【每日算法】LeetCode 1143. 最长公共子序列
前端·算法·leetcode·职场和发展·动态规划
老华带你飞16 小时前
农产品销售管理|基于java + vue农产品销售管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
小徐_233317 小时前
2025 前端开源三年,npm 发包卡我半天
前端·npm·github
GIS之路17 小时前
GIS 数据转换:使用 GDAL 将 Shp 转换为 GeoJSON 数据
前端
JIngJaneIL17 小时前
基于springboot + vue房屋租赁管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端