Chrome拡張機能開発での外部APIアクセス時にCORSを回避できない

実現したいこと

Chrome拡張機能から、ニコニコ動画のスナップショット検索APIを利用したい。

発生している問題・エラーメッセージ

Access to fetch at 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide' from origin 'chrome-extension://【Extension ID】' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

該当のソースコード

・manifest.json

json
1{
2  "manifest_version": 3,
3
4  // 中略
5
6  "background": {
7    "service_worker": "event.js"
8  },
9  "permissions": [
10    "tabs"
11  ],
12  "content_scripts": [
13    {
14      "matches": ["http://hogehoge/*"],
15      "css": ["style.css"],
16      "js": ["main.js"]
17    }
18  ],
19  "host_permissions": [
20    "<all_urls>"
21  ]
22}

・main.js

JavaScript
1async function fetchMovie(){  // 特定のhtmlボタンが押されたら発火する
2    await chrome.runtime.sendMessage({name: 'fetchMovie'});
3}
4
5chrome.runtime.onMessage.addListener((request, options) => {
6    if (request.name === 'movieTitle') {
7        let title = request.data.returnValue;
8
9        const movieTitle = document.getElementById('movieTitle');
10        movieTitle.textContent = title;
11    }
12});

・events.js

JavaScript
1chrome.runtime.onMessage.addListener((request) => {
2    let returnValue = null;
3
4    if (request.name === 'fetchMovie') {
5        let url = 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search' +
6            '?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter' +
7            '&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide';
8
9        fetch(url)
10            .then(
11                resp => {resp.json()}
12            ).then(
13                json => {returnValue = json}
14            );
15    }
16
17    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
18        chrome.tabs.sendMessage(
19            tabs[0].id, {
20            name: 'movieTitle',
21            data: {returnValue}
22            }
23        )
24    });
25});

試したこと

Chrome 拡張機能の CORS エラーを回避（Manifest V3）を参考に、manifest.jsonに「host_permissions」を追加し、「https: //api.search.nicovideo.jp/*」や「https: //api.search.nicovideo.jp/api/v2/snapshot/video/contents/*」、「https: //*/*」などを記載してみたのですが、いずれも上手くいきませんでした。（リンクになってしまうので空白入れています。）
また、fetch関数のmodeにno-corsを設定してみたところ空のレスポンスが返ってきました。

itagagaki

2023/03/07 23:46

バックグラウンドスクリプトからではなくmain.jsからならアクセスできたりしませんか？

743_

2023/03/08 02:15

> itagagakiさんコメント・アドバイスありがとうございます。質問にちゃんと記載していなくて申し訳ないのですが、実は元々main.js内で全て動かそうとしていました。main.js内でも同様にCORSエラーが発生していたため、下記の記事などを参考にbackgroundに移してみたという経緯です。参考：https://qiita.com/wataru86/items/ce461ac7f761c7b97e32#%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E5%A0%B4%E6%89%80%E3%81%AB%E3%81%82%E3%82%8B%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B とはいえ折角ご助言頂いたので、再度main.jsからのアクセスを試みてみましたが状況は変わりませんでした...。

itagagaki

2023/03/08 11:19

たぶんサーバー側（API側）でCORS対応されていないのではないでしょうか。

743_

2023/03/08 15:39

質問で挙げた記事を見る限り「拡張機能の設定でChromeのCORS制限を無効化して、サーバー側の設定に関わらずfetchできるようになる」という認識だったのですが、違いそうですね...。諦めて自分でサーバーを立てて対応することにします。コメント頂きありがとうございました。

行動規範の内容に同意します

回答2件

コーディングの問題ではなく、拡張機能の再読み込みが上手くいっていなかったのが原因のようでした。

実際の解決策としては、chrome://extensions/から一度該当拡張機能を削除し、再び「パッケージ化されていない拡張機能を読み込む」で拡張機能を読み込み直すことで、host_permissionsが正常に適用されました。

同様の症状に陥った方のご参考になれば幸いです。

投稿2023/03/10 09:45

編集2023/03/10 09:46

743_

総合スコア13

ベストアンサー

popupで実装してみました。正常に動作します。

manifest.json

json
1{
2  "name": "hoge",
3  "manifest_version": 3,
4  "version": "1.0",
5  "action": {
6    "default_popup": "popup.html"
7  },
8  "host_permissions": [
9    "<all_urls>"
10  ]
11}

popup.html

html
1<html>
2<body>
3  <script src="popup.js"></script>
4</body>
5</html>

popup.js

javascript
1const url = 'https://api.search.nicovideo.jp/api/v2/snapshot/video/contents/search' +
2  '?q=%E5%88%9D%E9%9F%B3%E3%83%9F%E3%82%AF&targets=title&fields=contentId,title,viewCounter' +
3  '&filters[viewCounter][gte]=10000&_sort=-viewCounter&_offset=0&_limit=3&_context=apiguide';
4
5fetch(url, {})
6  .then(response => {
7    if (response.ok) {
8      return response.text();
9    }
10    throw new Error('Response was not ok.');
11  })
12  .then(data => {
13    console.log(data);
14  })
15  .catch(error => {
16    console.log(error);
17  })