Chrome扩展报错：Cannot read properties of null (reading 'style') 求助

错误原因 #

你的index.js如果是作为扩展弹窗（Popup）的脚本，它运行在扩展自身的独立弹窗上下文里，而非当前打开的YouTube页面上下文，所以无法找到YouTube页面中的DOM元素，导致报错。

解决方案 #

方案一：自动注入Content Script（页面加载时自动执行） #

适合打开YouTube页面就自动隐藏元素的场景：

1. 配置manifest.json，添加Content Scripts规则：

{
  "manifest_version": 3,
  "name": "YouTube元素隐藏工具",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 创建content.js文件，写入DOM操作代码（增加元素存在判断和页面加载等待）：

// 等待页面DOM完全加载后执行
document.addEventListener('DOMContentLoaded', () => {
  // 先检查元素是否存在，避免找不到元素报错
  const primary = document.getElementById("primary");
  const contents = document.getElementById("contents");
  const guide = document.getElementById("guide");

  if (primary) primary.style.display = "none";
  if (contents) contents.style.display = "none";
  if (guide) guide.style.display = "none";
});

3. 重新加载扩展，打开YouTube页面后，指定元素会自动隐藏。

方案二：点击扩展图标手动触发执行 #

如果需要点击图标才执行隐藏操作，按以下步骤调整：

1. 更新manifest.json，添加必要权限：

{
  "manifest_version": 3,
  "name": "YouTube元素隐藏工具",
  "version": "1.0",
  "permissions": ["tabs", "scripting"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 确保popup.html正确引入index.js：

<!DOCTYPE html>
<html>
<body>
  <script src="index.js"></script>
</body>
</html>

3. 修改index.js，通过chrome.scripting.executeScript在当前页面执行代码：

// 获取当前激活的标签页，注入执行DOM操作的脚本
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.scripting.executeScript({
    target: {tabId: tabs[0].id},
    func: () => {
      const primary = document.getElementById("primary");
      const contents = document.getElementById("contents");
      const guide = document.getElementById("guide");

      if (primary) primary.style.display = "none";
      if (contents) contents.style.display = "none";
      if (guide) guide.style.display = "none";
    }
  });
});

额外提示 #

• YouTube页面结构可能会更新，若后续元素ID失效，建议改用更稳定的选择器（如类名组合、属性选择器）。
• 修改扩展代码后，需在Chrome扩展管理器中点击「重新加载」按钮生效。

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