Chrome 侧边栏开发示例

前言

最近做项目,需要开发浏览器扩展,但是考虑页面布局兼容性问题,使用了Chrome114开始的侧边栏,浏览器自带的能力毕竟不会出现兼容性问题,不过Chrome123开始,侧边栏居然又可以选择固定右侧扩展栏了,交互变化很大。

API

官方文档:  https://developer.chrome.com/docs/extensions/reference/sidePanel/ 

可惜需要科学上网

大致意思是从Chrome114开始有了侧边栏的新功能,其中的open方式打开侧边栏的API是Chrome116开始的。

笔者Chrome已经升级到123了,所以

出现了固定按钮

开发指南

那么从无到有开发一个侧边栏吧

官方示意图,不过Chrome各个版本API的迭代很快,网上很多教程都是基于老版本API和version开发的,在开发功能时,就需要考虑Chrome删除旧API的情况,毕竟新API出现很久了。

Chrome插件的几个核心理念,popup(右上角的图标与相关的页面和事件);content-script(页面注入和js注入,与Chrome的原始页面交互);background(crx后台运行,只要插件启用且Chrome没关闭);sidepanel(新功能,侧边栏)

manifest

定义扩展名称等元数据 

{"name": "Hello Demo","description": "Base Level Extension","version": "1.0","manifest_version": 2,"browser_action": {"default_popup": "popup.html","default_icon": "popup.png"
}

定义图标,元数据版本号 ,当然需要一些敏感权限时还要申请权限,通过开发者模式就可以加载未封装的扩展了。

点击扩展,就有弹窗,旁边是原扩展,笔者自己写的只能是提取图标了,根据开源协议是OK的

     

如果我们打包,并安装未在Chrome商店的扩展就不能启用

另外写的扩展有个错误,点击进去,不过到目前为止,还是可以用version为2的版本,另外sidepanel必须使用version为3.

sidePanel

升级v3版本,毕竟v2版本要被Chrome移除了,开启侧边栏

基本上manifest各种配置都改了,API变化真大

{"name": "Hello Demo","description": "Base Level Extension","version": "1.0","manifest_version": 3,"action": {"default_title": "Click to view a popup","default_popup": "popup.html"},"icons": {"128": "popup.png"},"background": {"service_worker": "background.js" },"side_panel": {"default_path": "popup.html","openPanelOnActionClick": true},"permissions":["sidePanel"]}

Chrome123之前是右上角有个侧边栏的按钮,在侧边栏切换各个扩展,Chrome123可以邮件扩展图标

事件联动

实际上事件联动,一般会经过background的js进行中转,比如发送message

比如先创建右键菜单,发送标签消息,就可以在content-script的js里面消费

//background js
function sendMessageToContentScript(message, callback){chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage(tabs[0].id, message, function(response){if(callback) callback(response);});});
}chrome.contextMenus.create({id: "send_panel",title: '使用侧边栏处理:%s', // %s表示选中的文字contexts: ['selection'] // 只有当选中文字时才会出现此右键菜单
});
chrome.contextMenus.onClicked.addListener(function(params){if(params.menuItemId=='send_panel'){console.log(params.selectionText);sendMessageToContentScript({cmd:'test', value:params.selectionText}, function(response){console.log('来自content的回复:'+response);});}
});

给权限

"permissions":["sidePanel","contextMenus", "tabs"]

重新加载后

 

刷新网页,选中文本,右键

用自己写的对文本进行发送消息,但是tab的消息只能当前tab消费,如果要给background和popup或者sidePanel发送消息,必须使用全局消息

function sendMessageToContentScript(message, callback){/* chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage(tabs[0].id, message, function(response){if(callback) callback(response);});}); */chrome.runtime.sendMessage(message, function(response) {console.log('收到来自后台的回复:' + response);});
}

在panel的js消费

