Chrome扩展按钮绑定事件报错：Uncaught TypeError: Cannot read properties of null

你的核心问题是脚本作用域混淆：弹窗里的按钮属于扩展UI的DOM，而负责绘制边框的border.js如果是注入网页的内容脚本，它只能访问当前网页的DOM，根本找不到弹窗里的按钮，所以会报Cannot read properties of null错误；反过来如果把脚本放在弹窗里，操作的是弹窗的document.body，边框自然会出现在弹窗里。

正确的思路是拆分脚本职责，通过Chrome扩展的消息传递机制实现弹窗与网页内容脚本的通信，具体实现如下：

1. 调整扩展文件结构 #

需要拆分出三个核心文件：

• popup.html：扩展弹窗的UI页面
• popup.js：弹窗专属脚本，负责监听按钮点击并发送指令
• border.js：内容脚本，负责接收指令并在网页绘制边框
• manifest.json：扩展配置文件，声明权限与脚本注入规则

2. 各文件代码实现 #

manifest.json（扩展配置） #

{
  "manifest_version": 3,
  "name": "Screen Border",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 可自定义需要注入的网页范围
      "js": ["border.js"]
    }
  ]
}

popup.html（弹窗UI） #

<!DOCTYPE html>
<html>
<head>
  <style>
    button { padding: 8px 16px; font-size: 14px; }
  </style>
</head>
<body>
  <button id="button">Click me to add border!</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js（弹窗脚本） #

// 直接监听弹窗内的按钮点击
document.getElementById('button').addEventListener('click', () => {
  // 向当前活跃标签页的内容脚本发送指令
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {action: 'addBorder'});
  });
});

border.js（内容脚本） #

// 预创建边框元素并设置样式
const frameUp = document.createElement('div');
frameUp.style.position = 'fixed';
frameUp.style.top = '0';
frameUp.style.left = '0';
frameUp.style.width = '100%';
frameUp.style.height = '5px';
frameUp.style.backgroundColor = 'red';
frameUp.style.zIndex = '9999';

const frameDown = document.createElement('div');
frameDown.style.position = 'fixed';
frameDown.style.bottom = '0';
frameDown.style.left = '0';
frameDown.style.width = '100%';
frameDown.style.height = '5px';
frameDown.style.backgroundColor = 'red';
frameDown.style.zIndex = '9999';

const frameLeft = document.createElement('div');
frameLeft.style.position = 'fixed';
frameLeft.style.top = '0';
frameLeft.style.left = '0';
frameLeft.style.width = '5px';
frameLeft.style.height = '100%';
frameLeft.style.backgroundColor = 'red';
frameLeft.style.zIndex = '9999';

const frameRight = document.createElement('div');
frameRight.style.position = 'fixed';
frameRight.style.top = '0';
frameRight.style.right = '0';
frameRight.style.width = '5px';
frameRight.style.height = '100%';
frameRight.style.backgroundColor = 'red';
frameRight.style.zIndex = '9999';

// 监听来自弹窗的指令
chrome.runtime.onMessage.addListener((request) => {
  if (request.action === 'addBorder') {
    // 向网页body添加边框
    document.body.appendChild(frameUp);
    document.body.appendChild(frameDown);
    document.body.appendChild(frameLeft);
    document.body.appendChild(frameRight);
  }
});

3. 额外优化提示 #

• 如果需要支持重复点击切换边框显示/隐藏，可以在border.js里添加状态变量，比如let isBorderAdded = false，收到指令时判断状态并执行添加/移除操作；
• 边框样式可根据需求自定义颜色、宽度、透明度等；
• 确保manifest.json里的matches字段匹配你需要生效的网页范围，比如只针对特定域名可写["https://example.com/*"]。

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