Plasmo CSUIのスタイル設定

Plasmo CSUIの内蔵Root Containerを使用すると、拡張機能開発者はコンポーネントを安全にスタイル設定できます。これにより、ほとんどの場合、以下のことが保証されます。

エクスポートされたスタイルがウェブページに漏れない
ウェブページのスタイルがコンポーネントのスタイルに影響を与えない

例外については、注意事項を参照してください。

Raw 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は、with emotion (opens in a new tab)を使用する場合など、CSS-in-JSスタイルキャッシュをハイドレートするためにも使用できます。

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 Modules

CSS Modulesを使用するには、スタイルシートを2回インポートします。

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のスタイル設定

#plasmo-shadow-containerとplasmo-inlineというIDを使用して、CSSでRoot Containerのスタイルを変更します。

style.css

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

⚠️

一部のスタイルルールが上書きされない場合は、注意事項：Root Containerのスタイルを参照してください。

ウェブページのスタイルを継承する

ウェブページのスタイルを継承するには、内蔵のRoot Containerをオーバーライドして、コンポーネントをウェブページのDOMに直接マウントします。詳細はこちら。

注意事項

フレームワークの一般的なスタイルカプセル化では処理できない（まだ）状況が多くあります。いくつかの一般的な問題点を以下に示します。

CSS変数

CSS変数は、同じブラウザタブ内のすべてのフレームで共有されます。つまり、ウェブページが:rootコンテキストでいくつかのCSS変数を宣言した場合、それらが優先されます。

CSUIとウェブページの間でのCSS変数の共有を軽減するには、次のいずれかの方法を使用できます。

CSS変数に一意のプレフィックス名前空間を宣言する
:hostスコープの下にCSS変数をホストする
独自のheadとbodyを持つiframe内にコンポーネントをマウントする

Root Containerのスタイル

ホストウェブページがグローバルな*指定子を使用してページのスタイルを設定する場合、Root Containerのスタイルを上書きする可能性があります。例：

* {
  display: block;
}

上記のコードにより、ルートコンテナはブロック表示になります。このような場合は、インラインスタイルでルートコンテナのスタイルを上書きすると、コンテナの一貫性を維持できます。

Root Containerのスタイルを変更するために上書きできないCSSスタイル宣言が存在する場合があります。そのような場合は、!importantフラグを回避策として使用できます。

style.css

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

Life Cycle Background SW