🎨
PlasmoのContent Scripts UI を触ってみる

2024/12/09に公開
React
browserextension
plasmo
tech
 PlasmoとはPlasmoは、ブラウザ拡張機能を開発するためのモダンなフレームワークです。以下のような特徴があります：
React、TypeScriptを使用した開発が可能
popup、sidepanel、options pageなど、拡張機能の各種UIを簡単に実装可能
バックグラウンド処理やcontent scriptsの実装をサポート
ホットリロードによる快適な開発体験
優れたDX(Developer Experience)を提供
公式ドキュメント: https://docs.plasmo.com/

 Content Scripts UI (CSUI)Plasmoは、ReactやSvelteなどのUIコンポーネントをWebページに直接マウントする強力な機能を提供します。これをContent Scripts UI(CSUI)と呼びます。

 CSUIの特徴堅牢なスタイル分離
Shadow DOMによる完全なスタイル隔離
Webページのスタイルに影響されない独立したUI
CSSモジュールやTailwindCSSなどの使用が可能
安全なDOM操作
Shadow DOMによる保護された実行環境
Webページのスクリプトからの干渉を防止
予期しない副作用を回避
高い再利用性
どのWebページでも安全に動作
コンポーネントの移植が容易
一貫した見た目と動作を保証
Content Scripts UI: https://docs.plasmo.com/framework/content-scripts-ui

 実際に触ってみるhttps://github.com/PlasmoHQ/examples/tree/main/with-content-scripts-ui
をcloneして実行してみます。
git clone https://github.com/PlasmoHQ/examples.git
cd examples/with-content-scripts-ui
pnpm install # plasmoを別途追加でインストールする必要があるかもです
pnpm dev
その後、 https://docs.plasmo.com/framework を参考に、パッケージをロードします。
その後Googleのページを開くと、画像のようなページが表示されます。

 サンプルのコード（Googleページにサイドバーを追加）の実装を見てみる
 1. サイドバーの基本スタイル定義まず、google-sidebar-base.cssでサイドバーの基本的なレイアウトを定義されています：
with-content-scripts-ui/contents/google-sidebar-base.css
:root,
#plasmo-google-sidebar:host {
  --plasmo-google-sidebar-width: 420px;  /* サイドバーの幅を変数として定義 */
}

/* サイドバー表示時のメインコンテンツの調整 */
body.plasmo-google-sidebar-show,
body.plasmo-google-sidebar-show * {
  /* `100vw`: ビューポート（画面）の全幅 */
  /* `var(--plasmo-google-sidebar-width)`: サイドバーの幅（420px） */
  /* `calc(100vw - 420px)`: メインコンテンツの最大幅を計算 */
  max-width: calc(100vw - var(--plasmo-google-sidebar-width));
}

/* サイドバーの位置固定 */
#plasmo-google-sidebar {
  position: fixed;  /* 画面に固定 */
  z-index: 240;    /* 他の要素より前面に表示 */
  top: 0px;        /* 画面上部に配置 */
  right: 0px;      /* 画面右端に配置 */
}

 2. サイドバーの開閉アニメーションgoogle-sidebar.cssでは、サイドバーの開閉状態に応じたスタイルを定義します：
初期状態
[メインコンテンツ 100vw]
サイドバー表示時
[メインコンテンツ (100vw - 420px)] [サイドバー 420px]
with-content-scripts-ui/contents/google-sidebar.css
/* サイドバーが開いている状態 */
#sidebar.open {
  /* サイドバーの幅は420px */
  /* 右端から左に420px分移動させることで、サイドバーが画面内に表示される */
  /* マイナスの値を使用することで、「左方向」への移動を指定している */
  left: calc(var(--plasmo-google-sidebar-width) * -1);
}

/* サイドバーが閉じている状態 */
#sidebar.closed {
  left: 0px;  /* サイドバーを元の位置に戻す */
}
上のように、サイドバーの開閉に応じて、サイドバーの位置を調整しています。
以上のようにサイドバーのUIを調整することで、Googleのページにサイドバーを実装できます。

 まとめPlasmoを利用することで、ReactやTypeScriptを活用したモダンなブラウザ拡張機能の開発が容易になります。
特に、Content Scripts UI (CSUI)を活用することで、Webページに対して堅牢かつ再利用性の高いUIコンポーネントを簡単に追加できます。
ぜひ、公式ドキュメントやサンプルリポジトリを参考に、Plasmoを使った開発を始めてみてください！
Plasmoとは

Content Scripts UI (CSUI)

CSUIの特徴

実際に触ってみる

サンプルのコード（Googleページにサイドバーを追加）の実装を見てみる

1. サイドバーの基本スタイル定義

2. サイドバーの開閉アニメーション

まとめ

Discussion
