plasmo开发浏览器插件动态setIcon修改插件图标和setBadgeText显示徽标

动态修改图标和设置徽标主要用到action这个api,官网地址:https://developer.chrome.com/docs/extensions/reference/api/action?hl=zh-cn#method-setIcon 

如果你使用官方原生的方式开发,加载和修改图标应该是比较简单的,但是如果你使用的是plasmo框架开发浏览器插件的话,就会遇到加载图片的路径不正确,导致设置图标错误的问题。这里就说一下在plasmo框架里面加载图标并动态设置。

动态设置图标

因为动态设置图标只能填写两种方式,一个是imageData,另外一个就是加载一个path,使用imageData的方式可以使用canvas画一张图,然后加载上去:

 // change action iconconst setIcon = () => {const canvas = new OffscreenCanvas(16, 16)const context = canvas.getContext('2d')context.clearRect(0, 0, 16, 16)context.fillStyle = '#00FF00' // Greencontext.fillRect(0, 0, 16, 16)const imageData = context.getImageData(0, 0, 16, 16)chrome.action.setIcon({ imageData: imageData }, () => {console.log('set icon callback')})}

这是一种比较简单的方式,但是如果你想加载一张本地的图片,动态设置为图标该怎么办?

plasmo官方文档加载资源的方式:Import Resolution – Plasmo 

可以加载scss的文件:

import styleText from "data-text:~/assets/style.scss"// 会自动转成css
console.log(styleText)

也可以加载原始图片路径:

import imageUrl from "raw:~/assets/image.png"console.log(imageUrl) // chrome-extension://<extension-id>/image.<hashA>.png

也可以加载base64格式的图片:

import iconBase64 from "data-base64:~/assets/icon.png"console.log(iconBase64) // data:image/png;base64,etc...

我们这个使用setIcon动态设置图标的时候,只能使用imageData的格式,因为原始图片路径和base64格式的都不行,所以需要将base64/图片路径格式的转为imageData格式的才可以:

import someImage from 'data-base64:~assets/icon.png'// set custom iconconst setPngIcon = () => {var img = new Image()img.onload = function () {const canvas = new OffscreenCanvas(16, 16)const context = canvas.getContext('2d')context.drawImage(img, 0, 0, 16, 16)const imageData = context.getImageData(0, 0, 16, 16)chrome.action.setIcon({ imageData: imageData }, () => {console.log('set icon callback')})}img.src = someImage}

这样设置完就可以修改了:

图标也更换了:

更换后的图标:

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

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

相关文章

2024.4.7力扣每日一题——王位继承顺序

2024.4.7 题目来源我的题解方法一 哈希表多叉树的前序遍历 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1600 我的题解 方法一 哈希表多叉树的前序遍历 发现继承顺序的生成与多叉树的前序遍历一致&#xff0c;只需要在遍历过程中将已经去世的给排除就可以了。 如何存…

Ubuntu系统中,使用`nohup`命令启动Java程序。nohup参数说明、验证启动、停止程序详细教程

在Ubuntu系统中&#xff0c;使用nohup命令启动Java程序可以实现在后台运行程序&#xff0c;即使终端关闭或用户注销&#xff0c;程序也会继续运行。以下是使用nohup启动Java程序的步骤&#xff1a; 打开终端。 进入到你的Java程序所在的目录&#xff0c;或者确保JAVA_HOME环境…

valgrind 是个啥?

最近在看PG代码时&#xff0c;看到许多VALGRIND相关的宏&#xff0c;例如 VALGRIND_MAKE_MEM_DEFINED、 VALGRIND_MAKE_MEM_NOACCESS&#xff0c;特别是移植PG的某模块到OG时&#xff0c;由于OG中没有定义这些宏&#xff0c;遇到这些宏&#xff0c;一开始我也不知道该怎么办了。…

C语言面试题之合并排序的数组

合并排序的数组 实例要求 1、给定两个排序后的数组 A 和 B&#xff0c;其中 A 的末端有足够的缓冲空间容纳 B&#xff1b; 2、编写一个方法&#xff0c;将 B 合并入 A 并排序&#xff1b; 3、初始化 A 和 B 的元素数量分别为 m 和 n&#xff1b; 示例: 输入: A [1,2,3,0…

小剧场短剧剧集收费短剧小程序APP

1. 内容展现 付费、免费、任务解锁&#xff1a;用户可以通过付费直接观看短剧&#xff0c;也可以通过完成平台任务&#xff08;如签到、分享等&#xff09;获得免费观看的机会。这种灵活的解锁方式既满足了用户的多种需求&#xff0c;也促进了平台的活跃度。主流展现形式&…

蓝桥杯简单模板

目录 最大公约数 两个数的最大公约数 多个数的最大公约数 最小公倍数 两个数的最小公倍数 多个数的最小公倍数 素数 ​编辑 位数分离 正写 ​编辑 反写 闰年 最大公约数 两个数的最大公约数 之前看见的是辗转相除法&#xff0c;例如现在让算一个49&#xff0c;21…

libVLC 提取视频帧使用OpenGL渲染

