Manifest V3 Service Worker で Axios が使えない

これは axios のデフォルトの adapter が XMLHttpRequest(XHR) に依存しているためです。Service Worker では XHR は使えません。そのため Axios の adapter を fetch を用いたものに差し替える必要があります。

import Axios from 'axios'
import fetchAdapter from '@vespaiach/axios-fetch-adapter'

// https://qiita.com/whiteraccoon/items/6296c3692478211c86d5
import 'core-js/stable'
import 'regenerator-runtime/runtime'

const axios = Axios.create({
  adapter: fetchAdapter
})

axios.get(...)

上記の例では @vespaiach/axios-fetch-adapter を用いました。しかしスターが少なく不安が残ります。よりベターな代替をご存じの方がいらっしゃいましたら教えて欲しいです。

DOMParser
Manifest V3 について

DOMParser

追記
MV3 service workerからoffscreenでDOM解析を書いたのでご参照ください。

Service Worker では DOMParser も使えません。

代わりに jsdom を使えという記述を見かけます。しかし、jsdom は node 用のライブラリで、ブラウザ(Serivce Worker)で動かせないんじゃないでしょうか。私は動かせませんでした。

普通に npm install jsdom して import するとエラーを吐きます。 webpack.config.js の resolve.fallback に fs やら child_process を追加すると取り合えず build はできるようになります。build できるだけで動きませんが・・・

今回は jsdom の導入をあきらめ、呼び出し元の content script / popup で parse することにしました。Service Worker のみで完結する方法は分かりません。正規表現で頑張るとか・・・

content script

chrome.runtime.sendMessage({ action: "get" }, (html) => {
  const parser = new DOMParser()
  const document = parser.parseFromString(html, 'text/html')
  const json = HTMLToJSON(document)
})

service worker

chrome.runtime.onMessage.addListener((request, _sender, callback) => {
  if (request.action === "get") {
    axios.get(...).then((response) => {
      // 本当はここで response.data を JSON に変換したい
      callback(response.data)
    })
  }
})