Skip to main content

Content Script UI Style

Style​

如上文所说，当 自定义 Root 容器后，plasmo 允许扩展开发者安全的给 CSUI 模块提供样式。 Plasmo 保证了如下的两点:

  1. 导出的样式，不会泄露到 web 页面本身
  2. 页面的样式不会影响到 CSUI 组件的样式。

Raw CSS Text​

你可以通过 给 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;
};

Import Stylesheet​

如果，你想引入样式文件，你可以指定 data-text 的 url 前缀。

content.ts
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 也支持 hydrate 样式的 CSS-in-JS cache , 比如 with-emotion

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，可以动态提取其中的 className 作为元素的样式。

content.ts
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;

自定义字体 Custom Font​

在 Plasmo 的 CSUI 中使用字体，你需要先在文件中 引入 css 文件。 浏览器不识别在 ShadowDom 中声明的字体。你必须在全局中引入他们。

  1. 在 assets 目录中添加你的 字体文件。
  2. 创建使用字体文件的 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;
}
  1. 在 CSUI 的配置中声明 css
content.tsx
export const config: PlasmoCSConfig = {
  matches: ["https://www.plasmo.com/*"],
  css: ["font.css"],
};
  1. 当浏览器注册字体后，你就可以使用他们了。
.hw-top {
  background: red;
  color: white;
  font-family: "Fascinate";
}

官方提供的 实例 ： with-content-scripts-ui/contents/plasmo-overlay

Styling the Shadow DOM​

ShadowDom 的 是#plasmo-shadow-container 的 plasmo-inline ，所以，可以用对应的 css 装饰器修改容器样式。

style.css
#plasmo-shadow-container {
  z-index: 99999;
}

#plasmo-inline {
  background: blue;
}
tip

如果某些样式被覆盖了。需要注意下 Caveats: Root Container Style

继承页面样式​

如果你想继承当前页面的样式，你需要覆盖内置的 Root Container , 把你的 CSUI 元素直接挂载到页面的 Dom 中。

自定义 Root Container

Caveats​

框架的通用样式封装（目前为止）还无法处理一些情况。以下是一些常见的注意事项：

变量冲突 CSS Variables​

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

为了解决 CSUI 和网页之间 CSS 变量的共享问题，你可以按照如下的方法解决：

  • 为你的 CSS 变量声明一个独特的前缀命名空间。
  • 将你的 CSS 变量提升到 :host 范围内。
  • 在 iframe 内部挂载 CSUI 元素，它拥有自己的 head 和 body 。

Root Container 的样式​

如果你的网页样式使用了一个 * 来识别元素的通用样式，他将会覆盖 Root Container 的样式。

实例说明：

假如网页样式中存在如下的 样式内容:

* {
  display: block;
}

以上的样式也会将 CSUI 元素的容器 block 方式展示。 这种情况下，你可以通过 Root Container 的内联样式来做到合适的方式。

或者你也可以使用 CSS 声明，提升一些样式的优先级，避免此类事情的方式。

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