Performance APIとchrome.webRequestの比較

ブラウザ拡張機能を開発していると、「リクエストの情報を取りたいのに取れない！」という場面に出くわすことがあります。そんなとき候補に上がるのが Performance API と chrome.webRequest API の2つです。

どちらもリクエストの情報を扱うAPIですが、動作する層がまったく異なるため、できることとできないことに大きな差があります。この記事では両者の違いを整理し、どちらをどんな場面で使うべきかを解説します。

悩見坂楓

「Performance APIで画像のリクエスト取ろうとしたら取れなかったんだけど…」

著者

どっちのAPIを使うかより「なぜ取れないのか」を先に理解すると、スッと腑に落ちますよ

そもそも2つのAPIは何が違うの？
動作する「層」が違う
display:none問題 ― なぜ取得できないのか
1. 🔍 display:none の状況別・リクエスト取得可否
CORSの影響の違い
実際にどちらを使うべきか
まとめ

そもそも2つのAPIは何が違うの？

まずざっくりと整理しましょう。

Performance API はブラウザに標準搭載されたJavaScript APIで、ページ内で読み込まれたリソースのタイミング情報などを取得できます。拡張機能でなくても、通常のWebページのJavaScriptから呼び出せるのが特徴です。

// Performance APIの使用例
const entries = performance.getEntriesByType('resource');
entries.forEach(entry => {
  console.log(entry.name);         // リソースのURL
  console.log(entry.duration);     // 読み込みにかかった時間
});

一方 chrome.webRequest API はChrome拡張機能専用のAPIで、ブラウザが行うすべてのHTTPリクエストをネットワーク層レベルで監視・操作できます。通常のWebページからは使えません。

// chrome.webRequest APIの使用例（manifest.jsonでの権限設定が必要）
chrome.webRequest.onCompleted.addListener(
  (details) => {
    console.log(details.url);            // リクエストURL
    console.log(details.requestHeaders); // リクエストヘッダー
  },
  { urls: ["<all_urls>"] },
  ["requestHeaders"]
);

悩見坂楓

使える場所がそもそも違うんだね

著者

そうなんです。Performance APIは「誰でも使える」、chrome.webRequestは「拡張機能専用」と覚えておきましょう

動作する「層」が違う

2つのAPIの最大の違いは どのレイヤーで動いているか です。下の図を見てください。

🌐 ネットワーク層 chrome.webRequest

HTTPリクエストの送受信を直接監視。CSSやDOMの状態に関係なく、リクエストが発生した瞬間に検知できる。

↓

🎨 レンダリングエンジン層

HTMLの解析・CSSの適用・レンダリングツリーの構築を行う。display:noneの要素はここで「描画不要」と判断される。

↓

⚙️ JavaScript実行層 Performance API

レンダリングエンジンが「使った」と判断したリソースの情報をJavaScriptから参照できる。レンダリング結果に依存する。

▲ chrome.webRequestは上流、Performance APIは下流で動作する

chrome.webRequestはリクエストが発生した瞬間に 上流で 検知するため、後続の処理（CSSの適用など）の影響を受けません。一方Performance APIはレンダリングが終わった 下流で 情報を参照するため、レンダリングエンジンの判断に左右されます。川の上流と下流のようなイメージで捉えると分かりやすいかもしれません。

display:none問題 ― なぜ取得できないのか

Performance APIを使っていてハマりやすいのが display:noneで非表示にされた要素のリクエストが取得できない 問題です。

原因はレンダリングエンジンの仕組みにあります。display:none が指定された要素はレンダリングツリーから除外され「描画しなくていい要素」と判断されます。Performance APIは「描画に使われたリソース」を記録する仕組みのため、この判断に従って記録をスキップしてしまうのです。

一方chrome.webRequestはネットワーク層にいるため、レンダリングエンジンの判断とは無関係にリクエストを検知できます。

状況ごとの挙動の違いをまとめると下記のようになります。

🔍 display:none の状況別・リクエスト取得可否

状況	リクエスト発生	Performance API	chrome.webRequest
display:none 静的 <img> タグ	⚠️ 場合あり	❌ 取得できない	✅ 取得できる
display:none JS 動的生成	✅ 発生する	❌ 取得できない	✅ 取得できる
display:none CSS background-image	❌ 発生しない	❌ 取得できない	❌ 取得できない

なお、静的な <img> タグの場合はブラウザの プリロードスキャナー（HTMLを解析しながら別スレッドでリソースを先読みする仕組み）によってCSSが適用される前にリクエストが走ることがあります。そのためchrome.webRequestでは検知できるケースがあります。

> 悩見坂楓
> じゃあchrome.webRequestを使えば全部解決じゃないの？

> 著者
> 惜しい！CORSという別の壁が待ち構えています

CORSの影響の違い

Performance APIにはもう1つの制約として CORS（Cross-Origin Resource Sharing） の影響があります。

異なるオリジン（ドメイン）からのリソースは、サーバー側で Timing-Allow-Origin ヘッダーが設定されていないと、Performance APIから詳細なタイミング情報が取得できません。取れるのはリソースの存在だけで、レスポンスタイムなどは 0 になってしまいます。

const entry = performance.getEntriesByName('https://other-domain.com/image.png')[0];

console.log(entry.duration);       // → 0（CORSで詳細が隠される）
console.log(entry.responseEnd);    // → 0
console.log(entry.name);           // → URLは取れる