Question

我真的在努力将数组从我的background.js传递给我的content.js。在开始之前，我将列出我的脚本。

的manifest.json

{
"manifest_version": 2,

"name": "Tab Highlighter",
"description": "Highlight already open tabs in a google search query",
"version": "1.0",
"content_scripts":[
{
  "matches": [ "http://www.google.com/*", "https://www.google.com/*", "https://*/*", "http://*/*" ],
  "js": ["content.js"],
  "run_at": "document_end"
}

],
"background": {
    "persistent": false,
    "scripts": ["background.js"]
 },
 "permissions":[ "tabs" ]
}

content.js

chrome.runtime.sendMessage({data: "getTabs"}, function(response) {
var tabs = response.data;
    if(!tabs) {
        console.log("No Tabs could be found!!");
    }
    else {
        console.log("TABS FOUND");
        console.log(tabs);
        for(var k = 0; k < tabs.length; k++) {
            console.log(tabs[k]);   
        }
        var links = document.getElementsByTagName("a");
        for(var i = 0; i < links.length; i++) {
            var link = links[i];
            var real_href = link.getAttribute("href");
            if(real_href) {
                //console.log(real_href);

                for(var j = 0; j < tabs.length; j++) {
                    if(i == 0) {
                        console.log("tab open: ", tabs[j]);
                    }
                    if(real_href == tabs[j]) {
                        console.log("duplicate found: ", real_href);
                        link.innerHTML = "Already Open";
                    }
                }
            }
        }
        console.log("End printing tabs");
    }
});

background.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.data === "getTabs"){
var fourmTabs = new Array();
chrome.tabs.query({}, 
        function(t) {
            for (var i = 0; i < t.length; i++) {
                fourmTabs[i] = t[i].url;
            }
            // Moved code inside the callback handler
            for (var i = 0; i < fourmTabs.length; i++) {
                if (fourmTabs[i] != null)
                    console.log(fourmTabs[i]);
                else {
                    console.log("??" + i);
                }
            }
        }
    );

    if(!fourmTabs) {
        console.log("Tabs could not be generated!!");
    }
    else {
        for(i = 0; i < fourmTabs.length; i++) {
            console.log(fourmTabs[i]);
        }
    }
    sendResponse({data: fourmTabs});
    //return true;    used to see if this was asynchronous or not
}
});

更新后台.js

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if(request.data === "getTabs"){
var fourmTabs = new Array();
chrome.tabs.query({}, 
        function(t) {
            for (var i = 0; i < t.length; i++) {
                fourmTabs[i] = t[i].url;
            }
            // Moved code inside the callback handler
            for (var i = 0; i < fourmTabs.length; i++) {
                if (fourmTabs[i] != null)
                    console.log(fourmTabs[i]);
                else {
                    console.log("??" + i);
                }
            }
            if(!fourmTabs) {
                console.log("Tabs could not be generated!!");
            }
            else {
                for(i = 0; i < fourmTabs.length; i++) {
                    console.log("fourmtabs is here: ", fourmTabs[i]);
                }
            }
            sendResponse({data: fourmTabs});
        }
    );
}
});

目前，我相信，从content.js打印的内容只是一个空数组。它显示为＆＃34; []＆＃34; （没有引号）。每当我将background.js中的sendReponse更改为{data: "Test"}时，content.js会打印出我期望的内容，Test，然后是每个字母。希望一切都在这里，我一直在尝试多种方法来实现这一目标。我会再活一个小时，所以如果我不回应，明天我会回来的。谢谢你的帮助！

我在脑海中看到它的方式就是这样。页面加载，加载完成后，它运行content.js。 content.js向background.js发送消息，并获取其响应（我遇到问题的数组）。然后，从页面获取所有链接，并检查页面上的任何href是否等于在另一个选项卡中打开的任何页面。然后，我想将此链接的样式更改为不同的颜色或某些内容，以表明它已经打开。我计划只在谷歌搜索，我想我会通过摆脱＆＃34;匹配＆＃34;中的最后两个元素。 manifest.json的一部分。

另一个快速编辑：我试图关注this kind of question但是，我坚持将数组从background.js发送到content.js

如果您需要更多信息，请与我们联系。

Answer 1

在填充sendResponse之前调用

fourmTabs，因此当您发送它时它仍然是一个空白数组。从if(!fourmTabs)到sendResponse调用的所有代码都应移至tabs.query的回调中。

编辑：您需要在return true;回调的最后一行之前添加addListener - 您的最后三行应该如下所示：

return true;
}
});

这没有特别好的文档记录，我不确定我是否解释得很好，但是因为tabs.query是异步的，你需要先运行它才能得到你的回复，用于消息传递的端口在tabs.query完成之前关闭，因此在实际调用sendResponse之前，内容脚本认为它没有得到响应。

主要来自this chromium-extensions thread，但有类似但不同的情况（在调用sendResponse之前等待AJAX调用完成）

Answer 2

您是否尝试过存储该值并使用chromes存储方法调用它？我不确定这是否是最好的方法，但我相信这会开启交叉沟通。这是一个例子：

var setArray = [1, 2, 3, 5, [1, 2, 3]];
chrome.storage.local.set({'storageObjectName': setArray}, function () {
    /* optional callback */
});

从你的其他剧本

chrome.storage.local.get('storageObjectName', function (data) {
    console.log(data);
});

组合两者的例子：

var setArray = ['my new data']; /* setting array in script 1 */
chrome.storage.local.set({'storageObjectName': setArray}, function (){
    chrome.storage.local.get('storageObjectName', function (data) {
        otherScriptFunction(data); /* call your other function from script 2 */
    });
});

将数组变量从background.js传递给content.js

2 个答案: