x1c 0d1x所以我试图创建一个Chrome扩展，允许从网站下载任何图像，但我是一个新手的JS和Web开发，所以这里是问题：
我部分地理解了我的代码，但它似乎应该是这样的：

content-script.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.");
  }
});

background.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”）
更新了background.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 });
  });
}

已更新content-script.js

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