使用plasmo框架开发浏览器插件,注入contents脚本和给页面添加UI组件

plasmo:GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework
plasmo是一个开发浏览器插件的框架,支持使用react和vue等技术,而且不用手动管理manifest.json文件,框架会根据你在框架中的使用,自动生成manifest.json文件,而且做了大量的封装,让你可以快速开发浏览器插件,而且还支持很多浏览器。
想要通过plasmo给网页注入一些自己的js脚本,来修改控制网页内容,屏蔽网页广告,监听页面变化和拦截请求都是非常方便的。今天就讲一下使用plasmo给页面注入js脚本和给页面添加UI功能。也可以看官方文档,讲的比较详细:Content Scripts – Plasmo
注入脚本
内容脚本运行在独立世界的网页上下文中。这允许来自不同扩展的多个内容脚本共存,而不会与其他扩展的执行发生冲突,并且与页面的 JavaScript 保持隔离。使用的时候,只需要在框架根目录添加content.ts即可,或者你想注入多个脚本,就需要创建一个contents文件夹,将脚本都放进去即可:
// 默认匹配多有的页面并注入脚本
export {}console.log("You may find that having is not so pleasing a thing as wanting. This is not logical, but it is often true."
)
想要注入多个脚本,就创建一个contents文件夹:

