ブラウザーの拡張機能でコンテンツ内に安全に情報を埋め込む方法のベストプラクティスとバッドプラクティス - 2025-08-18 - ククログ

テクノロジーカテゴリーの変更を依頼記事元:

www.clear-code.com

1user がブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fwww.clear-code.com%2Fblog%2F2025%2F8%2F18%2Fhow-to-embed-custom-ui-safely-by-browser-extensions.html" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://www.clear-code.com/blog/2025/8/18/how-to-embed-custom-ui-safely-by-browser-extensions.html">ブラウザーの拡張機能でコンテンツ内に安全に情報を埋め込む方法のベストプラクティスとバッドプラクティス - 2025-08-18 - ククログ</a><a href="https://b.hatena.ne.jp/entry/s/www.clear-code.com/blog/2025/8/18/how-to-embed-custom-ui-safely-by-browser-extensions.html">はてなブックマーク - ブラウザーの拡張機能でコンテンツ内に安全に情報を埋め込む方法のベストプラクティスとバッドプラクティス - 2025-08-18 - ククログ</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

ブラウザーの拡張機能でコンテンツ内に安全に情報を埋め込む方法のベストプラクティスとバッドプラクティス - 2025-08-18 - ククログ

Firefoxの拡張機能開発で育ち、今はChrome/EdgeなどのChromium系ブラウザー向け拡張機能も開発している... Firefoxの拡張機能開発で育ち、今はChrome/EdgeなどのChromium系ブラウザー向け拡張機能も開発している結城です。これらのブラウザー向け拡張機能では、拡張機能が能動的にUIを表示する方法が限られています1。能動的に任意の位置にUIを表示したい場合、windows.create()でウィンドウを開くか、コンテントスクリプトを使ってコンテンツ内にUIを埋め込むかのどちらかの方法を取る必要があります。この記事では、後者の「コンテンツ内にUIを埋め込む」やり方について、現時点でのベストプラクティスと、それ以外の方法の問題点を紹介します。最初に結論だけ述べると、mode:'closed'のShadow DOMを使い、画像などは拡張機能のパッケージ内に含めておくのが現状でのベストで、それ以外の方法は全てセキュリティまたはプライバシー保護の点で問題があります。前提：どういう時に