fetch を用いた非同期通信 – 生成AI時代のプログラミング学習

Chrome拡張機能において、外部APIとの非同期通信を行うには、fetch 関数を利用するのが一般的です。以下に、拡張機能における fetch を用いた非同期通信の基本的な使い方と注意点について詳しく説明します。

1. `fetch` の基本構文

fetch は Promise を返す非同期関数で、次のように使います。

javascript
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークエラー');
    }
    return response.json();
  })
  .then(data => {
    console.log('取得したデータ:', data);
  })
  .catch(error => {
    console.error('通信エラー:', error);
  });

2. Chrome拡張機能での利用場所

fetch は以下のようなスクリプト内で使用できます。

コンテントスクリプト（制限あり）
バックグラウンドスクリプト / サービスワーカー
ポップアップ / オプションページのスクリプト

ただし、コンテントスクリプトから直接外部ドメインにリクエストを送ることはできません。その場合は、バックグラウンドスクリプト経由で通信する必要があります。

3. パーミッションの設定（`manifest.json`）

外部APIにアクセスするには、manifest.json に適切なパーミッションを記述する必要があります。

例: `host_permissions` を使用

json
{
  "name": "API Fetch Example",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["scripting"],
  "host_permissions": [
    "https://api.example.com/*"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

4. POSTリクエストの例

外部APIにデータを送信するには、method: "POST" と body を指定します。

javascript
fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com'
  })
})
.then(response => response.json())
.then(data => {
  console.log('応答データ:', data);
})
.catch(error => {
  console.error('通信エラー:', error);
});

5. CORS（クロスオリジンリソース共有）についての注意

外部APIが CORSを許可していない場合、fetch による直接アクセスはブロックされます。これは拡張機能でも例外ではありません。回避策としては以下のいずれかになります。

外部API側で Access-Control-Allow-Origin を設定してもらう
バックグラウンドスクリプトでプロキシを介してリクエストを送る

6. バックグラウンド経由での実装例（メッセージ通信）

コンテントスクリプト側

javascript
chrome.runtime.sendMessage({
  type: 'FETCH_DATA',
  url: 'https://api.example.com/data'
});

サービスワーカー側

javascript
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'FETCH_DATA') {
    fetch(message.url)
      .then(res => res.json())
      .then(data => sendResponse({ data }))
      .catch(error => sendResponse({ error: error.message }));
    return true; // 非同期応答を有効にする
  }
});

まとめ

fetch を使えば、簡潔に外部APIと非同期通信が可能
通信先ドメインを host_permissions に指定する必要がある
CORS制限がある場合はバックグラウンドスクリプトを利用する
非同期処理であるため、then や async/await を適切に使う

生成日：2025/05/18

1. fetch の基本構文