Chrome拡張機能のchrome.contextMenus.onClicked.addListenerが動かない

私は今、Chromeの拡張機能を作っており、どうしても分からないところがあったので質問させていただきました。
まず、コードをみてください。

js
1//back.js
2chrome.runtime.onInstalled.addListener(function(){
3        const menu=chrome.contextMenus.create({
4            type:"normal",
5            id:"contextno",
6            title:"ダウンロード",
7            contexts:["image"],
8            documentUrlPatterns:["https://www.pixiv.net/artworks/*"]
9    });
10});
11
12chrome.contextMenus.onClicked.addListener(function(info){
13    let ta=document.createElement("a");
14    ta.href=info.srcUrl;
15    ta.setAttribute('download',"a");
16    ta.dispatchEvent(new CustomEvent('click'));
17});

json
1//manifest
2{
3    "manifest_version": 3,
4    "name":"pixivdownload",
5    "version":"1.0.0",
6    "description":"pixivdownload",
7    "icons":{
8        "16": "icon16.png"
9    },
10    "background":{
11    "service_worker":"back.js",
12    "president":false
13    },
14    "permissions":[
15        "tabs",
16        "scripting",
17        "activeTab",
18        "contextMenus"
19    ],
20    "host_permissions":[
21        "https://www.pixiv.net/*"
22    ]
23}

この拡張機能の目標は、pixivの画像を右クリックからメニューそ選択しでダウンロードできるようにすることです。(名前を付けて画像を保存、は知っています。学習のために作っています。)
画像の上で右クリックしたときにメニューで"ダウンロード"と表示されるところ(下の画像)まではできたのですが、

それをクリックしてもchrome.contextMenus.onClickedがなかなか思うように動いてはくれません。
(この記事を参考にして、画像を保存しようとしています。)

どうすれば私の意図(右クリックされた画像を保存するためのダイアログを出し、フォルダや名前を指定し、ダウンロードする)通りに実行されますか?

初心者で分かりにくい点も多いと思いますが、御教授よろしくお願いします。

試してみたこと

chrome.contextMenus.onClicked.addListenerが実行されているかの確認
chrome.contextMenus.onClicked.addListenerを

js
1chrome.contextMenus.onClicked.addListener(function(info){
2    window.open("https://teratail.com/","_blank");
3});

に変更して実行しましたが、teatailは開きませんでした。
そもそもchrome.contextMenus.onClicked.addListenerが発火していないのではないのか?と思っています。

追加の質問

エラーを見ようとしても、真っ白なだけで何も表示されません(chrome://extensions/ではエラーと表示されたいます)。

原因がもし分かればどなたか御教授おねがいします。

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

回答1件

ベストアンサー

Manifest V3では、バックグラウンドスクリプトでDOMを操作することはできないようです。
スクリプトを特定のタブ内に挿入することでDOMを操作することが可能になります。
そのためにはまずManifest.jsonの"permissions"に"scripting"を加えます。
そしてonClickedでは次のようにします。

JavaScript
1chrome.contextMenus.onClicked.addListener((info, tab) => {
2  switch (info.menuItemId) {
3  case "contextno":
4    chrome.scripting.executeScript({
5      target: { tabId: tab.id },
6      function: download,
7      args: [info.srcUrl]
8    });
9    break;
10  }
11});
12
13function download(url) {
14  alert(url);
15}