Chrome NewTab ページでの iframe 拡張性

Tags: tag Gist tag Md tag Js tag Iframe tag Html tag Web tag Extension tag Security tag Chromium tag Code

chrome://newtab（新しいタブページ）で iframe を使ってコンテンツを読み込む際の拡張性や仕組みについて、技術的なポイントを整理したよ！

Google Chrome における newtab の構造

通常のウェブサイトと違って、chrome:// で始まるページはブラウザの特権領域（Privileged area）にあたるんだ。そのため、セキュリティ上の理由で強力な制限がかかっているよ。

1. セキュリティの壁（CSP）

chrome://newtab には非常に厳格な Content Security Policy (CSP) が設定されている。

  • 外部サイトの直接埋め込み禁止: frame-src や child-src で許可されていない限り、一般的な https:// サイトを iframe で読み込むことはできないよ。
  • クリックジャッキング対策: 悪意のあるサイトがブラウザの機能を勝手に操作するのを防ぐため、基本的には「自分自身（Googleのドメイン）」や「特定の許可されたソース」以外は拒否される仕組みになっているんだ。

2. 拡張機能（Extension）による上書き

もし自分で自由に iframe を配置したり、好きなコンテンツを表示させたりしたい場合は、「New Tab Overriding」 という拡張機能の機能を使うのが一般的だよ。

  • manifest.json の設定: chrome_url_overrides を使って、標準の newtab を自作の index.html に差し替える。
  • 拡張機能内での iframe 制限: 自作の newtab ページ内であれば、拡張機能のパッケージ内に含まれる HTML ファイルを iframe で読み込むのは簡単。 ただし、外部の https:// サイトを iframe で表示するには、その外部サイト側が X-Frame-Options: DENY や SAMEORIGIN を設定していないことが条件になるよ。

拡張性を高めるためのアプローチ

Web Components (Vite) の活用

iframe は境界がはっきりしすぎていて制御しにくいこともあるけれど、Google Chrome の設定画面や新しいタブページ自体、内部的には Web Components (Polymer や Lit) が多用されているんだ。

  • Shadow DOM: iframe を使わなくても、CSS や JS のスコープを分離できるから、ウィジェットのような部品を作るのに向いているよ。

クロスドメイン通信

もし iframe 内のコンテンツと対話したい場合は、postMessage API を使う必要がある。

  • 親 (New Tab) ↔ 子 (iframe) でメッセージを投げ合うことで、セキュリティを保ったままデータをやり取りできるよ。

まとめ：自由にやりたいなら

標準の chrome://newtab をそのまま「改造」して iframe を増やすのは、ブラウザ自体のソースコードを書き換えない限り難しい。 だけど、Chrome Extension として「新しいタブ」を自作すれば、iframe を使って自分の好きなダッシュボードやサイトを埋め込むといった高い拡張性を手に入れることができるよ！