在上一节中&#xff0c;我们讲解了如何使用QWidget渲染每一帧视频数据。 由于我们不停的生成的是QImage对象&#xff0c;因此对 CPU 负荷较高。其实在绘制这块我们可以使用 OpenGL去绘制&#xff0c;利用 GPU 减轻 CPU 计算负荷&#xff0c;本节讲解使用OpenGL来绘制每一帧视频…

Leetcode面试经典150_Q169多数元素

题目&#xff1a; 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊n/2⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 解题思路&#xff1a; 1. 注意“大于 ⌊n/2⌋”&#xff0c;…

【每日一题】2529. 正整数和负整数的最大计数-2024.4.9

题目&#xff1a; 2529. 正整数和负整数的最大计数 给你一个按 非递减顺序 排列的数组 nums &#xff0c;返回正整数数目和负整数数目中的最大值。 换句话讲&#xff0c;如果 nums 中正整数的数目是 pos &#xff0c;而负整数的数目是 neg &#xff0c;返回 pos 和 neg二者中…

A Survey for LLM

一、背景介绍 我们关注大模型中的两个主流&#xff1a;大语言模型和预训练的基础模型。01 大语言模型&#xff08;LLMs&#xff09; 语言建模是许多自然语言处理任务的基础&#xff0c;而大语言模型&#xff08;LLMs&#xff09;的初衷是为了提高语言建模的性能。与传统的神经语…

STM32之HAL开发——串行FLASH文件系统FatFs

文件系统 文件系统是为了存储和管理数据&#xff0c;而在存储介质建立的一种组织结构&#xff0c;这些结构包括操作系统引导区、目录和文件。 常见的 windows 下的文件系统格式包括 FAT32、 NTFS、exFAT。 在使用文件系统前&#xff0c;要先对存储介质进行格式化。格式化先擦除…

React 状态管理:高效处理数组数据的5种方法

1.原因 为什么在 React 中,状态(state)如果是数组类型,需要单独处理&#xff1f;主要有以下几个原因: 不可变性(Immutability): React 中的状态是不可变的,意味着我们不能直接修改状态,而是要创建一个新的状态对象。对于数组来说,直接修改数组元素是不符合 React 的设计原则的…

[LeetCode][LCR133]位 1 的个数——快速从右边消去1

题目 LCR 133. 位 1 的个数 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位数为 ‘1’ 的个数&#xff08;也被称为 汉明重量).&#xff09;。 提示&#xff1a; 请注意&#xff0c;在某些语言…

多个代理proxy配置——日志查看代理后的地址

一个项目接口有两个域名&#xff0c;需要配置两个代理复制一个axios封装文件&#xff0c;修改baseUrl为新的标识 ququ新接口文件引入新的request1即可 proxy: {// 新接口采用 /ququ前缀/ququ: {target: http://192.168.2.82:8888, //鑫哥 changeOrigin: true,logLevel: debug, …

【Python】RocketMQ 基础使用

目录 1. 介绍 2. 实践 2.1. 启动消费者 2.2. 启动生产者 1. 介绍 RocketMQ是一个开源的分布式消息传递系统&#xff0c;最初由阿里巴巴集团开发并于2012年开源。它旨在解决高可靠性、高吞吐量、低延迟和可伸缩性等大规模分布式系统下的消息通信需求。 RocketMQ的设计目标…

vue对比react18

1.模板语法-——>jsx JSX表达式用{}包裹&#xff0c;vue模板表达式用{{}}包裹&#xff0c;其余一致。 注意:if语句、switch语句、变量声明属于语句&#xff0c;不是表达式&#xff0c;不能出现在{}或{{}}中 <!--vue--> <template><div><p>I have…

Java开发面试题分享

目录 1、简述MyISAM和InnoDB的区别 2、简述Hash和B树索引的区别 3、简述MyBatis的实现逻辑 4、#{}和${}的区别 5、简述Mybatis的优缺点 6、当实体类中的属性名和表中的字段名不一样时怎么办&#xff1f; 7、resultType与resultMap的区别 8、如何执行批量插入 9、Mybat…

Unity自己实现的中英文的切换(简单好抄)

关键技术&#xff08;读取文件的方法&#xff0c;Split()分割字符串&#xff09; 1.搭建一个这样的场景&#xff0c;场景中有3个文本&#xff08;用新版的&#xff09;&#xff0c;一个空对象&#xff0c;一个按钮 2.编写翻译文本&#xff08;编写一个txt文本&#xff0c;在文…

jq命令简易教程——Linux中处理JSON数据的利器

在shell脚本中&#xff0c;当我们需要对JSON数据&#xff08;例如ceph、kubernetes等一些命令的输出&#xff0c;或是调用API获得的响应&#xff09;进行处理和提取时&#xff0c;如果使用传统的文本三剑客sed、awk和grep&#xff0c;命令将会非常臃肿不可读。虽然这三个命令在…

腾讯云视频点播配置说明 | Modstart

开通云点播 开通云点播 云点播VOD_音视频点播_直播回看_音视频上传、存储转码AI处理方案-腾讯云 获取腾讯云 SecretId 和 SecretSecret 注册并且登录 腾讯云