将数据数组从一个 chrome 扩展环境传递到另一个

Question

我一直在尝试将字符串数组从内容脚本传递到后台环境。我知道在发送之前我必须 JSON.Stringify(); 任何数据，使用 chrome.runtime.sendMessage(); API.

我只是没能成功。有人可以帮助我们我缺少什么吗？

提前致谢。

content_script.js

chrome.extension.sendMessage({}, function(response) { //boilerplate taken from extensionizr.com
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
    clearInterval(readyStateCheckInterval);


    var myArr = ["abc", "def", "ghi"];

    alert("in content_script" + myArr);

    var myJsonString = JSON.stringify(myArr);

    chrome.runtime.sendMessage(myJsonString); //send to background environment


}
}, 10);
});

background.js

chrome.runtime.onMessage.addListener( function(response, sender, sendResponse) {

//var data = JSON.parse(response); // gives token 'o' error (object already a JSON Object)
var data = response;

alert("in background.js, received " + data + " \nfrom tab: " + sender.tab.url);

//console.log(typeof youtube_links); // object ...

document.getElementById("results").innerHTML += "1: " + data[0] + "<br/> 2:" + data[1] + "<br/> 3: " + data[2] + "<br/>";



});

manifest.json

{
"name": "test",

"version": "0.0.1",

"manifest_version": 2,

"description": "message passing test",

"icons":
{
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
},

"default_locale": "en",

"background": //isolated environment
{
    "scripts": [ "background.js"]
    //"persistent": true
},

"browser_action":
{
    "default_icon": "icons/icon16.png",
    "default_title": "default_title goes here",
    "default_popup": "browser_action.html"
},

"permissions": [
    "clipboardRead",
    "contextMenus",
    "activeTab",
    "tabs"
    ],

"content_scripts": [ //user page environment
    {
        "matches": ["https://*/*", "http://*/*"],
        "js": ["content_script.js"] // will run on URLS that match "matches"
    }
]
}

browser_action.html

<!doctype html>

<html>
<head>

</head>
<style type="text/css">
    #mainPopup {
        padding: 10px;
        height: 200px;
        width: 400px;
        font-family: Helvetica, Ubuntu, Arial, sans-serif;
    }
    h1 {
        font-size: 2em;
    }
</style>
<body>
    <div id="mainPopup">
    <h1>Array Data received from content script:</h1>
    <div id="results">

    </div>
    </div>
</body>
</html>

我得到的是：

这是 background.js

中的警报

和这个在browser_action.html

P.S. 还有一件小事。 content_script.js 中的 alert(); 由于某种原因也没有显示（控制台中也没有错误）

Answer 1

首先，您不需要将 json 对象字符串化。 sendMessage() 方法可以获得任何有效的 JSON 对象作为要发送的消息。

第二次，我不明白你第一次调用 sendMessage 时在做什么...我认为你必须简单地删除它并让你的代码保持原样:

内容脚本：

var myArr = ["abc", "def", "ghi"];

alert("in content_script" + myArr);

chrome.runtime.sendMessage(myArr);

背景：

chrome.runtime.onMessage.addListener(
    function(response, sender, sendResponse)
    {
        var data = response;

        alert("in background.js, received " + data + " \nfrom tab: " + sender.tab.url);

        document.getElementById("results").innerHTML += "1: " + data[0] + "<br/> 2:" + data[1] + "<br/> 3: " + data[2] + "<br/>";
    }
);

编辑：避免多次调用的小修复：

run = function()
{
    alreadyRun = false;

    return function run()
    {
        if(alreadyRun) return;

        if (document.readyState === "complete")
        {
            var myArr = ["abc", "def", "ghi"];

            alert("in content_script" + myArr);

            chrome.runtime.sendMessage(myArr);
            alreadyRun = true;
        }
        else setInterval(run, 10);
    }
}();

run();

闭包是避免声明全局变量的一个技巧。

将数据数组从一个 chrome 扩展环境传递到另一个

Passing Array of data from one chrome extension environment to another

google-chrome-extension

google-chrome-devtools