Chrome扩展开发：点击按钮隐藏CSS元素报错求助

核心问题 #

你遇到的错误Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')以及后续的DOM操作无效，主要源于两个关键错误：

1. 选择器匹配错误 #

你的按钮使用的是id="hideRecommended"，但JS中用了.hideRecommended（类选择器语法），导致无法找到按钮元素，自然无法绑定事件。

2. Chrome扩展上下文隔离问题 #

Chrome扩展的弹窗（Popup）和目标网页（YouTube）属于完全独立的执行上下文，弹窗里的JS无法直接访问或修改网页的DOM元素，必须通过Content Script实现跨上下文通信。

修复方案 #

步骤1：修正弹窗的事件绑定代码 #

修改弹窗的JavaScript，将选择器改为id选择器，并通过消息通知Content Script执行隐藏操作：

// 弹窗JS代码（比如popup.js）
document.querySelector("#hideRecommended").addEventListener("click", () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {action: "hideRecommended"});
  });
});

步骤2：创建Content Script文件 #

新建content.js，用于注入到YouTube页面中操作DOM：

// 监听来自弹窗的消息
chrome.runtime.onMessage.addListener((request) => {
  if (request.action === "hideRecommended") {
    // 处理YouTube动态加载的情况，确保元素存在后再操作
    function hideTargetElement() {
      const homePage = document.querySelector(".style-scope.ytd-rich-grid-renderer#primary");
      if (homePage) {
        homePage.style.display = "none";
      } else {
        // 元素未加载，延迟500ms重试
        setTimeout(hideTargetElement, 500);
      }
    }
    hideTargetElement();
  }
});

步骤3：配置Manifest文件（以V3为例） #

确保manifest.json正确声明权限和Content Script：

{
  "manifest_version": 3,
  "name": "Hide YouTube Recommended",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["tabs"]
}

补充说明 #

• 弹窗HTML保持不变，确保按钮的id="hideRecommended"正确。
• YouTube首页是动态渲染的，所以需要通过重试机制保证目标元素加载完成后再执行隐藏操作，避免出现找不到元素的情况。

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