Chrome Manifest 3扩展导入多脚本报错：document未定义求助

错误根源 #

Manifest V3 的 Service Worker（背景脚本） 运行在无DOM的独立环境中，不存在document、window这类浏览器上下文对象。你遇到的ReferenceError: document is not defined，是因为auto_select.js第26行直接调用了document相关API，而Service Worker不支持这类DOM操作。

至于js.cookie.js未报错，是因为它仅定义了Cookie操作的工具函数，没有立即执行依赖DOM的代码；而auto_select.js在加载时就执行了DOM操作，直接触发错误。

解决方案 #

将需要操作页面DOM的代码移到**内容脚本（Content Script）**中——内容脚本运行在目标页面的上下文里，拥有完整的DOM访问权限。背景脚本仅负责逻辑控制（比如监听事件、发送指令），通过Chrome消息API与内容脚本通信。

1. 修改manifest.json配置 #

添加内容脚本声明，调整权限范围（避免过度授权）：

{
  "manifest_version": 3,
  "name": "Auto_Select",
  "description": "This extension auto selects Mturk HITs",
  "version": "1.0",
  "action": {
    "default_icon": "auto_select.png",
    "default_popup": "auto_select.html"
  },
  "background": {
    "service_worker": "worker_wrapper.js"
  },
  "content_scripts": [
    {
      "matches": ["*://*.mturk.com/*"], // 仅匹配Mturk页面
      "js": ["js.cookie.js", "auto_select.js", "cookie_mgmt.js"] // 按需求调整脚本顺序
    }
  ],
  "permissions": [
    "tabs",
    "activeTab",
    "cookies" // 若需操作Cookie，添加此权限
  ],
  "host_permissions": [
    "*://*.mturk.com/*" // 缩小权限范围，替代<all_urls>
  ]
}

2. 重构worker_wrapper.js（背景脚本） #

负责监听扩展事件，向内容脚本发送指令：

// 监听扩展图标点击事件
chrome.action.onClicked.addListener(async (tab) => {
  chrome.tabs.sendMessage(tab.id, { action: "autoSelectHITs" });
});

// 扩展安装初始化
chrome.runtime.onInstalled.addListener(() => {
  console.log("Auto_Select extension installed");
});

3. 重构auto_select.js（内容脚本） #

接收背景脚本的消息，执行DOM操作：

// 监听来自背景脚本的指令
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "autoSelectHITs") {
    // 这里替换你原来第26行的DOM操作代码，示例：
    const hitElements = document.querySelectorAll(".hit-selector");
    hitElements.forEach(el => el.click());
    sendResponse({ status: "success" });
  }
});

// 若需要页面加载完成后自动执行，添加DOM加载监听
document.addEventListener("DOMContentLoaded", () => {
  // 页面初始化逻辑
});

注意事项 #

• 内容脚本的matches规则要精准，只在目标页面注入脚本，减少性能开销。
• Service Worker中仅能使用Chrome扩展提供的API（如chrome.tabs、chrome.cookies），绝对不能调用DOM相关API。
• 若cookie_mgmt.js是处理页面Cookie，留在内容脚本中；若操作浏览器级Cookie，改用chrome.cookiesAPI移到背景脚本里。

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