Question

我正在开发一个chrome扩展，其中我的popup.js从当前页面上的内容脚本接收消息并创建一个数组。然后在按下按钮时，popup.js创建一个新选项卡（其中有一个内容脚本运行）并向该内容脚本发送包含该数组的消息。

我的popup.js：

//this message is sent from a different content script (for current page), not shown here
chrome.runtime.onMessage.addListener(function(request, sender) {

    if (request.action === "getSource") {
        var arr = JSON.parse(request.source);

        //create new tab 
        chrome.tabs.create({url: "newtab.html"}, function(tab){

            //send message to new tab
            chrome.tabs.sendMessage(tab.id{
            action: "getDataArray",
            source: JSON.stringify(arr)
        });
    }
});

NEWTAB-contentscript.js：

$(document).ready( function() {

    chrome.runtime.onMessage.addListener(function(request, sender) {

      if (request.action === "getDataArray") {
        $("#result").html(JSON.parse(request.source));
      }
});

newtab.html：

<script src="newtab-contentscript.js"></script>

问题：newtab-contentscript.js似乎永远不会收到消息。

我是如何创建标签或发送消息的任何错误。您对如何解决此问题有任何建议吗？

Answer 1

正如我们在评论中所讨论的那样，我猜可能$(document).ready来不及接收来自chrome.tabs.sendMessage的消息，您可以通过比较回调中的console.log的时间戳和新选项卡内容脚本的第一行，如@wOxxOm所述。

我建议将消息逻辑移动到后台（事件）页面并启动从newtab-contentscript.js传递的消息，您可以在其中控制何时开始发送消息。

示例代码

background.js

let source = null;

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // sent from another content script, intended for saving source
    if(request.action === 'putSource') {
        source = request.source;
        chrome.tabs.create({ url: 'newtab.html' });
    }
    // sent from newtab-contentscript, to get the source
    if(request.action === 'getSource') {
        sendResponse({ source: source });
    }
});

NEWTAB-contentscript.js

chrome.runtime.sendMessage({action: 'getSource'}, function(response) {
    $('#result').html(response.source);
});

Chrome扩展程序会创建新标签页并将邮件从popup.js发送到新标签页的内容脚本

1 个答案: