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.hqwc.cn/news/599368.html

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

相关文章

文档管理系统解决方案(word原件)

1.系统概述 1.1.需求描述 1.2.需求分析 1.3.重难点分析 1.4.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 数据备份技术 3.系统功能设计 3.1.功能清单列表 3.2.基础数据管理 3.3.位置管理 3.4.文档使用 3.5.文档管理 软件全套资料包获取方式①:软件项…

基于R语言、MaxEnt模型融合技术的物种分布模拟、参数优化方法、结果分析制图与论文写作

第一章、理论篇:以问题导入的方式,深入掌握原理基础 什么是MaxEnt模型? MaxEnt模型的原理是什么?有哪些用途? MaxEnt运行需要哪些输入文件?注意那些事项? 融合R语言的MaxEnt模型的优势&…

vscode教程

个人笔记(整理不易,有帮助点个赞) 笔记目录:学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔:工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 目录 一&#xff1a…

【Java集合进阶】LinkedList和迭代器的源码分析泛型类、泛型方法、泛型接口

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 …

Ubuntu22.04平台编译完美解决问题“error: GLSL 4.5 is not supported.”【GLSL(OpenGL着色器语言)】

GLSL介绍 GLSL(OpenGL着色器语言)是用于编写OpenGL着色器程序的语言。GLSL 4.5 是 GLSL 的一个版本,引入了许多新的特性和改进,旨在提高着色器编程的灵活性和性能。GLSL 4.5 工具通常是用于编写、调试和优化 GLSL 4.5 着色器代码…

[AutoSar]BSW_Memory_Stack_006 NVM 的常用实现方式 (Per_instance/NVBlockSwComponent)

目录 关键词平台说明一、定义及说明1.1 per_instance memories(PIM)1.2 Service NvBlockNeeds (SN)1.3 NVBlockSwComponent1.4 NvblockDescriptor 二、NVM 的常用现方式2.1 不使用PIM 不经过RTE 访问NV block2.1.1 描述2.1.2 实现 2.2 使用PIM 且经过RTE…

js笔记(学习存档)

JS的调用方式与执行顺序 使用方式 HTML页面中的任意位置加上<script type"module"></script>标签即可。 常见使用方式有以下几种&#xff1a; 直接在<script type"module"></script>标签内写JS代码。直接引入文件&#xff1a;…

java数据结构与算法刷题-----LeetCode367. 有效的完全平方数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 自实现Math.sqrt()函数&#xff1a;牛顿迭代法 自实现Math.sqrt(…

【QT+QGIS跨平台编译】076:【libdxfrw跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、libdxfrw介绍二、QGIS下载三、文件分析四、pro文件五、编译实践一、libdxfrw介绍 libdxfrw是一个用于读取和写入DXF(Drawing Exchange Format)文件的开源C++库。DXF是一种由AutoCAD开发的文件格式,用于存储CAD(计算机辅助设计)图形数据,它…

预定义详解

学习流程 ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————…

Sql优化篇-干货总结大全

前言 我们经常会听到Sql优化的一个概念&#xff0c;但其实sql优化不一定就是说sql语句写的有问题&#xff0c;它可能是因为cpu资源爆满&#xff0c;或者内存空间不足&#xff0c;它也会导致sql执行卡顿&#xff1b;或者说表设计层面&#xff0c;过滤条件没有加索引之类的 等等…

Java之final、常量的详细总结

final final关键字是最终的意思&#xff0c;可以修饰类、方法、变量修饰类&#xff1a;该类被称为最终类&#xff0c;特点是不能被继承 //final修饰的类&#xff0c;类不能再被继承了 final class A{} class B extends A{}//会报错 修饰方法&#xff1a;该方法被称为最终方法&…