Chrome 扩展程序“无法读取 undefined 的属性（读取'addListener'）”

问：

所以我正在尝试创建一个允许从网站下载任何图像的 chrome 扩展程序，但我是 js 和 Web 开发的新手，所以问题来了：

我部分理解了我的代码，但似乎它必须是这样的：

内容脚本.js

    chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "downloadMedia",
    title: "Download Image",
    contexts: ["image"],
  });
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "downloadImage") {
    const imageUrl = request.imageUrl;
    chrome.runtime.sendMessage({ action: "downloadImage", imageUrl: imageUrl });
  }
});

// Send a message to the background script to initiate the download
chrome.runtime.sendMessage({ action: "downloadImage", imageUrl: imageUrl }, (response) => {
  if (response && response.downloadId) {
    console.log(`Download initiated with ID: ${response.downloadId}`);
  } else {
    console.log("Download failed.");
  }
});

背景.js

    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "downloadImage") {
    const imageUrl = request.imageUrl;
    downloadImage(imageUrl);
    return true;
  }
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId === "downloadMedia") {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: (info) => {
        const imageUrl = info.srcUrl;
        chrome.runtime.sendMessage({ action: "downloadImage", imageUrl: imageUrl });
      },
      args: [info],
    });
  }
});

function downloadImage(imageUrl, sendResponse) {
  chrome.downloads.download({ url: imageUrl }, (downloadId) => {
    // The download is complete,send a response
    sendResponse({ downloadId });
  });
}

manifest.json 的组成部分

...
 "permissions": [
    "activeTab",
    "downloads",
    "contextMenus",
    "runtime"
  ],
...
 "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["/scripts/content-script.js"]
    }
  ]
...

该选项不会显示在上下文菜单中，在调试中，我总是在 content-js 的第一行看到此错误：

TypeError：无法读取 undefined 的属性（读取“addListener”）

更新了背景 .js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "downloadImage") {
    const imageUrl = request.imageUrl;
    downloadImage(imageUrl);
    return true;
  }
});

chrome.contextMenus.create({
  title: "Download Image",
  contexts: ["image"],
  id: "downloadImage",
});

chrome.contextMenus.onClicked.addListener(function (info, tab) {
  if (info.menuItemId === "downloadImage") {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: (info) => {
        const imageUrl = info.srcUrl;
        chrome.runtime.sendMessage({ action: "downloadImage", imageUrl: imageUrl });
      },
      args: [info],
    });
  }
});

function downloadImage(imageUrl, sendResponse) {
  chrome.downloads.download({ url: imageUrl }, (downloadId) => {
    // The download is complete, send a response
    sendResponse({ downloadId });
  });
}

更新了内容脚本.js

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "downloadImage") {
    const imageUrl = request.imageUrl;
    chrome.runtime.sendMessage({ action: "downloadImage", imageUrl: imageUrl });
  }
});