【ITニュース解説】Why your browser extension UI looks broken on half the web (and how a small Shadow DOM wrapper fixes it)

ブラウザ拡張機能は、ウェブページに新しい機能を追加する便利なツールだ。しかし、その拡張機能がページ内に表示するボタンやバッジといったユーザーインターフェース（UI）が、特定のウェブサイトで予期せず崩れてしまうという問題がよく発生する。開発者がテスト環境で完璧に動作することを確認しても、実際のオンラインストアなど複雑なサイトに導入すると、バッジが巨大になったり、透明になったり、画面の隅に張り付いたり、閉じボタンが消えたりすることがある。この現象は、ウェブサイト側で定義されているスタイルが、意図せず拡張機能のUIに影響を及ぼしてしまうために起こる。

多くのウェブサイト、特に大規模なオンラインストアのフロントエンドは、長年にわたるCSSの記述が積み重なってできている。そこには、すべての要素のスタイルをリセットするCSSリセットや、汎用的なスタイルを適用するユーティリティクラス、そして特定の要素だけでなくページ全体に影響を与える「グローバルセレクタ」などが複雑に絡み合っている。例えば、「すべてのdiv要素のpositionをrelativeにする」といった指定や、「すべてのbutton要素のスタイルを完全に解除する」といった指定、さらには「html要素のfont-sizeを62.5%に設定して、rem単位のフォントサイズが小さくなるようにする」といった設定が挙げられる。これらのサイト全体のスタイルが、ブラウザ拡張機能が追加する小さなUIコンポーネントにも適用されてしまい、その見た目が壊れてしまうのだ。

たとえ拡張機能のCSSクラス名に独自のプレフィックス（例えばsw-）を付けて、他のスタイルと競合しないように工夫したとしても、divやspan、buttonのような汎用的なHTML要素に対するスタイルルールや、font、line-height、color、text-alignといった親要素から子要素へ継承されるプロパティは、簡単には防げない。これらのスタイルが拡張機能のUIに「漏れ出して」しまい、意図しないデザインになってしまうのである。

この問題の解決策として、「Shadow DOM（シャドウルート）」というウェブ標準技術が有効だ。Shadow DOMは、ウェブページ内の他のコンテンツから完全に隔離されたDOMツリー（ウェブページの構造を表す木構造）を作成する機能である。拡張機能のUIをウェブページのdocument.bodyに直接追加する代わりに、まず独自のホスト要素（例えば特別なdiv要素）を作成する。そして、そのホスト要素にShadow DOMをアタッチし、そのShadow DOMの中に拡張機能のスタイルとマークアップ（HTMLコード）を配置する。こうすることで、拡張機能のUIはホストページのCSSの影響を受けなくなり、独立した見た目を保てるようになる。

Shadow DOMを利用した解決策には、特に重要な三つのポイントがある。

一つ目は、「:host { all: initial }とホスト要素へのall: initial !importantの適用」である。Shadow DOM内部のスタイルシートに:host { all: initial }と記述すると、Shadow DOMの境界でfont、color、line-heightといった継承プロパティがリセットされ、ホストページからのスタイルがShadow DOM内部に漏れ込むのを防ぐことができる。さらに、Shadow DOMをアタッチする外側のホスト要素（例えば<div id="shrinkwatch-badge">）自体にも、インラインスタイルとしてall: initial !importantとdisplay: block !importantを設定することが重要だ。これは、ホストページ側にある#idセレクタやbody > divといった強力なセレクタが、ホスト要素自体の表示（非表示にしたり、位置をずらしたり）を意図せず変更してしまうのを防ぐためだ。この設定により、ホスト要素がページ全体のCSSから独立し、常に適切な位置と表示を維持できるようになる。

二つ目は、「CSSの単位としてremではなくpxを使用すること」だ。Shadow DOM内部でも、1remという単位はホストページのhtml要素に設定されたfont-sizeに依存する。もしウェブサイトがhtml { font-size: 10px }のように設定している場合、拡張機能側で0.875remと指定しても、それは8.75pxとして解釈されてしまい、開発者が意図したサイズとは異なる表示になる可能性がある。これに対し、px（ピクセル）単位を使用すれば、どのウェブサイトでも常に固定された同じ値として扱われるため、拡張機能のUIは一貫した見た目を保つことができる。

三つ目は、「ホスト要素をdocument.documentElementに子要素として追加すること」である。通常、ページに要素を追加する際はdocument.bodyに対して追加するが、一部のシングルページアプリケーション（SPA）では、ページ遷移やモーダルウィンドウの表示時にdocument.bodyが完全に置き換えられたり、transformプロパティが適用されたりすることがある。特にbody要素にtransformプロパティが適用されると、position: fixedで固定された子孫要素が、ビューポート（ブラウザの表示領域）ではなくtransformが適用されたbody要素のコンテナに対して固定されてしまうという問題が発生する。ホスト要素をdocument.documentElement（つまり<html>要素）の子要素として追加することで、この問題を防ぐことができる。<html>要素は通常、このような操作の影響を受けないため、拡張機能のUIはposition: fixedが常にビューポートに対して正しく機能し、安定した表示を維持できるようになる。

これらの対策を講じることで、ブラウザ拡張機能のUIは、さまざまなウェブサイト環境において、開発者が意図した通りのデザインと配置で一貫して表示されるようになる。この手法は、拡張機能開発において、ウェブサイトの複雑なCSSとの衝突を回避し、安定したユーザー体験を提供する上で非常に効果的である。