如何解决将清单 v2 浏览器扩展移植到清单 v3 时遇到的以下问题？

Question

我正在将清单 v2 Chrome 扩展转换为清单 v3，并将后台脚本 background.js 转换为服务工作人员，但我在 Google Chrome 中收到错误消息。我对 Manifest v3 有点熟悉，但是 Service Worker 的概念对我来说仍然很困惑。这是错误消息。 注意：请记住，尽管只有一条错误消息，但我相信我的源代码中可能存在一些逻辑错误而不是语法错误，这些错误可能会在浏览器扩展中出现不需要的或意外的行为。

为了将此错误放在上下文中，我添加了名为

service-worker.js

、

content-script.js

和

manifest.json

的 Service Worker 代码。我认为我完成了将 MV2 扩展移植到 MV3 的大部分“繁重工作”，但似乎存在一些小问题。

service-worker.js

"use strict";

function sendAudioMessage(actionType, audioFile) {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    tabs.forEach(tab => {
      chrome.tabs.sendMessage(tab.id, { action: actionType }); // Simplified messaging
    });
  });
}

chrome.webNavigation.onCreatedNavigationTarget.addListener(onNav);
chrome.webNavigation.onBeforeNavigate.addListener(onNav);
chrome.webNavigation.onReferenceFragmentUpdated.addListener(onNav);
chrome.webNavigation.onHistoryStateUpdated.addListener(onNav);

function onNav({frameId}) {
  if(frameId > 0) return;
  sendAudioMessage('playNavigationSound');
}

chrome.downloads.onChanged.addListener(delta => {
  if(delta.state && delta.state.current === "complete") {
    sendAudioMessage('playDownloadCompleteSound');
  }
  if(delta.error && delta.error.current) {
    sendAudioMessage('playDownloadErrorSound');
  }
});

chrome.tabs.onUpdated.addListener((tabId, {mutedInfo}) => {
  if(mutedInfo && mutedInfo.reason === "user") {
    sendAudioMessage('playMuteWarningSound'); 
  }
});

function changeVolume(volumeLevel) {
  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    tabs.forEach(tab => {
      chrome.tabs.sendMessage(tab.id, { action: 'changeVolume', volume: volumeLevel });
    });
  });
}

// Example usage (wherever you'd change the volume in your extension logic)
changeVolume(0.75); 

content-script.js

// Helper function to play audio
function playAudio(audioFile) {
    const audio = new Audio(chrome.runtime.getURL(audioFile)); // Use chrome.runtime.getURL for packaged extension resources
    audio.play(); 
  }
  
  
  // Receive messages from your background script
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    switch(message.action) {
      case 'playNavigationSound':
        playAudio('nav.ogg');
        break;
      case 'playDownloadCompleteSound':
        playAudio('done.ogg');
        break;
      case 'playDownloadErrorSound':
        playAudio('error.ogg'); 
        break;
      case 'playMuteWarningSound':
        playAudio('unlock.ogg');
        break;
    }
  });


// Audio volume levels

// Helper function for setting volume
function setAudioVolume(volumeLevel) {
    const audioElements = document.querySelectorAll('audio');
    audioElements.forEach(audio => {
      audio.volume = volumeLevel;
    });
  }
  
  // Receive volume change messages from the extension
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'changeVolume') {
      setAudioVolume(message.volume);
    }
  });
  

manifest.json

{
  "manifest_version": 3,
  "name": "PopupSound",
  "description": "Plays a click sound when you click on a link. Also plays a trumpet sound when you finish downloading a file.",
  "author": "Michael Gunter",
  "version": "3.0",
  "default_locale": "en",
  "offline_enabled": true,
  "icons": {
    "32": "icon_32.png",
    "96": "icon_96.png",
    "128": "icon_128.png"
  },
  "background": {
    "service_worker": "service-worker.js"
  },
  "permissions": [
    "webNavigation",
    "downloads",
    "tabs"
  ],

  "content_scripts": [
    {
      "matches": ["<all_urls>"], 
      "js": ["content-script.js"],
      "run_at": "document_start"
    }
  ],

  "content_security_policy": {}
}

这是我从

chrome://extensions

得到的错误。

未捕获（承诺中）错误：无法建立连接。接收端不存在。

我希望这有帮助。

Answer 1

对于从内容脚本发送的消息，

ServiceWorker

中没有消息处理程序。