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文件:

javascript 复制代码
import cssText from 'data-text:~/contents/index.css'

// load style file
export const getStyle = () => {
    const style = document.createElement('style')
    style.textContent = cssText
    return style
}

然后保存刷新页面:

样式就出来了!

相关推荐
OpenGL5 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0221 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang22 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼25 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿27 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再29 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55534 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录38 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000039 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl40 分钟前
深度剖析Kafka读写机制
前端