Chrome扩展开发遇Uncaught TypeError：无法读取null的addEventListener属性

你遇到的报错核心原因是同一个foreground.js被同时加载到了两个完全独立的环境里：

• 一个是扩展的弹窗页面（popup.html），这里确实存在runcalculate按钮
• 另一个是你访问的普通网页（通过manifest里的content_scripts配置注入），这个网页里根本没有id="runcalculate"的按钮，所以脚本执行时document.getElementById("runcalculate")返回null，调用addEventListener就会触发类型错误

修复步骤 #

1. 拆分脚本文件 #

把原来的foreground.js拆成两个独立文件，分别对应弹窗和网页环境：

• popup.js：负责弹窗内的按钮交互逻辑
• content.js：负责注入到网页内的业务逻辑

popup.js 代码

function triggerPageCalculation() {
  // 通过Chrome扩展消息机制，通知当前活跃标签页的内容脚本执行逻辑
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {action: "runCalculate"});
  });
}

window.onload = function() {
  const calculateBtn = document.getElementById("runcalculate");
  calculateBtn.addEventListener("click", triggerPageCalculation);
};

content.js 代码

// 网页内要执行的计算逻辑
function calculatescript() {
  console.log("This prints to the console of the page");
}

// 监听来自弹窗的消息，触发对应逻辑
chrome.runtime.onMessage.addListener((request) => {
  if (request.action === "runCalculate") {
    calculatescript();
  }
});

2. 修改popup.html的脚本引用 #

把原来的foreground.js替换为拆分后的popup.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="popup.css">
    <title>Example Extension</title>
</head>
<body>
    <div>
        <button class="button button1" id="runcalculate">Calculate</button>
    </div>

    <script src="popup.js"></script>

</body>
</html>

3. 更新manifest.json配置 #

将content_scripts中的脚本路径改为拆分后的content.js：

{
    "manifest_version": 3,
    "name": "Example",
    "description": "An example of a chrome extension using manifest v3",
    "version": "0.0.1",
    "icons": {
        "16": "logo/logo-16.png",
        "48": "logo/logo-48.png",
        "128": "logo/logo-128.png"
    },
    "options_page": "settings/settings.html",
    "action": {
        "default_title": "example",
        "default_popup": "popup/popup.html"
    },
    "permissions": [
        "tabs", "scripting"
    ],
    "host_permissions": [
        "*://*/*"
    ],
    "background": {
        "service_worker": "service-worker.js"
    },
    "content_scripts": [{
        "js": ["content.js"],
        "matches": ["http://*/*", "https://*/*"]
    }]
}

为什么之前的方案无效？ #

你之前做的DOM加载等待（window.onload、defer）只在弹窗环境里有效，但内容脚本是注入到普通网页的——网页里本来就没有目标按钮，无论等多久都找不到元素，必然报错。

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