02 Chrome拡張機能2 をManifest V3に対応させてみる

browser_action→actionとbackgroundのscripts→service_workerなどが変わっています。

{
  "name": "クリックアラート2",
  "manifest_version": 3,
  "version": "1.1",
  "description": "クリックするとアラートを出すだけ2",
  "action": {
    "default_title": "EXTENTION_SAMPLE"
  },
  "background": {
      "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["script.js"]
  }]
}

chrome.action.onClicked.addListener(function (tab){
	chrome.tabs.sendMessage(tab.id, "Action");
});

chrome.runtime.onMessage.addListener(async function (
  message,
  sender,
  sendResponse
) {
  console.log("受信");
  if (message == "Action") {
      hogehoge();
  }
  sendResponse();
  return true;
});

function hogehoge() {
  alert('AAAAA');
}

このメッセージは、送られたmessegeがレスポンスを受け取って、返す前にmessageがcloseされてしまっているようです。

Uncaught (in promise) Error: The message port closed before a response was received.

script.jsで、chrome.runtime.onMessage.addListener(async function (内の下記分を追加する事で、消えます。

sendResponse();