Chrome扩展开发报错：Cannot read properties of undefined (reading 'addListener')

问题概述 #

作为JS与Web开发新手，开发Chrome图片下载扩展时遇到两个核心问题：

• 右键菜单选项不显示
• content-script.js首行报错：TypeError: Cannot read properties of undefined (reading 'addListener')

问题1：content-script报错原因及修复 #

chrome.runtime.onInstalled是仅background/service worker可用的API，content script环境下无法访问该事件。初始代码中在content-script里调用该API，直接导致了报错。

修复方式：

• 彻底移除content-script中chrome.runtime.onInstalled相关代码
• 你的场景完全不需要content-script，可直接删除整个文件，并在manifest.json中移除content_scripts配置段

问题2：右键菜单不显示原因及修复 #

创建右键菜单必须在background脚本中执行，且需注意：

1. 要在chrome.runtime.onInstalled事件中创建菜单，避免扩展更新/重载时重复创建（会引发ID冲突）
2. 确保manifest.json已声明contextMenus权限（你的配置已满足）

其他代码问题修复 #

1. downloadImage函数参数缺失：原代码调用时未传入sendResponse，导致异步回调时报错，需补充参数传递
2. 冗余的content-script注入：右键菜单点击时，可直接通过info.srcUrl获取图片地址，无需注入脚本到页面
3. 消息循环问题：原content-script中收到消息后再次发送相同消息，会引发无限循环，移除content-script即可解决

最终修正代码 #

manifest.json（精简版） #

{
  "manifest_version": 3,
  "name": "图片下载工具",
  "version": "1.0",
  "permissions": [
    "downloads",
    "contextMenus",
    "runtime"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

background.js #

// 扩展安装/更新时初始化右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "downloadImage",
    title: "Download Image",
    contexts: ["image"],
  });
});

// 监听右键菜单点击事件
chrome.contextMenus.onClicked.addListener((info) => {
  if (info.menuItemId === "downloadImage") {
    // 直接从右键点击信息中获取图片URL
    downloadImage(info.srcUrl);
  }
});

// 可选：保留消息监听，支持其他触发下载的方式
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "downloadImage") {
    downloadImage(request.imageUrl, sendResponse);
    return true; // 保持消息通道开放，直到异步下载完成
  }
});

// 下载图片核心函数
function downloadImage(imageUrl, sendResponse) {
  chrome.downloads.download({ url: imageUrl }, (downloadId) => {
    console.log(`下载已启动，ID: ${downloadId}`);
    // 若存在回调则返回结果
    if (sendResponse) {
      sendResponse({ downloadId });
    }
  });
}

验证步骤 #

1. 替换代码后，在Chrome扩展管理页面重新加载扩展
2. 打开任意含图片的网页，右键点击图片，可看到"Download Image"选项
3. 点击选项后，图片将自动下载到默认目录
4. 查看background service worker控制台（扩展管理页→点击"service worker"链接），可查看下载日志

内容的提问来源于stack exchange，提问作者webmessiah