plasmo浏览器插件框架使用react和ant.design框架创建页面内容脚本UI样式注入

使用plasmo开发浏览器插件的时候,想要使用内容脚本UI注入自定义的UI组件,官方文档:Content Scripts UI – Plasmo,最好是搭配上好看的UI样式,所以可以集成ant.design的UI组件库,但是只集成组件还不行,还需要引入样式,但是内容脚本就不能很友好的引入框架的样式,只是引入组件,在内容脚本上是没有样式的, 因为没有引入自定义样式:

这和我们的UI'组件库里面显示的效果完全不一致啊,这就是因为没有把ui框架的样式注入导致的,因为plasmo的内容脚本是注入到页面中的,所以无法将UI框架的css样式也注入进去,所以只能通过手动创建css文件,然后将UI框架的css样式复制进去。比如我们找到UI框架的按钮样式,然后将按钮的css复制出来:

然后在plasmo的内容脚本里面创建css文件,并将css文件引入到内容脚本里面:

在内容脚本UI里面引入这个css文件:

import cssText from 'data-text:~/contents/index.css'// load style file
export const getStyle = () => {const style = document.createElement('style')style.textContent = cssTextreturn style
}

然后保存刷新页面:

样式就出来了!

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

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

相关文章

[C语言]——动态内存经典笔试题分析

目录 一.题目1 1.运行结果 2.分析 3.问题所在 4.更正 二.题目2 1.运行结果 2.分析 3.问题所在 4.更正 三.题目3 1.问题所在 2.更正: 四.题目4 一.题目1 void GetMemory(char *p){p (char *)malloc(100);}void Test(void){char *str NULL;GetMemory…

2024春算法训练4——函数与递归题解

一、前言 感觉这次的题目都很好,但是E题....(我太菜了想不到),别人的题解都上百行了,晕; 二、题解 A-[NOIP2010]数字统计_2024春算法训练4——函数与递归 (nowcoder.com) 这种题目有两种做法:…

泛微OA 自定义多选浏览框

1、建模引擎-》应用建模-》表单 2、建模引擎-》应用建模-》模块 3、建模引擎-》应用建模-》查询 4、把查询页面挂到前端页面。 效果展示: 5、建模引擎-》应用建模-》浏览框 6、流程表单中字段应用

Windows Edge浏览器的兼容性问题及解决方案

1、Windows Edge(了解 Microsoft Edge): 简单介绍: Microsoft Edge是一款由微软开发的网页浏览器,最初于2015年伴随Windows 10推出,作为Internet Explorer的继任者,旨在提供更快、更安全、更现代…

CV论文--2024.4.8

1、OW-VISCap: Open-World Video Instance Segmentation and Captioning 中文标题:OW-VISCap:开放世界视频实例分割和字幕 简介:开放世界视频实例分割是一项重要的视频理解任务,然而现有的方法存在一些限制。大多数方法要么只能在…

Springer旗下28年老刊,仅1个月录用,首个CCF推荐将被剔除?

毕业推荐 SSCI • 社科类,分区稳步上升(最快13天录用) IEEE: • 计算机类,1区(TOP),CCF推荐 SCIE • 计算机工程类,CCF推荐(最快16天录用) 近日更新报道新增5本期刊…

Day79:服务攻防-中间件安全IISApacheTomcatNginx弱口令不安全配置CVE

目录 中间件-IIS-短文件&文件解析&蓝屏&写权限 HTTP.SYS(CVE-2015-1635)主要用作蓝屏破坏,跟权限不挂钩 IIS短文件(iis全版本都可能有这个问题) IIS文件解析 IIS写权限 中间件-Nginx-文件解析&目录穿越漏洞&CRLF …

Git 配置BCompare工具

一、Git配置BCompare工具 1、安装BCompare工具 下载BCompare安装包,打开安装包直接安装即可,如下: 2、禁止BCompare访问网络 网络进出站进行配置,限制BCompare访问网络,如果不进行上网限制,可能存在被封的…

Spring Security——08,自定义失败处理

自定义失败处理 一、自定义实现类1.1 实现AccessDeniedHandler1.2 实现AuthenticationEntryPoint 二、配置SpringSecurity三、测试3.1 认证失败3.2 权限不足 一键三连有没有捏~~ 我们还希望在认证失败或者是授权失败的情况下也能和我们的接口一样返回相同结构的json&#xff0c…

工业视觉检测

目录 我对工业视觉检测的了解 一、关键组成部分 二、应用场景 三、技术挑战 我对工业视觉检测的了解 工业视觉检测是利用机器视觉技术对产品质量进行自动化检查的过程,它在制造业中扮演着至关重要的角色,用于确保产品质量、提高生产效率、减少人工成…

Linux从入门到精通 --- 4(上).快捷键、软件安装、systemctl、软链接、日期和时区、IP地址

文章目录 第四章(上):4.1 快捷键4.1.1 ctrl c 强制停止4.1.2 ctrl d 退出4.1.3 history4.1.4 历史命令搜索4.1.5 光速移动快捷键4.1.6 清屏 4.2 软件安装4.2.1 yum4.2.2 apt 4.3 systemctl4.4 软链接4.4.1 ln 4.5 日期和时区4.5.1 date命令4.5.2 date进行日期加减…

STC89C51学习笔记(五)

STC89C51学习笔记(五) 综述:文本讲述了代码中速写模板的创建、如何将矩阵键盘的按键与数字一一对应以及如何创建一个矩阵键盘密码锁。 一、速写模板 点击“templates”,再鼠标右键选择配置,按照以下方式即可修改一些…

倒反天罡的ssh后门 | Linux 后门系列

0x00 简介 今天看见有安全研究员发了一篇 ssh 后门的文章,复现思考后分享给大家 https://blog.thc.org/infecting-ssh-public-keys-with-backdoors 0x01 ssh密钥登录 参考 https://www.commandlinux.com/man-page/man5/authorized_keys.5.html 运维人员管理 Linux …

【Linux ARM 裸机】开发环境搭建

1、Ubuntu 和 Windows 文件互传 使用过程中,要频繁进行 Ubuntu 和 Windows 的文件互传,需要使用 FTP 服务; 1.1、开启 Ubuntu 下的 FTP 服务 //安装 FTP 服务 sudo apt-get install vsftpd //修改配置文件 sudo vi /etc/vsftpd.conf//重启…

rsync 远程同步----------安全高效的异地备份策略

目录 一、rsync介绍 rsync和cp的区别 rsync和scp的区别 二、rsync同步方式 rsync备份的方式 三、配置rsync源服务器 ①本地复制 ②下行同步 ③上行同步 四、常用Rsync命令 五、配置源的两种表达方法 六、部署rsync下行同步 ①环境准备 ②配置rsync源服务器-------…

【Leetcode每日一题】 动态规划 - LCR 166. 珠宝的最高价值(难度⭐⭐)(52)

1. 题目解析 题目链接:LCR 166. 珠宝的最高价值 这个问题的理解其实相当简单,只需看一下示例,基本就能明白其含义了 2.算法原理 想象一下,你正在玩一个寻宝游戏,游戏地图是一个二维网格,每个格子都藏有一…

单片机IGBT驱动电路一例

概述: 驱动的作用有三个: 1.是作为放大器获得所需要的驱动电压。 2.是提高输出电流能力。 3.是进行功率回路和控制回路的隔离 信号从MCU到IGBT驱动芯片 首先驱动电流需要放大 MCU的输出电流是mA级别,而IGBT需要的驱动电流可能达到几安培…

SpringCloud Alibaba Sentinel 简介和安装

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅,从传统的模块之间调用,一步步的升级为 SpringCloud 模块之间的调用,此篇文章为第十三篇,即介绍 SpringCloud Alibaba Sentinel 简介和安装。 二、Sentinel 简介 2.1 Sent…

Qt使用iostream的cout

在QT想使用iostream的cout。 参考以下博客: (转载)Qt中使用cout输出的方法 pro里加上; CONFIG console勾选 Run in Terminal clean工程,重新构建 上面是cout的,下面是我的另一个函数的qDebug输出的。

编译原理实验3(基于算符优先文法分析的语法分析器 )

实验目的 加深对语法分析器工作过程的理解;加强对算符优先分析实现语法分析程序的掌握;能够产用一种编程语言实现简单的语法分析程序;能够使用自己编写的分析程序对简单的程序段进行语法分析。 实验要求 根据简单表达式文法构造算符优先分…