只想给指定的网页注入,就添加配置:
import type { PlasmoCSConfig } from 'plasmo'// 可以匹配多个网址
export const config: PlasmoCSConfig = {matches: ['https://www.plasmo.com/*']
}
注入UI标签
Plasmo 拥有将 React、 Svelte3或 Vue3组件安装到当前网页的一流支持。这个特性称为内容脚本 UI (CSUI)。只需要在contents文件夹中创建一个tsx组件,然后导出组件即可:
export {}const CustomButton = () => {return <button>Custom button</button>
}export default CustomButton
然后重新加载插件就可以看到:
相关文章:
使用plasmo框架开发浏览器插件,注入contents脚本和给页面添加UI组件
plasmo:GitHub - PlasmoHQ/plasmo: 🧩 The Browser Extension Framework plasmo是一个开发浏览器插件的框架,支持使用react和vue等技术,而且不用手动管理manifest.json文件,框架会根据你在框架中的使用,自…...
python并发 惰性处理大型数据集
惰性计算是一种编程策略,它使得程序在何时执行计算的决定推迟到需要结果时才进行。这种策略的好处在于,它允许程序处理大规模数据或者需要大量计算的任务时节省内存和计算资源。 举例来说,当我们调用 Python 中的 range() 函数时,…...
Docker将本地的镜像上传到私有仓库
使用register镜像创建私有仓库 [rootopenEuler-node1 ~]# docker run --restartalways -d -p 5000:5000 -v /opt/data/regostry:/var/lib/registry registry:2[rootopenEuler-node1 ~]# docker images REPOSITORY TAG IMAGE…...
[LeetBook]【学习日记】有效数字——状态机
题目 有效数字 有效数字(按顺序)可以分成以下几个部分: 若干空格一个小数或者整数(可选)一个’e’或’E’,后面跟着一个整数若干空格 小数(按顺序)可以分成以下几个部分:…...
学习目标2024
技术: 什么是 Nacos apifox 业务: 域统一...
引入js,刷新清除缓存
一、这种会让所有的css/js资源重新加载 <meta http-equiv"pragram" content"no-cache"> <meta http-equiv"cache-control" content"no-cache, no-store, must-revalidate">二、加时间戳 每次引入,后面版本号都…...
【VSCODE修改代码行间距】解决方案
在我们编码的过程中,由于显示字体和显示器的不同,会需要调整行间距,在vscode默认的选项中没有看到设定行间距的选项,不过,可以手动修改配置档达到目的。 1.打开设置 2.打开配置档,手动进行设定 3.在选项中添…...
lvs+keepalive
虚拟路由冗余协议(Virtual Router Redundancy Protocol,简称VRRP) VRRP能够在不改变组网的情况下,将多台路由器虚拟成一个虚拟路由器,通过配置虚拟路由器的IP地址为默认网关,实现网关的备份。 协议版本: VRRPv2(常用&…...
用spark读取及存储数据
文章目录 读取数据存储数据 读取数据 data spark.sql("""select * from temp.tables""") data.show(3)# 转成pandas方式 # df data.toPandas() # df.head(3)存储数据 table "temp.new_tables" data.write.format("hive"…...
蓝牙 | 软件: Qualcomm BT Audio 问题分析(4)----检查MIPS使用情况
大家好! 我是“声波电波还看今朝”成员的一位FAE Devin.wen,欢迎大家关注我们的账号。 今天给大家大概讲解“如何排查Qualcomm BT Audio”的疑难杂症(四):MIPS检查。 如果大家还没有注册我们大大通的账号,…...
【实战】K8S集群部署nacos并接入Springcloud项目容器化运维
文章目录 前言Nacos集群搭建Spring cloud配置nacos将Springcloud项目部署在k8s写在最后 前言 相信很多同学都开发过以微服务为架构的系统,开发微服务必不可少要使用注册中心,比如nacos\consul等等。当然在自动化运维流行的今天,我们也会将注…...
prometheus监控zookeeper方案
这里要求zookeeper版本必须达到3.6或以上,用的是官方自带的监控信息。 官方下载地址 https://zookeeper.apache.org/releases.html#download 然后在zookeeper的配置文件,比如zoo.cfg最后面加上这一段 metricsProvider.classNameorg.apache.zookeeper.…...
智能照明控制系统的优点有哪些
智能照明控制系统在会展中心中应用的功能和优点: 1实现照明控制智能化 在使用智能照明控制系统之后,能够将系统工作在全自动的状态下,系统能够预先设置好若干个基本切换状态,并且还能够根据预先设定的时间自动的在展馆各种工作状…...
Cent OS 安装 vmware tools
一、先挂载iso镜像 二、使用blkid命令,可看到/dev/sr0 blkid 创建一个目录并挂载cdrom mkdir /mnt/cdrom mount -t iso9660 /dev/cdrom /mnt/cdrom/ 挂载完成后,在/mnt/cdrom/目录即可看到一个.tar.gz的包VMwareTools-10.1.7-5541682.tar.gz&#x…...
写一个关于RN的分秒毫秒组件(组件状态由同一个父组件控制)
介绍一下,就一个界面会一直跑时间,项目有个需求需要用到毫秒级计时器,那我肯定想到用组件了塞,但是组件的状态和组件的数据都是不互通的都是独立的,因此我写了下面这个组件,组件的状态会由父组件控制切记,必须是同一个父组件,因为状态是父组件控制的&…...
javascript中字符串处理,常用的方法汇总
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 所属专栏:前端泛海 景天的主页:景天科技苑 文章目录 字符串对象的的相关方法1.获取字符串长度 length2.通过索引获取元素 …...
STM32CubeMX学习笔记14 ---SPI总线
1. 简介 1.1 SPI总线介绍 SPI 是英语Serial Peripheral interface的缩写,顾名思义就是串行外围设备接口。是Motorola(摩托罗拉)首先在其MC68HCXX系列处理器上定义的。 SPI,是一种高速的,全双工,同步的通信总线,并且在…...
Gson(List<Object>转String 、String转List<Object>)
要在Java项目中使用Gson库,你需要添加相应的依赖项。以下是在Maven项目的pom.xml文件中添加Gson依赖的示例: <dependencies><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId>&l…...
uniapp路由跳转的方式
1. uniapp路由跳转的方式 1.1. uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 uni.navigateTo({url:./index/index });注意: (1)页面跳转路径有层级限制,不…...
使用Python模拟绘制自由落体运动过程中的抛物线
目录 一、引言 二、自由落体运动的基本原理 三、使用Python模拟自由落体运动 四、扩展功能:添加速度曲线和动画效果 五、总结与展望 一、引言 自由落体运动是物理学中最基础的运动形式之一,它描述了一个物体在仅受重力作用下的运动轨迹。在这个…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
HashMap中的put方法执行流程(流程图)
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中,其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下: 初始判断与哈希计算: 首先,putVal 方法会检查当前的 table(也就…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
