在 chrome 扩展中将（对象的）数组从 popup.js 传递到 content.js

Question

我的 popup.js 文件中有一个根据用户输入创建和修改的数组，我希望能够通过单击按钮将其发送到我的 content.js 脚本 ( popup.html）。目前，chrome.runtime.sendMessage 似乎只允许我将字符串（或 JSON？）类型的消息传递给 content.js，所以我很难想出一个解决方案来获取这个对象数组作为以及一条消息（类似于 'start_search'）发送给 content.js 以供执行。

此处供参考的是对象数组：

var searchList = [];

这是构造它的函数（在用户提交时触发）：

function addWord(userWord, userColor){ //append new word 
    var wordAndColorPair = {
        word: userWord,
        color: userColor,
        id: placementId.toString() //keep it as a string so it can be used for highlighted word's class
    }
    searchList.push(wordAndColorPair); //pushing the new object with user inputs to array
}

下面是我尝试使用 JSON.stringify:

popup.js:
    .
    .
    var jsonSearchList = JSON.stringify(searchList);
    chrome.tabs.sendMessage(activeTab.id, jsonSearchList);


content.js:
    alert(request.message); //alerts "undefined"....

Answer 1

我在评论中所说的关于从 popup.js 向 content.js 发送消息的示例：

Popup.html:

<body>
    <button id="test">Send data</button>
</body>
<script type="text/javascript" src="popup.js"></script>

Popup.js:

var searchList=[{test1:1},{test2:2}];
var jsonSearchList = JSON.stringify(searchList);

document.getElementById("test").addEventListener("click", function() {
    chrome.tabs.query({
        active: true,
        currentWindow: true
    }, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {
            data: jsonSearchList
        });
    });
});

Content.js:

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.data !== undefined) {
        console.log(JSON.parse(msg.data));
    }
});

在 chrome 扩展中将（对象的）数组从 popup.js 传递到 content.js

Passing array (of objects) from popup.js to content.js in chrome extension

javascript

google-chrome

sendmessage

google-chrome-extension