とても嬉しいので記事にする
CORS = オリジン間リソース共有（Cross-Origin Resource Sharing）
ざっくり言うと、ページに使用するソースは自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) から参照する事はできませんよ、というもの。
詳細は他に良い記事が沢山あるので割愛します。
参考：なんとなく CORS がわかる...はもう終わりにする。
で、本題。Chrome 拡張機能のマニフェストバージョンを３にすると、以前はできなかった CORS 回避が簡単にできるようになりました。
これの何が嬉しいのかって言うと、拡張機能のbackground.jsなどから外部の REST API を叩こうとすると、API 側がAccess-Control-Allow-Originヘッダーを返すようにしていない限り、CORS エラーで取得できなかったり、API が JSONP に対応していればそれを使って取得していたのが解決できる、と。
こりゃ嬉しい。
もしかしたら、私が知らなかっただけで出来ていたのかもしれませんが、散々ググった結果、出来ないとの結論に落ち着いていたので、簡単にできた時は嬉しかったんですね。
あ、Chrome 拡張機能も Javascript も、素人もいいとこなので、勘違いしていたらすみません。
なお、その際は、この記事は自動的に黒歴史となる予定です。
やり方
manifest.jsonのバージョンを３にした上で、"host_permissions"を加えるだけです。
"manifest_version": 3,
"host_permissions": [
"https://api-address/"
]
あとはお好きにデータを引っ張ってきましょう。
ただし、V3 にすると、background.js（service_workerで指定した JS）ではxmlHttpRequestが使用できない為、fetchを使いましょう。
var url = "https://api-address/query";
fetch(url)
.then(function (res) {
return res.json(); // フェッチしたデータを JSON 形式に変換
})
.then(function (jsonData) {
console.log(jsonData); // JSON へ変換されたデータをコンソールに表示
})
})
これで、CORS 対応していない API でもブッ叩く事が出来るようになります。
『郵便番号検索 API』あたりが CORS エラーを返してくれると思うので、試してみて下さい。
まとめ
JSONP とか使わずに API レスポンスが取れて、とても嬉しいです。
ただ、実現する為にはマニフェストバージョンを３にする必要があるため、既存の拡張機能に実装するのは修正が面倒かもしれませんね。