Manifest V3 Chrome扩展：contentScript向popup传对象失败求助

核心问题 #

Chrome的消息传递机制要求传递的数据必须是JSON可序列化的，虽然普通对象理论上支持传递，但如果对象包含不可序列化的内容（比如DOM元素引用、函数、Symbol），或者代码执行过程中出现未捕获的错误，都会导致响应丢失，最终popup端收到undefined。

解决方案 #

1. 显式序列化对象为JSON字符串

这是最稳妥的方式，直接规避序列化兼容性问题：

修改contentScript.js：

chrome.runtime.onMessage.addListener((message, sender, response) => {
    if (message.from === "popup.js" && message.type === "RETRIEVE") {
        // 用字面量创建对象更简洁，同时添加容错处理
        const info = {
            url: "www.website.com",
            // 可选链+默认值避免DOM查询失败报错
            title: document.head.querySelector('[property="og:title"]')?.content || ""
        };
        console.log(info);
        // 序列化为JSON字符串传递
        response(JSON.stringify(info));
    }
    return true;
});

修改popup.js：

(async () => {
    const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
    const response = await chrome.tabs.sendMessage(tab.id, {
        from: "popup.js",
        type: "RETRIEVE"
    });

    // 解析JSON字符串为对象
    const data = JSON.parse(response);
    document.getElementById("result").innerText = data.url;
    console.log(data);
})();

2. 排查Content Script的执行错误

打开目标页面的开发者工具，切换到你的扩展对应的Content Script上下文（Sources面板→下拉菜单选择扩展ID），检查控制台是否有报错：

• 比如当页面不存在og:title标签时，document.head.querySelector(...)会返回null，直接访问.content会抛出错误，导致response从未被调用，popup自然收不到数据。上面的代码用?.和默认值解决了这个问题。

3. 验证消息匹配逻辑

确保popup发送的from和type字段与content script中的判断完全一致，避免因条件不匹配导致response未执行。

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