Chrome扩展跨站传递变量时遇Uncaught TypeError错误，如何修复？

报错原因 #

你遇到的Cannot read properties of undefined (reading 'addListener')错误，核心是代码运行的上下文错误：chrome.runtime、chrome.action这类扩展专属API只能在扩展的后台脚本（Service Worker/Background Page）中调用，不能直接放在普通网页的script.js里执行——网页环境没有这些API，自然会返回undefined。

修复步骤 #

1. 拆分代码到正确的上下文 #

将代码拆分为后台脚本（处理扩展逻辑）和内容脚本（与网页交互）两部分：

后台脚本（新建background.js）

这部分负责监听扩展图标点击、注入内容脚本、接收消息并存储变量：

'use strict';

// 监听扩展图标点击，向当前标签注入内容脚本
chrome.action.onClicked.addListener(tab => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: injectScriptLogic
  });
});

// 监听来自内容脚本的消息，存储变量
chrome.runtime.onMessage.addListener((message, sender) => {
  console.log('收到网页变量:', message.n);
  // 使用Chrome扩展存储API保存变量（跨上下文可用）
  chrome.storage.local.set({ savedLoginKey: message.n }, () => {
    console.log('变量已存储');
  });
});

// 要注入到网页的内容脚本逻辑
function injectScriptLogic() {
  // 这里可以直接访问网页的全局变量（比如网页中定义的xxx变量）
  // const pageVariable = window.xxx;
  // 发送变量给后台
  chrome.runtime.sendMessage({ n: 1 });
}

网页侧（如果需要主动触发）

如果网页需要主动向扩展发送变量，可在网页的script.js中添加以下代码（前提是扩展已安装且匹配当前域名）：

'use strict';

// 向指定ID的扩展发送消息
const editorExtensionId = "你的扩展实际ID";
function sendVarToExtension() {
  // 这里替换成网页实际的变量
  const pageVar = { n: 1 };
  chrome.runtime.sendMessage(editorExtensionId, pageVar, response => {
    if (chrome.runtime.lastError) {
      console.log('扩展未安装或不匹配');
    } else {
      console.log('变量已发送');
    }
  });
}

2. 配置manifest.json（关键） #

确保扩展的配置文件正确注册后台脚本、申请必要权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {},
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["scripting", "storage", "activeTab"],
  "host_permissions": ["<all_urls>"] // 替换成你需要访问的具体网站域名，比如"https://example.com/*"
}

3. 验证权限与上下文 #

• 后台脚本只能通过manifest.json注册，不能直接注入到网页
• 内容脚本注入后，可访问网页的DOM和全局变量，但不能直接调用扩展的后台API，必须通过消息通信
• 存储变量用chrome.storage.local，它是扩展的专属存储，跨后台、内容脚本、弹出页等上下文可用

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