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

本文主要是介绍使用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组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/772682

相关文章

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置(INFO/DEBUG等),输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用

Python使用Tenacity一行代码实现自动重试详解

《Python使用Tenacity一行代码实现自动重试详解》tenacity是一个专为Python设计的通用重试库,它的核心理念就是用简单、清晰的方式,为任何可能失败的操作添加重试能力,下面我们就来看... 目录一切始于一个简单的 API 调用Tenacity 入门:一行代码实现优雅重试精细控制:让重试按我

MySQL中EXISTS与IN用法使用与对比分析

《MySQL中EXISTS与IN用法使用与对比分析》在MySQL中,EXISTS和IN都用于子查询中根据另一个查询的结果来过滤主查询的记录,本文将基于工作原理、效率和应用场景进行全面对比... 目录一、基本用法详解1. IN 运算符2. EXISTS 运算符二、EXISTS 与 IN 的选择策略三、性能对比

Oracle数据库定时备份脚本方式(Linux)

《Oracle数据库定时备份脚本方式(Linux)》文章介绍Oracle数据库自动备份方案,包含主机备份传输与备机解压导入流程,强调需提前全量删除原库数据避免报错,并需配置无密传输、定时任务及验证脚本... 目录说明主机脚本备机上自动导库脚本整个自动备份oracle数据库的过程(建议全程用root用户)总结

使用Python构建智能BAT文件生成器的完美解决方案

《使用Python构建智能BAT文件生成器的完美解决方案》这篇文章主要为大家详细介绍了如何使用wxPython构建一个智能的BAT文件生成器,它不仅能够为Python脚本生成启动脚本,还提供了完整的文... 目录引言运行效果图项目背景与需求分析核心需求技术选型核心功能实现1. 数据库设计2. 界面布局设计3

使用IDEA部署Docker应用指南分享

《使用IDEA部署Docker应用指南分享》本文介绍了使用IDEA部署Docker应用的四步流程:创建Dockerfile、配置IDEADocker连接、设置运行调试环境、构建运行镜像,并强调需准备本... 目录一、创建 dockerfile 配置文件二、配置 IDEA 的 Docker 连接三、配置 Do

Android Paging 分页加载库使用实践

《AndroidPaging分页加载库使用实践》AndroidPaging库是Jetpack组件的一部分,它提供了一套完整的解决方案来处理大型数据集的分页加载,本文将深入探讨Paging库... 目录前言一、Paging 库概述二、Paging 3 核心组件1. PagingSource2. Pager3.

python运用requests模拟浏览器发送请求过程

《python运用requests模拟浏览器发送请求过程》模拟浏览器请求可选用requests处理静态内容,selenium应对动态页面,playwright支持高级自动化,设置代理和超时参数,根据需... 目录使用requests库模拟浏览器请求使用selenium自动化浏览器操作使用playwright

python使用try函数详解

《python使用try函数详解》Pythontry语句用于异常处理,支持捕获特定/多种异常、else/final子句确保资源释放,结合with语句自动清理,可自定义异常及嵌套结构,灵活应对错误场景... 目录try 函数的基本语法捕获特定异常捕获多个异常使用 else 子句使用 finally 子句捕获所

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符