Chrome拡張機能、Manifest.json Ver.3(MV3)で読み込み時に”Service worker registration failed”となる

Question

前提・実現したいこと

chromeの拡張機能開発の勉強中、いきなり壁にぶつかりました。
公式ドキュメント中のサンプルで、機能拡張アイコンをクリックでポップアップを表示させることは問題なくできました。
その簡単なカスタマイズとして、アイコンクリックでアラートメッセージを出そうとしているのですが、以下のエラーメッセージが出て立ち往生中です。

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

Service worker registration failed

Service workerの登録に失敗している、ということはわかりますが、何が原因なのかが不明です。
(下記manifest.jsonの"sample.js"が黄色でハイライト表示されます)
manifest.jsonやsample.jsで足りない記述や間違っている部分などご指摘いただけましたら幸いです。

該当のソースコード

//manifest.json
{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,//Ver.88 later
  "permissions": [
      "activeTab"
  ],
  "action": {
    "default_icon": "icon_32.png"
  },
  "icons": {
    "16": "icon_16.png",
    "32": "icon_32.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "service_worker": "sample.js"
  }
}

//sample.js
const test = "test"

※表題のエラーを通過させるため、JSファイルの内容は上記のようにシンプルな記述にしています。

試したこと

以下のようにbackgroundをcontent_scriptsに差し替えた際はサイトの読み込み時にアラートが表示されました。
（正常動作）

その他、末尾にセミコロンを付けてみても同様のエラー。

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["sample.js"]
  }
]

//sample.js
window.onload = () => {
   alert("test")
}

補足情報（FW/ツールのバージョンなど）

Chromeのバージョンは88.0.4324.182です。

2021.03.10 追記
Qiita：「自作のChrome拡張機能をManifestV3に移行してみた」にて、同様の現象を経験された方がいらっしゃいました。
JSファイルはmanifest.jsonと同階層でないといけないという記述がありましたが、そもそも同階層に配置しているにも関わらずエラーとなっているので原因がわかりません。

Answer 1

サービスワーカーに下記のように書くと、エラーが発生すると言うことでしょうか？

// 下記ではエラーが発生
window.onload = () => {
   alert("test")
}

これは単に、サービスワーカーではDOMにアクセスできないためだと思います。

• Service Workerとは

単純に読み込めているか確認するなら、

console.log("OK");

などで確認するのはどうでしょうか。

Comments

[stcamp]

akkieさん

> これは単に、サービスワーカーではDOMにアクセスできないためだと思います。

ありがとうございます。
確かに、DOMアクセスが原因でエラーが出ていたようです。
エラーは出なくなりましたが、ログも吐きませんでした。
まぁ、ひとまず先へ進むことができるようになったので良しとしよう、
そう自分に言い聞かせています。

あとはマニフェストの設定やServise worlerについて少しずつ調べていこうと思います。