Chrome扩展问题：如何从新打开窗口与Content.js通信？

错误根源分析 #

1. 权限与目标错误：popup中调用chrome.tabs.query({active: true, currentWindow: true})拿到的是popup自身所在的标签页，尝试对扩展内部页面执行脚本/发消息，既无权限也不符合需求（我们需要和原网页标签页通信）。
2. 通信连接失败：由于目标标签页错误，找不到已注入content.js的接收端，导致sendMessage无响应、连接失败，进而出现undefined读取错误。

具体修复步骤 #

1. 修改background.js：传递原标签页ID到popup #

创建popup窗口时，不再将原标签页移到popup窗口（移除tabId参数），而是通过URL参数传递原标签页ID，让popup明确通信目标：

var urlRegex = /^(https?:\/\/)?[a-z0-9-]*\.?[a-z0-9-]+\.[a-z0-9-]+(\/[^<>]*)?$/;

chrome.action.onClicked.addListener(function(tab) {
    if (urlRegex.test(tab.url)) {
        chrome.windows.create({
            type: "popup",
            url: `popup.html?targetTabId=${tab.id}`, // 传递原tab的ID
            focused: true
        });
    }
});

2. 修改popup.js：使用目标标签页ID直接通信 #

从URL参数中提取原标签页ID，跳过错误的chrome.tabs.query，直接与目标页面通信，并增加错误处理：

let sendMessageButton = document.getElementById("sendMessage");
// 从URL参数中获取目标tab ID
const targetTabId = new URLSearchParams(window.location.search).get("targetTabId");

function getTitle() {
    return document.title;
}

sendMessageButton.onclick = function() {
    if (!targetTabId) return;

    // 先注入content.js（如果未配置自动注入）
    chrome.scripting.executeScript({
        target: { tabId: parseInt(targetTabId) },
        files: ["content.js"]
    }, () => {
        // 发送消息并处理错误
        chrome.tabs.sendMessage(
            parseInt(targetTabId),
            { color: "#00FF00" },
            function(response) {
                if (chrome.runtime.lastError) {
                    console.error(chrome.runtime.lastError.message);
                    return;
                }
                console.log(response?.status || "操作完成");
            }
        );
    });
};

3. 完善manifest.json权限配置 #

确保Manifest V3包含必要的权限：

{
    "manifest_version": 3,
    "name": "Your Extension",
    "version": "1.0",
    "action": {},
    "background": {
        "service_worker": "background.js"
    },
    "permissions": [
        "tabs",
        "scripting"
    ],
    "host_permissions": [
        "<all_urls>" // 或匹配你的urlRegex规则的网址，如"*://*.your-target-domain.com/*"
    ]
}

可选优化：自动注入content.js #

如果需要content.js自动注入到匹配网站，可在manifest.json中添加以下配置，这样popup无需每次调用executeScript：

"content_scripts": [
    {
        "matches": ["<all_urls>"], // 匹配目标网址
        "js": ["content.js"]
    }
]

内容的提问来源于stack exchange，提问作者harsha.cs