Chrome扩展Manifest v3无法访问页面DOM问题求助

首次开发Chrome扩展（Manifest v3版本），点击弹窗按钮时，代码访问的是弹窗自身的HTML，而非当前页面的DOM。以下是全部相关代码及修复方案：

原代码 #

index.js（弹窗脚本） #

document.getElementById("ignore").addEventListener("click", function () {
  const user = document.getElementById("ignoreUser");
  const userValue = user.value.split(" ").join("-");
  console.log(userValue, allUserComments);
  //content meta a
});

manifest.json #

{
    "name": "Ignore User",
    "version": "1.0.0",
    "description": "Ignore Users at Touch of Button",
    "manifest_version": 3,
    "author": "Chris",
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_title": "Test",
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "scripting"
    ],
    "host_permissions": [
        "https://www.reddit.com/*"
    ]
}

index.html（弹窗页面） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ignore User</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3 p-md-2" style="width: 450px;">
        <h2 class="text-center">Ignore User</h2>
        <label for="ignoreUser" class="form-label">User Name</label>
        <input type="text" class="form-control" id="ignoreUser">
        <button class="btn btn-primary mt-3" id="ignore">Ignore</button>
    </div>
</body>
<script src="index.js"></script>
</html>

background.js #

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  console.log(tabId, changeInfo, tab);
  if (tab.status === "complete") {
    chrome.scripting
      .executeScript({
        target: { tabId: tab.id },
        files: ["index.js"],
      })
      .then(() => {
        console.log("INJECTED THE FOREGROUND SCRIPT.");
      })
      .catch((err) => {
        console.log("ERROR INJECTING THE FOREGROUND SCRIPT.", err);
      });
  }
});

问题根源 #

1. 弹窗的index.js运行在弹窗独立上下文中，直接调用document只能访问弹窗自身的DOM，无法触及当前标签页的页面DOM。
2. 错误地将弹窗逻辑脚本index.js注入到页面中，导致代码职责混淆，弹窗与页面脚本的逻辑没有分离。

修复方案 #

1. 拆分脚本职责 #

• 创建content.js专门处理页面DOM操作逻辑
• 弹窗的index.js仅负责UI交互，通过Chrome扩展消息机制与页面通信

2. 修改后代码 #

content.js（新增，处理页面DOM）

// 监听来自弹窗的消息，执行页面DOM操作
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'ignoreUser') {
    const targetUserName = message.userName;
    console.log('要忽略的用户:', targetUserName);
    
    // 示例：查找页面中该用户的评论并隐藏
    const userLinks = document.querySelectorAll(`a[href="/user/${targetUserName}"]`);
    userLinks.forEach(link => {
      const commentContainer = link.closest('[data-testid="comment"]');
      if (commentContainer) {
        commentContainer.style.display = 'none';
      }
    });
    
    sendResponse({status: '操作成功'});
  }
});

修改index.js（弹窗交互逻辑）

document.getElementById("ignore").addEventListener("click", async () => {
  const userInput = document.getElementById("ignoreUser");
  const userName = userInput.value.trim().split(" ").join("-");
  if (!userName) return;

  // 获取当前活跃标签页
  const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
  
  // 向页面的content脚本发送指令
  chrome.tabs.sendMessage(activeTab.id, {action: 'ignoreUser', userName}, (response) => {
    if (chrome.runtime.lastError) {
      console.error('页面未加载脚本，请刷新页面后重试');
      return;
    }
    console.log(response.status);
    userInput.value = ''; // 清空输入框
  });
});

修改background.js（注入正确的页面脚本）

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 仅在reddit页面加载完成后注入脚本
  if (tab.status === "complete" && tab.url.includes('reddit.com')) {
    chrome.scripting
      .executeScript({
        target: { tabId: tab.id },
        files: ["content.js"], // 替换为content.js
      })
      .then(() => console.log("页面脚本注入完成"))
      .catch(err => console.log("脚本注入失败:", err));
  }
});

3. 核心说明 #

Chrome扩展的弹窗、后台服务工作者、页面内容脚本运行在完全独立的上下文中，无法直接共享DOM或变量，必须通过chrome.tabs.sendMessage和chrome.runtime.onMessage实现跨上下文通信。

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