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
}

然后保存刷新页面:

样式就出来了!

相关推荐
snows_l11 分钟前
MacOS 通过Homebrew 安装nvm
前端·macos
前端开发爱好者11 分钟前
下一代全栈框架:Deno + Vite 的结合体!
前端·javascript·后端
CUGGZ27 分钟前
前端部署,又有新花样?
前端·javascript
Zz_waiting.28 分钟前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者1 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者1 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
BillKu1 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391931 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391931 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ1 小时前
第三代 React,怎么玩?
前端·javascript·react.js