Question

我需要创建一个chrome扩展程序，用于捕获当前可见选项卡并在新选项卡中打开它。我使用以下代码：

send.js

    function openNextPage(imagesrc) {  
   chrome.tabs.create({url: "newScreen.html"},function(tab){  
        chrome.runtime.sendMessage({someParam: imagesrc},function(response){console.log(response);});
    }  
  );    
}

在 newScreen.html 内，我已将 receive.js 包含在内，如下所示：

window.addEventListener("load",function(){
    console.log('contents Loaded');
    chrome.runtime.onMessage.addListener(function(request,sender,response) {
        console.log(request.someParam);
    });
});

问题是，创建新标签后（首先是 newScreen.html ），我可以看到内容已加载消息，但 imagesrc 。也许是因为onMessage.addEventListener稍后执行（在sendMessage之后）。

但是，如果我再次点击我的扩展程序并打开第二个 newScreen.html ，则之前的 newScreen.html 会收到该消息并将其打印出来。如果我打开第三个选项卡，则第一个和第二个选项卡将再次接收该消息。问题是即使在添加onMessageListener之前sendMessage也会执行。我使用TimeOut for sendMessage但是徒劳无功。救救我！

Answer 1

你在说

可能因为onMessage.addEventListener稍后执行（sendMessage之后）。

是的，这是真的：您使用window.onload侦听器等待窗口加载，但在窗口加载完成之前发送消息 。您应该将chrome.runtime.onMessage监听器放在window.onload监听器之外，如下所示：

chrome.runtime.onMessage.addListener(function(request,sender,response) {
    console.log(request.someParam);
});

window.addEventListener("load",function(){
    console.log('contents Loaded');
});

如果需要，可以将请求存储在某个全局变量中，以便可以在window.onload事件处理程序中使用它，并确保在加载窗口时完成所有工作，如下所示：

var MY_PARAMETER;
chrome.runtime.onMessage.addListener(function(request,sender,response) {
    MY_PARAMETER = request.someParam;
});

window.addEventListener("load",function(){
    // Now you are sure that the window is loaded
    // and you can use the MY_PARAMETER variable
    console.log("Contents loaded, MY_PARAMETER =", MY_PARAMETER);
});

显然，您需要将此receive.js脚本放在标记的顶部，在文档的<head>内，以确保尽快添加侦听器：

<html>
    <head>
        ...
        <script src="/path/to/request.js"></script>
        ...
    </head>
...
</html>

chrome.tabs.create中的Chrome.extension.sendMessage

1 个答案: