为 Plasmo CSUI 设置样式

Plasmo CSUI 的内置 Root Container 允许扩展开发者安全地为其组件设置样式。它确保了大部分情况下：

导出的样式不会泄露到网页中
网页的样式不会影响组件的样式

请参阅注意事项以了解何时它不起作用。

原始 CSS 文本

要为您的 CSUI 设置样式，请导出一个 getStyle 函数：

content.tsx

import type { PlasmoGetStyle } from "plasmo"
 
export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.textContent = `
    p {
      background-color: yellow;
    }
  `
  return style
}

导入样式表

要导入 CSS/LESS/SASS 文件，请将 getStyle API 与 data-text 导入方案结合使用：

content.tsx

import styleText from "data-text:./style.scss"
import type { PlasmoGetStyle } from "plasmo"
 
export const getStyle: PlasmoGetStyle = () => {
  const style = document.createElement("style")
  style.textContent = styleText
  return style
}

CSS-in-JS

getStyle API 还可以用于水合 CSS-in-JS 样式缓存，例如在使用 with emotion (opens in a new tab) 时：

content.tsx

import createCache from "@emotion/cache"
import { CacheProvider } from "@emotion/react"
import type { PlasmoGetStyle } from "plasmo"
 
const styleElement = document.createElement("style")
 
const styleCache = createCache({
  key: "plasmo-emotion-cache",
  prepend: true,
  container: styleElement
})
 
export const getStyle: PlasmoGetStyle = () => styleElement

CSS 模块

要使用 CSS 模块，请两次导入样式表：

content.tsx

import styleText from "data-text:./style.module.css"
import type { PlasmoCSConfig } from "plasmo"
 
import * as style from "./style.module.css"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = styleText
  return style
}
 
const Overlay = () => <h1 className={style.header}>Captain Log</h1>
 
export default Overlay

自定义字体

要在您的 CSUI 中使用自定义字体，您必须在 CSS 文件中导入字体，并在配置对象的 css 属性中声明它。浏览器无法识别在 ShadowDOM 内声明的字体资产。您必须在全局范围内加载它们。

将您的字体添加到 assets 目录（例如 /assets/Fascinate.woff2）
在内容脚本旁边创建一个 font.css 文件，使用 data-base64 方案内联导入字体：

font.css

@font-face {
  font-family: "Fascinate";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(data-base64:~assets/Fascinate.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

在内容脚本配置的 css 属性中声明该文件：

content.tsx

export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"],
  css: ["font.css"]
}

一旦浏览器注册了字体，您可以在 CSS 样式中引用它：

style.css

.hw-top {
  background: red;
  color: white;
  font-family: "Fascinate";
}

请参阅 with-content-scripts-ui/contents/plasmo-overlay.tsx (opens in a new tab) 获取完整示例。

设置 Shadow DOM 样式

使用 ID #plasmo-shadow-container 和 plasmo-inline 来更改 CSS 中的 Root Container 样式：

style.css

#plasmo-shadow-container {
  z-index: 99999;
}
 
#plasmo-inline {
  background: blue;
}

⚠️

如果某些样式规则未被覆盖，请参阅注意事项：根容器样式。

继承网页的样式

要继承网页的样式，请覆盖内置的 Root Container 以直接将组件挂载到网页的 DOM 中。点击此处获取更多详细信息。

注意事项

框架的通用样式封装无法处理许多情况（尚未）。以下是一些常见的问题：

CSS 变量

CSS 变量在同一浏览器标签页内的每个框架中共享。这意味着如果网页在 :root 上下文中声明了一些 CSS 变量，则它们会优先于您的变量。

为了减轻 CSUI 和网页之间的 CSS 变量共享，您可以：

为您的 CSS 变量声明一个唯一的前缀命名空间
将您的 CSS 变量提升到 :host 范围
在 iframe 中挂载您的组件，iframe 有自己的 head 和 body

根容器样式

如果主机网页使用全局 * 选择器来设置页面样式，它可能会覆盖 Root Container 的样式。例如：

* {
  display: block;
}

上述代码将导致根容器具有块级显示。在这种情况下，使用内联样式覆盖根容器样式有助于保持容器的一致性。

可能存在一些无法被覆盖的 CSS 样式声明，以更改 Root Container 样式。在这种情况下，可以使用 !important 标志作为解决方法。

style.css

#plasmo-shadow-container {
  z-index: 2147483646 !important;
}

Life Cycle 后台服务工作者