Chrome扩展报错Uncaught TypeError: Cannot read 'id' of undefined修复求助

错误原因 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'id')，核心问题是异步API调用顺序错误：chrome.tabs.query是异步方法，它的回调函数会在后续事件循环里执行，但你直接在回调外调用chrome.tabs.sendMessage，此时tab变量还是初始的undefined，自然读不到id属性。

另外代码里还有几处语法和逻辑问题，需要一起修正。

具体修复步骤 #

1. 调整异步代码顺序 #

把chrome.tabs.sendMessage移到chrome.tabs.query的回调内部，确保tab变量已经被正确赋值：

(function () {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    const tab = tabs[0];
    if (!tab) return; // 加个空值判断，防止tabs为空的情况
    console.log(tab);
    
    // 在这里发送消息
    chrome.tabs.sendMessage(tab.id, "your message");
});

// 其他代码保持不变
})();

2. 修复manifest.json语法错误 #

host_permissions里有多余的引号和逗号，修正为：

"host_permissions": ["*://*.cnn.com/*"],

3. 定义webRequest的URL规则 #

chrome.webRequest.onBeforeRequest里的urls参数用了未定义的url变量，替换成实际的匹配规则：

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {   
        // 现有解码代码
    },
    { urls: ["*://*.cnn.com/*"] }, // 替换为具体的URL匹配规则
    ["requestBody"]
);

4. 修正contentScript.js语法错误 #

你的content script多了一个闭合的})，修正后：

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    console.log("message received:", message);
});

5. （可选）如果要向弹窗发送消息 #

如果你的需求是把Post请求信息发送到扩展弹窗而非content script，不能用chrome.tabs.sendMessage，要换用跨上下文消息传递：

• 在弹窗的popup.js里监听消息：

document.addEventListener('DOMContentLoaded', function() {
    chrome.runtime.onMessage.addListener(function(postData) {
        console.log("收到Post请求信息:", postData);
        // 这里可以把数据展示到弹窗界面上
    });
});

• 在background的webRequest回调里发送消息：

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {   
        if (!details.requestBody?.raw?.[0]?.bytes) return; // 加空值判断
        const postedString = decodeURIComponent(String.fromCharCode.apply(null,
            new Uint8Array(details.requestBody.raw[0].bytes)));
        const body = JSON.parse(postedString);
        const postData = body.CenterPoint.Point;
        
        // 向弹窗发送消息
        chrome.runtime.sendMessage(postData);
    },
    { urls: ["*://*.cnn.com/*"] },
    ["requestBody"]
);

额外提示 #

• Manifest V3的Service Worker是事件驱动的，别依赖全局变量存数据，尽量在回调内部处理逻辑
• 处理requestBody时一定要加空值判断，避免某些请求没有raw字段导致新的报错

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