Chrome 在内容和后台之间传递的扩展消息不起作用

Question

我正在开发一个 chrome 扩展，这里是主要文件：

background.js

getPageDimension = function (){
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendMessage(tab.id, { message: "DIMENSION" }, function(response){
            if (response != null) {
                console.log(response.x);
                console.log(response.y);
                console.log(response.w);
                console.log(response.h);
            }else{
                console.log('Response is null');
            }
        });
    }); 
};

content.js

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {        
    if (msg.message && (msg.message == "DIMENSION")) {                          
        var dimension = getPageDiemension(document.documentElement);        
        console.log(dimension.x);
        console.log(dimension.y);
        console.log(dimension.w);
        console.log(dimension.h);
        sendResponse({x: dimension.x, y: dimension.y,w: dimension.w,h: dimension.h});       
    }
});

getPageDiemension = function(currentDom){
    var dimension = new Object();
    dimension.x = 0;
    dimension.y = 0;
    dimension.w = currentDom.scrollWidth;
    dimension.h = currentDom.scrollHeight;
    return dimension;
}

所以我的目标是获取当前活动选项卡中加载的页面的完整高度和宽度。当我调试我的内容脚本时，我在 background.js 中得到了正确的响应，但是如果不调试就运行脚本，我得到我的 background.js.

中的 undefined 回复

这是我的 cotent.js 在我的 manifest.json 文件中的声明：

"content_scripts": [{
    "all_frames": true,
    "matches": [
        "http://*/*", "https://*/*"
    ],
        "js": ["content.js"]
}],

请帮助我，我哪里错了？。如果您需要任何进一步的数据，请告诉我。

Answer 1

问题

你的代码中有两个小问题，我想了很久才发现，因为它看起来工作得很好（当它根本不工作时）。

您正在使用已弃用的 chrome.tabs.getSelected(...) 方法，您应该避免使用该方法。请改用 chrome.tabs.query({active: true, highlighted: true}, ...)。
在您的 chrome.runtime.onMessage 侦听器中，在内容脚本中，您在发送响应之前进行了一些计算：这会使消息通道在您发送响应之前关闭，并且会导致在 null 回复中。

引用自the official documentation：

This function (sendResponse) becomes invalid when the event listener returns, unless you return true from the event listener to indicate you wish to send a response asynchronously (this will keep the message channel open to the other end until sendResponse is called).

解决方案

既然您知道问题所在，您可以轻松地将旧的 tabs.getSelected() 替换为 tabs.query()，并在 [=22= 的处理程序中添加一个 return true; 语句] 事件在您的内容脚本中。解决方法如下，我也把代码轻了一点。

你的background.js：

getPageDimension = function (){
    chrome.tabs.query({active: true, highlighted: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { message: "DIMENSION" }, function(response){
            if (response !== null) console.log('Response:', response);
            else console.log('Response is null');
        });
    }); 
};

你的content.js：

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {        
    if (msg.message && (msg.message == "DIMENSION")) {                          
        var dimension = getPageDiemension(document.documentElement); 
        console.log('Dimension:', dimension);
        sendResponse(dimension);       
    }
    return true;
});

getPageDiemension = function(currentDom){
    return { x: 0, y: 0,
        w: currentDom.scrollWidth,
        h: currentDom.scrollHeight
    }
}

工作示例

你可以找到我为测试做的工作示例 HERE.

文档链接

为清楚起见，我将给您留下一些有关此扩展中涉及的 API 的文档链接，您可能会发现它们有帮助：

Chrome 在内容和后台之间传递的扩展消息不起作用

Chrome extension message passing between content and background not working

javascript

google-chrome

google-chrome-extension

问题

解决方案

工作示例

文档链接