Content Scripts UI

Plasmoは、React、Svelte3、またはVue3コンポーネントを現在のウェブページにマウントするためのファーストクラスのサポートを提供します。この機能は、コンテンツスクリプトUI（CSUI (Content Scripts UI)）と呼ばれます。

拡張機能は必要に応じていくつでもCSUIを持つことができ、各CSUIは、configオブジェクトをエクスポートすることで、ウェブページのグループまたは特定のウェブページをターゲットとします。Reactを使用してUIの挿入を開始するには：

content.tsx

const CustomButton = () => {
  return <button>Custom button</button>
}
 
export default CustomButton

👀

NOTE: 複数のコンテンツスクリプトを持つには、contents/ディレクトリを作成し、そこにCSUIエントリを配置します。

完全な例については、with-content-scripts-ui (opens in a new tab)を参照してください。

Content Scripts UIはコンテンツスクリプトのサブセットです。そのため、通常のPlasmoコンテンツスクリプトと同様に、configオブジェクトをエクスポートすることができます。

Plasmo CSUIの動作原理

TL;DR: PlasmoはShadow DOM (opens in a new tab)を作成し、エクスポートされたコンポーネントをそこにマウントします。この分離テクニックにより、ウェブページのスタイルがコンポーネントのスタイルに影響を与えること、およびその逆を防止します。

詳細については、Plasmo CSUIのライフサイクルを参照してください。