如何修复 Chrome 扩展程序“未捕获的引用错误：文档未定义”错误？ [复制]

我正在创建一个扩展，我希望它能够在任何网站上找到特定的单词并突出显示它们。 但是，在加载扩展程序后，我立即收到一条错误消息。有谁知道如何解决这一问题？

我的代码如下。

背景.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

if (document !== undefined) {

const all = '*://*/*'
const screenwords = document.querySelectorAll('*');
var wlist = ["dog", "cats"];

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(all)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });

  if (nextState === "ON") {
    /*
    // search for words in list
    var foundwords;
    var wcounter;
    var position;
    for (var i = 0; i < screenwords.length; i++) {
      var results = screenwords.search(wlist[i]);
      if (results != -1) { // if words from list are found
        foundwords = true; // set foundwords to true
        wcounter++; // increment wcounter by +1
        position.i = results;
        }
    };
*/
    for (let i = 0; i < screenwords.length; i++) {
      for (let j = 0; j < wlist.length; j++) {
        if (screenwords[i].innerHTML.includes(wlist[j])) {
          screenwords[i].innerHTML = screenwords[i].innerHTML.replace(wlist[j], "***");
        };
    };
    }
  } else if (nextState === "OFF") {
    location.reload;
  };
}});


}

清单.json

{
  "manifest_version": 3,
  "name": "TESTING 231",
  "description": "hello, world",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  },
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  }
}

我没有 popup.html 文件，因为该程序应该在用户单击扩展名后立即运行。

我仔细检查了代码，似乎没有任何错别字。该错误出现在 '''background.js''' if (document !== undefined)。谢谢！

You Cannot access DOM from 服务人员.

扩展服务工作人员无法访问 DOM，但如果需要，您可以将其用于屏幕外文档。 块引用

文档：https://developer.chrome.com/docs/extensions/mv3/service_workers/ https://developer.chrome.com/docs/extensions/mv3/service_workers/

如果您想访问DOM of 扩大，你应该使用弹出脚本 https://developer.chrome.com/docs/extensions/mv3/user_interface/#popup https://developer.chrome.com/docs/extensions/mv3/user_interface/#popup

OR,如果你想从网页的上下文中执行Javascript，你应该使用内容脚本. https://developer.chrome.com/docs/extensions/mv3/content_scripts/ https://developer.chrome.com/docs/extensions/mv3/content_scripts/