Chrome扩展开发：background.js中document未定义错误求助

Chrome扩展的background脚本运行在独立的后台上下文，完全脱离页面DOM环境，所以document、window这些属于页面的浏览器对象根本不存在，直接调用自然会报document is not defined错误。

你需要把操作页面DOM的代码放到**内容脚本（Content Scripts）**里，或者通过background脚本向当前活跃标签页注入代码，两种方式选其一即可：

方案一：使用内容脚本（推荐） #

内容脚本是Chrome扩展专门用来访问页面DOM的脚本类型，它能直接访问当前页面的document和window对象。

1. 修改manifest.json配置，添加内容脚本的声明：

{
  "manifest_version": 3,
  // 其他配置...
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你要作用的具体网址，比如"https://example.com/*"
      "js": ["content.js"] // 存放DOM操作代码的文件
    }
  ]
}

2. 创建content.js文件，把原来的DOM操作代码移进去（注意修正拼写错误：intputPart → inputPart）：

const subBtn = document.querySelector("#subBtn");
const resetBtn = document.querySelector('.reset');
const inputPart = document.querySelector("#form");

resetBtn.addEventListener('click', () => {
    inputPart.style.display = "block";
    location.reload();
})
// ...其他DOM操作代码

方案二：通过Background脚本注入代码 #

如果必须在background里触发DOM操作，可以用Chrome的tabs API向当前活跃标签页注入脚本：

// background/index.js
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const activeTabId = tabs[0].id;
  // 注入DOM操作代码
  chrome.scripting.executeScript({
    target: {tabId: activeTabId},
    func: () => {
      const subBtn = document.querySelector("#subBtn");
      const resetBtn = document.querySelector('.reset');
      const inputPart = document.querySelector("#form");

      resetBtn.addEventListener('click', () => {
          inputPart.style.display = "block";
          location.reload();
      })
      // ...其他DOM操作代码
    }
  });
});

注意：如果用Manifest V3，需要在manifest里声明scripting权限：

{
  "permissions": ["scripting", "tabs"]
}

内容的提问来源于stack exchange，提问作者Abhishek Parmar.