当前位置: 首页 > news >正文

使用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&#xff1a;GitHub - PlasmoHQ/plasmo: &#x1f9e9; The Browser Extension Framework plasmo是一个开发浏览器插件的框架&#xff0c;支持使用react和vue等技术&#xff0c;而且不用手动管理manifest.json文件&#xff0c;框架会根据你在框架中的使用&#xff0c;自…...

python并发 惰性处理大型数据集

惰性计算是一种编程策略&#xff0c;它使得程序在何时执行计算的决定推迟到需要结果时才进行。这种策略的好处在于&#xff0c;它允许程序处理大规模数据或者需要大量计算的任务时节省内存和计算资源。 举例来说&#xff0c;当我们调用 Python 中的 range() 函数时&#xff0c…...

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]【学习日记】有效数字——状态机

题目 有效数字 有效数字&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 若干空格一个小数或者整数&#xff08;可选&#xff09;一个’e’或’E’&#xff0c;后面跟着一个整数若干空格 小数&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a…...

学习目标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">二、加时间戳 每次引入&#xff0c;后面版本号都…...

【VSCODE修改代码行间距】解决方案

在我们编码的过程中&#xff0c;由于显示字体和显示器的不同&#xff0c;会需要调整行间距&#xff0c;在vscode默认的选项中没有看到设定行间距的选项&#xff0c;不过&#xff0c;可以手动修改配置档达到目的。 1.打开设置 2.打开配置档&#xff0c;手动进行设定 3.在选项中添…...

lvs+keepalive

虚拟路由冗余协议(Virtual Router Redundancy Protocol&#xff0c;简称VRRP) VRRP能够在不改变组网的情况下&#xff0c;将多台路由器虚拟成一个虚拟路由器&#xff0c;通过配置虚拟路由器的IP地址为默认网关&#xff0c;实现网关的备份。 协议版本: VRRPv2&#xff08;常用&…...

用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使用情况

大家好&#xff01; 我是“声波电波还看今朝”成员的一位FAE Devin.wen&#xff0c;欢迎大家关注我们的账号。 今天给大家大概讲解“如何排查Qualcomm BT Audio”的疑难杂症&#xff08;四&#xff09;&#xff1a;MIPS检查。 如果大家还没有注册我们大大通的账号&#xff0c…...

【实战】K8S集群部署nacos并接入Springcloud项目容器化运维

文章目录 前言Nacos集群搭建Spring cloud配置nacos将Springcloud项目部署在k8s写在最后 前言 相信很多同学都开发过以微服务为架构的系统&#xff0c;开发微服务必不可少要使用注册中心&#xff0c;比如nacos\consul等等。当然在自动化运维流行的今天&#xff0c;我们也会将注…...

prometheus监控zookeeper方案

这里要求zookeeper版本必须达到3.6或以上&#xff0c;用的是官方自带的监控信息。 官方下载地址 https://zookeeper.apache.org/releases.html#download 然后在zookeeper的配置文件&#xff0c;比如zoo.cfg最后面加上这一段 metricsProvider.classNameorg.apache.zookeeper.…...

智能照明控制系统的优点有哪些

智能照明控制系统在会展中心中应用的功能和优点&#xff1a; 1实现照明控制智能化 在使用智能照明控制系统之后&#xff0c;能够将系统工作在全自动的状态下&#xff0c;系统能够预先设置好若干个基本切换状态&#xff0c;并且还能够根据预先设定的时间自动的在展馆各种工作状…...

Cent OS 安装 vmware tools

一、先挂载iso镜像 二、使用blkid命令&#xff0c;可看到/dev/sr0 blkid 创建一个目录并挂载cdrom mkdir /mnt/cdrom mount -t iso9660 /dev/cdrom /mnt/cdrom/ 挂载完成后&#xff0c;在/mnt/cdrom/目录即可看到一个.tar.gz的包VMwareTools-10.1.7-5541682.tar.gz&#x…...

写一个关于RN的分秒毫秒组件(组件状态由同一个父组件控制)

介绍一下,就一个界面会一直跑时间,项目有个需求需要用到毫秒级计时器,那我肯定想到用组件了塞,但是组件的状态和组件的数据都是不互通的都是独立的,因此我写了下面这个组件,组件的状态会由父组件控制切记&#xff0c;必须是同一个父组件&#xff0c;因为状态是父组件控制的&…...

javascript中字符串处理,常用的方法汇总

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;前端泛海 景天的主页&#xff1a;景天科技苑 文章目录 字符串对象的的相关方法1.获取字符串长度 length2.通过索引获取元素 …...

STM32CubeMX学习笔记14 ---SPI总线

1. 简介 1.1 SPI总线介绍 SPI 是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口。是Motorola(摩托罗拉)首先在其MC68HCXX系列处理器上定义的。 SPI&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在…...

Gson(List<Object>转String 、String转List<Object>)

要在Java项目中使用Gson库&#xff0c;你需要添加相应的依赖项。以下是在Maven项目的pom.xml文件中添加Gson依赖的示例&#xff1a; <dependencies><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId>&l…...

uniapp路由跳转的方式

1. uniapp路由跳转的方式 1.1. uni.navigateTo保留当前页面&#xff0c;跳转到应用内的某个页面&#xff0c;使用uni.navigateBack可以返回到原页面。 uni.navigateTo({url:./index/index });注意&#xff1a; &#xff08;1&#xff09;页面跳转路径有层级限制&#xff0c;不…...

使用Python模拟绘制自由落体运动过程中的抛物线

目录 一、引言 二、自由落体运动的基本原理 三、使用Python模拟自由落体运动 四、扩展功能&#xff1a;添加速度曲线和动画效果 五、总结与展望 一、引言 自由落体运动是物理学中最基础的运动形式之一&#xff0c;它描述了一个物体在仅受重力作用下的运动轨迹。在这个…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

VM虚拟机网络配置(ubuntu24桥接模式):配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...