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

news2025/1/24 14:47:28

使用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 = cssText
    return style
}

然后保存刷新页面:

样式就出来了!

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

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

相关文章

百度松果菁英班——机器学习实践四:文本词频分析

飞桨AI Studio星河社区-人工智能学习与实训社区 🥪jieba分词词频统计 import jieba # jieba中文分词库 ​ with open(test.txt, r, encodingUTF-8) as novelFile:novel novelFile.read() # print(novel) stopwords [line.strip() for line in open(stop.txt, r,…

C语言--条件编译(常见的编译指令)

#if(开始(判断条件))#endif(结束) 条件满足就参与编译,这里是一个判断的语句,当M大于0的时候,打印hehe不然就不打印 或者注释代码也好用 当#if 0的时候 ,也…

SDWAN专线保护企业数据传输安全

企业数字化进程的加速和网络环境的复杂化,数据传输安全已经成为企业网络管理的头等大事。SD-WAN(软件定义广域网)作为一种新兴的网络技术,不仅能够提升网络性能和效率,还能够有效地保护企业数据传输的安全性。以下是SD…

亚马逊店铺引流:海外云手机的利用方法

在电商业务蓬勃发展的当下,亚马逊已经成为全球最大的电商平台之一,拥有庞大的用户群和交易量。在激烈的市场竞争中,如何有效地吸引流量成为亚马逊店铺经营者所关注的重点。海外云手机作为一项新兴技术工具,为亚马逊店铺的流量引导…

第六篇: 3.5 性能效果 (Performance)- IAB/MRC及《增强现实广告效果测量指南1.0》

​​​​​​​ 翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇 广告效果测量定义和其他矩阵之- 3.1 广告印象(AD Impression)第三篇 广告效果测量定义和其他矩阵之- 3.2 可见性 (Viewability…

ctfshow web入门 命令执行 web53--web77

web53 日常查看文件 怎么回事不让我看十八 弄了半天发现并不是很对劲,原来我发现他会先回显我输入的命令再进行命令的回显 ?cnl${IFS}flag.php||web54 绕过了很多东西 基本上没有什么命令可以用了但是 grep和?通配符还可以用 ?cgrep${IFS}ctfshow${IFS}???…

【论文速读】| 大语言模型平台安全:将系统评估框架应用于OpenAI的ChatGPT插件

本次分享论文为:LLM Platform Security: Applying a Systematic Evaluation Framework to OpenAI’s ChatGPT Plugins 基本信息 原文作者:Umar Iqbal, Tadayoshi Kohno, Franziska Roesner 作者单位:华盛顿大学圣路易斯分校,华盛…

PicGo + Gitee + VsCode - 搭建私人图床

文章目录 前言搭建图床VsCode 安装插件安装 PicGo准备 Gitee 图床测试 尾声 前言 本人是一个重度 vimer,并且喜欢客制化一些东西… Typora 固然好用,但不支持 vim…发现 vscode 中既可以使用 vim,也可以 md,用起来比较舒服.因此…

如何自定义项目启动时的图案

说明:有的项目启动时,会在控制台输出下面的图案。本文介绍Spring Boot项目如何自定义项目启动时的图案; 生成字符图案 首先,找到一张需要设置的图片,使用下面的代码,将图片转为字符文件; impo…

vscode 安装vim插件配置ctrl + c/v功能

搜索Vim插件 插件介绍部分有提示操作 首先安装该插件,然后按照下述步骤设置ctrl相关的快捷键,以便于脱离im快捷键而愉快的敲代码。 1.在“设置”搜索框内搜索vim.handleKeys,选择 Edit in settings.json 2. 设置ctrl-c,ctrl-v等快捷键置为fa…

【Frida】【Android】 10_爬虫之WebSocket协议分析

🛫 系列文章导航 【Frida】【Android】01_手把手教你环境搭建 https://blog.csdn.net/kinghzking/article/details/136986950【Frida】【Android】02_JAVA层HOOK https://blog.csdn.net/kinghzking/article/details/137008446【Frida】【Android】03_RPC https://bl…

LDR6328助力Type-C普及,便捷充电,绿色生活更精彩

随着科技的进步和全球统一接口的需求,Type-C接口正日益受到青睐。越来越多的设备正选择采纳这一先进的接口设计,它的普及无疑在改善着我们的日常生活。 在过往,许多小功率设备如小风扇、蓝牙音箱、桌面台灯以及家用加湿器等,都普遍…

STC89C51学习笔记(五)

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

Linux初学(十七)redis

一、简介 redis就是一个内存数据库 redis中的数据,都是保存在内存中 端口:6379 二、安装redis 方法一:编译安装 方法二:yum安装-epel 第一步:配置epel源 详见:http://t.csdnimg.cn/AFl1K第二步&#xff1a…

为什么苹果 Mac 电脑需要使用清理软件?

尽管 Apple Mac 电脑因其卓越的性能、简洁高效的 macOS 操作系统及独特的美学设计备受全球用户青睐,但任何电子设备在长期使用后都难以避免面临系统资源日渐累积的问题。其中一个重要维护需求在于,随着使用时间的增长,Mac电脑可能会由于系统垃…

【CicadaPlayer】demuxer_service的简单理解

G:\CDN\all_players\CicadaPlayer-github-0.44\mediaPlayer\SMPMessageControllerListener.cppplayer的demuxer服务类 std::unique_ptr<demuxer_service> mDemuxerService{nullptr};根据option (Cicada::options),可以决定音视频的不同操作,通过 hander可以获得具体使…

Svg Flow Editor 原生svg流程图编辑器(五)

系列文章 Svg Flow Editor 原生svg流程图编辑器&#xff08;一&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;二&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;三&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;四&#xf…

MySQL高级篇(存储引擎InnoDB、MyISAM、Memory)

目录 1、存储引擎简介 1.1、查询建表语句&#xff0c;默认存储引擎&#xff1a;InnoDB 1.2、查看当前数据库支持的存储引擎 1.3、创建表&#xff0c;并指定存储引擎 2、 存储引擎-InnoDB介绍 2.1、存储引擎特点 3、MyISAM存储引擎 4、Memory存储引擎 5、InnoDB、MyISAM、Memory…

AcWing刷题-公约数

公约数 代码 from math import gcd a, b map(int, input().split()) p int(input()) max_gcd gcd(a, b) res []for i in range(1, int(max_gcd**0.5)1):if max_gcd % i 0:res.append(i) res.append(max_gcd//i) res sorted(set(res))for _ in range(p):l, r map(int,…

【ArcGIS微课1000例】0108:ArcGIS计算归一化差值植被指数

本文讲解ArcGIS中,基于Landsat8数据的NDVI归一化差值植被指数计算。 文章目录 一、加载数据二、归一化植被指数NDVI1. NDVI介绍2. NDVI计算三、注意事项一、加载数据 加载配套数据0108.rar中的Landsat8的8个单波段数据,如下所示: Landsat8波段信息对照表如下表所示: 接下来…