【谷歌插件】基本原理

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可以作为发布者、也能作为接收者,其他如是。

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

相关推荐
腾讯TNTWeb前端团队4 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom9 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom9 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom9 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom9 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试