Chrome扩展弹窗与内容脚本通信报错：无法建立连接求助

嘿，我帮你排查出了几个关键问题，咱们一个个来修复：

1. Content.js 语法错误（核心问题） #

你的content.js末尾存在语法错误，多了一个额外的大括号，导致浏览器无法正确解析并加载这个内容脚本，自然也就没有注册消息监听器——这正是弹窗提示“接收端不存在”的主要原因。

修正后的content.js代码：

// content.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if(request.cmd === "GetSelectedText") {
        var selectedText = window.getSelection().toString().trim();
        if(selectedText && selectedText.length) {
            console.log(selectedText);
            sendResponse({res: selectedText});
        }
    }
    return true;
});

2. Popup.js 事件绑定时机问题 #

你原本把test02元素的点击事件绑定放在了DOMContentLoaded回调外面，这时候页面DOM可能还没完全加载完成，document.getElementById("test02")会返回null，导致点击事件根本无法触发。建议把所有DOM相关的操作都放到DOMContentLoaded回调里，同时增加错误处理方便调试：

修正后的popup.js代码：

//popup.js
document.addEventListener('DOMContentLoaded', function(){
    // 与后台页面通信
    chrome.runtime.sendMessage({greeting: "hello"}, function(response){
        console.log(response.data);
        document.getElementById("showMsg").innerText = response.data;
    });

    // 绑定向内容脚本发消息的点击事件
    document.getElementById("test02").addEventListener('click', function(){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
            chrome.tabs.sendMessage(tabs[0].id, {cmd: "GetSelectedText"}, function(response) {
                // 增加错误处理，调试更方便
                if(chrome.runtime.lastError) {
                    console.error("发送消息失败：", chrome.runtime.lastError.message);
                    return;
                }
                if(response?.res) alert(response.res);
            });
        });
    });
});

3. 确认内容脚本已正确注入页面 #

如果是安装/更新扩展后直接在已打开的页面测试，内容脚本不会自动注入到这些旧页面里。你可以：

• 刷新当前测试页面（按F5）
• 或者在Chrome扩展管理页面点击“重新加载”扩展，然后打开新标签页测试

按照上面的步骤修改后，应该就能正常实现弹窗与内容脚本的通信了！

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