首页 > 其他分享 >【谷歌插件】基本原理

【谷歌插件】基本原理

时间:2024-11-28 19:05:15浏览次数:16  
标签:插件 popup 浏览器 基本原理 谷歌 侧边 background 页面

想要了解谷歌插件开发首先需要了解一下基本原理。

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

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

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


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


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


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

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


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

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

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

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

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

标签:插件,popup,浏览器,基本原理,谷歌,侧边,background,页面
From: https://blog.csdn.net/m0_67011584/article/details/144117115

相关文章

  • 无插件直播流媒体音视频播放器EasyPlayer.js播放器多分屏超过6路不能播放如何解决
    EasyPlayer.jsH5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4视频直播与视频点播等多种协议,支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式,支持MSE、WASM、WebCodec等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器,使用简单......
  • 网页直播/点播播放器EasyPlayer.js无插件H5播放器chrome如何开启HEVC硬件解码
    在现代视频播放技术中,硬件解码因其卓越的性能和效率而成为提升用户体验的关键。EasyPlayer.jsRTSP播放器作为一款无插件H5播放器,其对硬件解码的支持尤为重要。特别是在Chrome浏览器上,启用硬件解码可以显著提高视频播放的性能,减少CPU的负担,并提供更流畅的观看体验。EasyPlayer.j......
  • 网页web无插件播放器EasyPlayer.js无插件H5播放器关于绿屏和花屏的问题解决方案
    EasyPlayer.jsH5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)、WS、WEBRTC、FMP4视频直播与视频点播等多种协议,支持H.264、H.265、AAC、G711A、Mp3等多种音视频编码格式,支持MSE、WASM、WebCodec等多种解码方式,支持Windows、Linux、Android、iOS全平台终端的H5播放器,使用简单......
  • vim的插件管理器
    目录1.vim-plug安装vim-plug使用vim-plug管理插件2.Vundle安装Vundle使用Vundle管理插件3.Pathogen安装Pathogen使用Pathogen管理插件4.dein.vim安装dein.vim使用dein.vim管理插件总结Vim插件管理器是用来简化插件安装、更新和管理的工具,能够让你轻松地为Vim......
  • 无插件H5播放器EasyPlayer.js创建多个以上播放实例会卡顿且页面黑屏如何处理?
    随着互联网技术的不断进步,HTML5逐渐取代了传统的HTML4,成为现代网站开发不可或缺的一部分。HTML5不仅简化了标记语言的复杂度,还引入了许多新的API和元素,极大地丰富了网页的表现力。特别是在多媒体领域,HTML5提供了原生支持音频和视频播放的功能,使得开发者无需依赖第三方插件如Flash,......
  • responsively-lazy 可实现响应式图片懒加载的js插件
    在线演示  下载responsively-lazy是一款非常实用的可实现响应式图片懒加载的插件。它可以根据容器的大小来智能选择加载适合尺寸的图片,做到图片的响应式效果。并且使用它对于SEO是十分友好的。该图片懒加载插件的特点还有:响应式图片不做任何不必要的请求可以在任何支持s......
  • 简单实用的鼠标滑过图片遮罩层动画jQuery插件
    nsHover是一款简单实用的鼠标滑过图片遮罩层动画JQUERY插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。在线演示  下载 使用方法使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文......
  • 强大的jquery下拉分页选择插件SelectPage
    SelectPage.js是一款强大的jquery下拉分页选择插件。SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。它的特点还有:在线演示  下载 插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI框架的环境下直接使用。兼容Bootstrap2、3样式,以及非......
  • NocoBase 本周更新汇总:优化 REST API 数据源插件
    汇总一周产品更新日志,最新发布可以前往我们的博客查看。NocoBase目前更新包括的版本更新包括三个分支:main,next和develop。main:截止目前最稳定的版本,推荐安装此版本。next:包含即将发布的新功能,经过初步测试的版本,可能存在部分已知或未知问题。主要面向测试用户,用于收集反......
  • 【Unity 插件】MiniMonsters - Turn Based Monster Battles快速构建回合制怪物对战游
    MiniMonsters-TurnBasedMonsterBattles是一款专为Unity开发者设计的插件,旨在帮助开发者快速构建回合制怪物对战游戏。该插件提供了一整套完整的系统,包括怪物战斗逻辑、技能系统、回合制战斗管理等功能,使得开发者能够专注于游戏内容的创作,而不需要从零开始编写复杂的战......