<html><header></header><body><h1 id="panel_demo">Hello panel Extension</h1><script type="text/javascript" src="panel.js"></script></body>
</html>//js文件
function recive_msg(){chrome.runtime.onMessage.addListener(function(message, sender,sendResponse) {if(message.cmd == 'test') {//alert(message.value);document.querySelector("#panel_demo").innerHTML = message.value;}sendResponse('我收到了你的消息!');});
}alert("haha");
recive_msg();

这里要考虑一件事,在background是无法使用alert函数的。

 

点击确定后

总结

实际上Chrome插件的开发比较简单,不过Chrome文档不好查看,现存的很多文档都是旧版本,而Chrome的扩展API变化很大,尤其是V3版本,示例中的侧边栏必须使用V3版本,而且需要Chrome114或者Chrome116的版本才能使用,并且在Chrome123版本侧边栏交互体验又重大变化,本身侧边栏的用处不是特别大,主要是网上文档比较少,所以写了一篇简单文档,本质上是需要查看Chrome扩展的官方文档,毕竟官方文档是最完整最新的文档。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/828547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【黑马头条】-day11热点文章实时计算-kafka-kafkaStream-Redis

文章目录 今日内容1 实时流式计算1.1 应用场景1.2 技术方案选型 2 Kafka Stream2.1 概述2.2 KafkaStream2.3 入门demo2.3.1 需求分析2.3.2 实现2.3.2.1 添加依赖2.3.2.2 创建快速启动&#xff0c;生成kafka流2.3.2.3 修改生产者2.3.2.4 修改消费者2.3.2.5 测试 2.4 SpringBoot集…

python绘制平行四边形

image cv2.polylines(np.array(image), [box], True, (255, 0, 0), 2)cv2.polylines是OpenCV库中的一个函数&#xff0c;用于在图像上绘制多边形。它可以绘制闭合或非闭合的多边形&#xff0c;并且可以选择不同的线宽和颜色。 该函数的语法如下&#xff1a; cv2.polylines(i…

光伏无人机巡检主要有些什么功能和特点?

随着科技的飞速发展&#xff0c;无人机技术已经渗透到多个行业领域&#xff0c;光伏产业便是其中之一。光伏无人机巡检&#xff0c;作为一种新兴的巡检方式&#xff0c;正在逐渐取代传统的人工巡检&#xff0c;为光伏电站的安全、高效运行提供了有力保障。那么&#xff0c;光伏…

记录ubuntu20.04安装nvidia-525.85.05显卡驱动(学习笔记2024.4.15、4.16)

电脑&#xff1a;华硕天选X2024 显卡&#xff1a;4060Ti i5-14400F 架构&#xff1a;x86_64 我需要使用Linux系统使用IsaacSim进行仿真&#xff0c;所以安装的都是IsaacSim中的推荐版本。 一.对新鲜的电脑进行分盘 电脑刚到手&#xff0c;900多个G全在C盘里&#xff0c;给它…

【C语言__联合和枚举__复习篇10】

目录 前言 一、联合体 1.1 联合体的概念 1.2 联合体与结构体关于声明和内存布局的比较 1.3 联合体的大小如何计算 1.4 使用联合体的2个示例 二、枚举体 2.2 枚举体的概念 2.2 枚举体的优点 前言 本篇主要讨论以下问题&#xff1a; 1. 联合体是什么&#xff0c;它有什么特点 …

如何通过ABAP将数据写回BPC模型

今天给大家安利一个标准方法&#xff0c;主要用于回写BPC模型数据&#xff0c;一般情况下&#xff0c;BPC模型数据的回写&#xff0c;标准的方式有数据抽取&#xff0c;直接抽取供数模型的数&#xff0c;利用BW标准转换方式进行供数&#xff0c;又或者通过逻辑脚本BADI的方式直…

Python之PCV库安装教程以及解说

PCV库是一个比较古老的python库 在网上参考了很多教程 于是现在想要总结一下,并且分享整理了一下资源 很多人是通过pycharm内部直接下载PCV 但是导入时还要报错 因为PCV版本不对 pycharm自动下载的版本过于旧 是0.0.2 而我们需要的是1.0.0版本 否则下面PCV部分会报错无法导入…

esbuild 极速的JavaScript构建打包工具

1、esbuild 是使用go语言编写的一个前端构建工具 相对于nodeJs的构建工具如webpack。go语言是纯机器码&#xff0c;没有js的解释过程&#xff1b;go新开了一个进程多线程并行&#xff0c;而js是单线程串行化的&#xff0c;所以从开发语言层面来说就更快。当nodejs还在解析打包…

MySQL 开源到商业(二):开源骇客沦为大厂社畜

前文提到&#xff0c;MySQL AB 接受了 Sun 公司的收购要约&#xff0c;开源骇客 Monty 也同时加入了 Sun 公司。双方对于 MySQL 的开源前景踌躇满志&#xff0c;准备大力投入新一代存储引擎 Maria 的开发&#xff0c;用于取代被 Oracle 收购的 InnoDB 引擎。作为一个芬兰人&…

LeetCode - LCR 179.查找总价格为目标值的两个商品

一. 题目链接 LeetCode - LCR 179. 查找总价格为目标值的两个商品 解法&#xff08;双指针 - 对撞指针&#xff09;&#xff1a; 算法思路&#xff1a; 注意到本题是升序的数组&#xff0c;因此可以用「对撞指针」优化时间复杂度。 算法流程&#xff1a; 初始化left &#…

如何快速申请SSL证书实现HTTPS访问?

申请SSL证书最简单的方法通常涉及以下几个步骤&#xff0c;尽量简化了操作流程和所需专业知识&#xff1a; 步骤一&#xff1a;选择适合的SSL证书类型 根据您的网站需求&#xff0c;选择最基础的域名验证型&#xff08;DV SSL&#xff09;证书&#xff0c;它通常只需验证域名所…

【以奖代补】诗情画意润童心 书香课堂志愿行

中华古诗词历史源远流长&#xff0c;名篇佳作数不胜数。为弘扬民族文化精髓&#xff0c;丰富乡村儿童假期生活。2024年4月21日上午&#xff0c;襄州区社会工作者协会联合襄州区张家集镇社工站、张集村“童叟乐园”志愿服务队在张集村开展“诗情画意润童心 书香课堂志愿行”志愿…

JavaSE:抽象

一&#xff0c;抽象是什么&#xff0c;抽象和面向对象有什么关系 抽象&#xff0c;个人理解&#xff0c;就是抽象的意思 我们都知道面向对象的四大特征&#xff1a;封装&#xff0c;继承&#xff0c;多态&#xff0c;抽象 为什么抽象是面向对象的特征之一&#xff0c;抽象和面…

jQuery基础学习(属性操作、循环、事件冒泡委托、元素节点操作、滚轮事件、函数节流、json、ajax、jsonp与本地存储)

一、jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm $(#div1).html();// 设置html内容 $(#div1).html(<span>添加文字</span>);2、prop() 取出或设置某个属性的值 // 取出图片的地址 var $src $(#img1).prop(src);// 设置图片的地址和…

【ESP32入门实战】初识ESP32

【ESP32入门实战】初识ESP32 文章目录 【ESP32入门实战】初识ESP32&#x1f468;‍&#x1f3eb;前言【写作缘由】&#x1f9d1;‍&#x1f393;ESP32介绍&#x1f469;‍&#x1f4bb;ESP32-WROOM-32&#x1f469;‍&#x1f4bb;ESP32的组成部分 &#x1f468;‍&#x1f3eb…

记内网http洪水攻击,导致网页无法访问一事

事由 最近两日&#xff0c;部分同事在访问税纪云平台时&#xff0c;登录跳转页面频繁转圈、要么就是出现无法连接的错误提示。 无法访问此页面 已重置连接。 请尝试: 检查连接检查代理和防火墙运行 Windows 网络诊断经过以下几方面的排查&#xff0c;无果。 后续通过检查…

LoRa技术在物联网领域的安全性挑战与应对策略分享

随着物联网技术的飞速发展&#xff0c;LoRa技术作为一种新兴的无线通信技术&#xff0c;在物联网领域展现出了广阔的应用前景。然而&#xff0c;与此同时&#xff0c;其安全性问题也日益凸显&#xff0c;成为了制约其进一步发展的重要因素。本文将深入分析LoRa网络存在的安全漏…

4月23号总结

java实现发送邮件 在做聊天室项目的时候&#xff0c;由于需要发送邮箱验证码&#xff0c;所以自己查找了这方面的内容。 首先需要在Maven里面依赖 <dependency><groupId>com.sun.mail</groupId><artifactId>javax.mail</artifactId><versio…

冯喜运:4.25黄金原油上演过山车走势附操作建议

【黄金消息面分析】&#xff1a;周四&#xff08;4月25日&#xff09;亚洲时段&#xff0c;现货黄金窄幅震荡&#xff0c;目前交投于2320美元/盎司附近。金价周三企稳在2300关口上方&#xff0c;收报2315.80美元/盎司&#xff0c;中东紧张局势导致的风险溢价有所缓和&#xff0…

数据类型与变量(Java)

数据类型与变量&#xff08;Java&#xff09; 字面常量数据类型变量变量概念整型变量整型变量长整型变量短整型变量字节型变量 浮点型变量双精度浮点型单精度浮点型 字符型变量布尔型变量类型转换自动类型转换(隐式)强制类型转换(显式) 类型提升 字面常量 常量&#xff1a;常量…