为何JS代码在控制台可运行但Chrome扩展插件中报错？

核心问题 #

报错Cannot read Properties of undefined (reading 'remove')的原因是执行content脚本时，目标元素还未被页面渲染出来。Google Docs是单页应用（SPA），内容为动态加载，默认配置下content脚本会在页面初始DOM加载完成后立即执行，此时目标元素大概率还不存在。另外你通过background的定时器重复注入content.js，会导致脚本重复执行，既浪费资源又可能引发额外问题。

修复步骤 #

1. 优化content.js：用MutationObserver监听元素加载 #

替换原content.js代码，使用MutationObserver等待目标元素出现后再移除，这是处理动态加载内容的可靠方案：

// content.js
const targetClass = 'xxxxxx';

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  // 检查当前页面是否存在目标元素
  const element = document.querySelector(`.${targetClass}`);
  if (element) {
    element.remove();
    // 找到元素并移除后，停止观察
    observer.disconnect();
  }
});

// 开始监听整个文档的DOM变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

2. 清理background.js：移除不必要的重复注入逻辑 #

你的manifest.json已经配置了content_scripts，会自动在匹配docs.google.com的页面注入content.js，完全不需要background里的定时器重复执行executeScript。直接删除background.js文件，并修改manifest.json去掉background相关配置：

// manifest.json
{
  "manifest_version": 3,
  "name": "Auto Delete xxxxxx Elements",
  "version": "1.0",
  "description": "A Chrome extension to automatically delete elements containing the class 'xxxxxx' on doc.google.com.",
  "permissions": [], // 无需activeTab权限，content脚本已通过匹配规则生效
  "content_scripts": [
    {
      "matches": ["*://docs.google.com/*"],
      "js": ["content.js"]
    }
  ]
}

3. 可选：添加元素存在性兜底校验 #

如果担心页面加载极快时，观察者还未启动目标元素就已存在，可以在脚本开头先做一次检查：

// content.js 补充开头的前置检查
const targetClass = 'xxxxxx';

// 先检查当前是否已有目标元素
const existingElement = document.querySelector(`.${targetClass}`);
if (existingElement) {
  existingElement.remove();
} else {
  // 启动观察者监听动态加载的元素
  const observer = new MutationObserver((mutations) => {
    const element = document.querySelector(`.${targetClass}`);
    if (element) {
      element.remove();
      observer.disconnect();
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

控制台手动执行有效的原因 #

你手动执行代码时，页面已经完全加载完成，目标元素已经渲染到DOM中，自然能正常找到并移除；而插件的content脚本执行时机更早，元素还未生成，就会触发undefined错误。

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