Chrome扩展开发：无法获取当前活跃标签页HTML源码求助

你的核心问题有两个：一是content_script在页面加载时就发送消息，但此时popup可能还未打开，导致消息无人接收；二是监听代码存在变量未定义的错误，且消息传递逻辑不符合Chrome扩展V3的上下文交互规则。以下是具体修正方案：

1. 重构content_script.js：改为被动响应请求 #

不要让content_script主动发送消息，而是监听来自popup的请求，收到后再返回页面HTML：

function DOMtoString(document_root) {
  var html = "",
    node = document_root.firstChild;
  while (node) {
    switch (node.nodeType) {
      case Node.ELEMENT_NODE:
        html += node.outerHTML;
        break;
      case Node.TEXT_NODE:
        html += node.nodeValue;
        break;
      case Node.CDATA_SECTION_NODE:
        html += "<![CDATA[" + node.nodeValue + "]]>";
        break;
      case Node.COMMENT_NODE:
        html += "<!--" + node.nodeValue + "-->";
        break;
      case Node.DOCUMENT_TYPE_NODE:
        html +=
          "<!DOCTYPE " +
          node.name +
          (node.publicId ? ' PUBLIC "' + node.publicId + '"' : "") +
          (!node.publicId && node.systemId ? " SYSTEM" : "") +
          (node.systemId ? ' "' + node.systemId + '"' : "") +
          ">\n";
        break;
    }
    node = node.nextSibling;
  }
  return html;
}

// 监听来自popup的请求，返回页面HTML
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getPageSource") {
    sendResponse({ source: DOMtoString(document) });
  }
});

2. 修正popup的交互逻辑（假设popup挂载的JS为popup.js） #

在popup的按钮点击事件中，主动获取当前活跃标签页，向其content_script发送请求，拿到HTML后再执行截图：

// 假设你的截图按钮id为screenshotBtn
document.getElementById('screenshotBtn').addEventListener('click', async () => {
  // 获取当前活跃标签页
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // 向该标签页的content_script发送请求
  const response = await chrome.tabs.sendMessage(tab.id, { action: "getPageSource" });
  
  if (response?.source) {
    // 这里拿到页面HTML，后续可以用html2canvas处理（注意需要创建临时DOM来渲染）
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = response.source;
    // 执行html2canvas截图逻辑
    html2canvas(tempDiv).then(canvas => {
      // 处理截图结果，比如下载或展示
      const link = document.createElement('a');
      link.href = canvas.toDataURL();
      link.download = 'page-screenshot.png';
      link.click();
    });
  }
});

3. 修正监听代码的错误（如果保留background监听的话） #

原监听代码中存在未定义变量message的问题，修正后：

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log("收到消息：", request);
  if (request.action == "getSource") {
    // 注意：background无法直接操作popup的DOM，若要更新popup内容，建议直接在popup中处理
    // 此处仅作日志示例
    console.log("页面源码长度：", request.source.length);
  }
});

4. 检查manifest.json配置 #

确保tabs权限已正确声明，且content_scripts的匹配规则正确（你的配置已经满足，可保留）：

{
  "name": "Chrome plugin for Juno issues report",
  "description": "A issues report tool as a Chrome plugin",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_title": "Juno issue report",
    "default_popup": "index.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "juno-icon.png",
    "48": "juno-icon.png",
    "128": "juno-icon.png"
  },
  "permissions": ["desktopCapture", "tabs", "downloads", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ]
}

关键说明 #

• Chrome扩展V3中，popup和content_script是独立上下文，必须通过chrome.tabs.sendMessage主动触发消息传递，而非content_script自动发送。
• 使用html2canvas捕获外部页面时，需要将返回的HTML渲染到popup的临时DOM中再进行截图，避免跨上下文限制。

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