Chrome拡張のContent ScriptsからCross-Origin Read Blocking (CORB)を回避して外部のAPIと通信する

#まず結論
Chromeの仕様が変わってContent Scriptsからは通信できなくなった。
バックグラウンドページで処理してからデータを渡してもらうことで回避しよう。

#もっと詳しく
Chromeの仕様変更で**Cross-Origin Read Blocking (CORB)というものが適応された。これによって、外部のAPI（YouTube Data API v3）と通信する自作のChrome拡張が突然動かなくなった。
調査してみると、通常版のChromeでは何もエラーが出ないのに対して、Canary版では「Cross-Origin Read Blocking (CORB) blocked cross-origin response [URL] with MIME type application/json. See [URL] for more details.」**というwarningが出るようになった。指定された記事に解決策が載っていたのでここで紹介する。

#具体的な方法
Content Scriptsではなくbackgroundで処理してデータを渡す形でなら外部のAPIとも通信することができる。上記の記事に載っているコードをそのまま転載しておく。

content-script.js

chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

background.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

content-script.jsのchrome.runtime.sendMessage()の第一引数にフォアグラウンドからのデータを、第二引数に戻り値と続きの処理を記述する。ここでは省略形で書かれているが、古い書き方をすると

content-script.js

function(price) {
  ...
}

という風になる。
このpriceは、background.jsのsendResponse(price)で返された値となっている。

#バッググラウンドページについて
バックグラウンドページのコンソールはchrome://extensionsの「ビューを検証」の隣にあるリンクをクリックすると表示される。このページからはウェブサイトのDOMにアクセスできないので、先程のsendResponse()でフォアグラウンドにデータを渡してから続きの処理を書く必要がある。

また、APIにリファラーを設定している場合はこのバックグラウンドページのURLを許可する必要がある。このURLはchrome-extension://拡張機能のID/*とすればいいが、ローカルの開発版とリリースされた製品版でIDが異なっているので注意。

#参考記事
Chrome Platform Status