尝试将数组从内容脚本发送到弹出脚本的 Chrome 扩展程序错误答案

【问题标题】：Chrome Extension error trying to send array from content script to popup script尝试将数组从内容脚本发送到弹出脚本的 Chrome 扩展程序错误
【发布时间】：2016-07-09 02:03:31
【问题描述】：

我正在尝试查找用户当前所在网页上的所有图像，并在用户单击扩展程序时显示它们。我查看了很多帖子，似乎找到了最好的方法：让 popup.js 脚本在激活 content.js 脚本时向它发送消息，然后让 content.js 脚本获取图像并将其发回到 popup.js 脚本。但是，我总是收到错误消息（如下所示）。这些是相关文件：

manifest.json

{
    "manifest_version": 2,
    "name": "Picture Finder",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "run_at": "document_end",
            "all_frames": false
        }
    ],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "tabs"
    ]

}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Picture Finder</title>
    <script src="popup.js"></script>
  </head>
 <body>
  <h1><center>Picture Finder</center></h1>
  <img id="pic" src="" height="400" width="400">
 </body>
</html>

popup.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.runtime.sendMessage(tabs[0].id, {type: "getContent"}, 

    function(response) {
        console.log(response); //this never gets logged
        document.getElementById('pic').src = response[0].src;
    });
});

content.js

var picArray = document.getElementsByTagName("img");
var srcArray = [];
for(var i = 0; i < picArray.length; i++){
    srcArray.push(picArray[i].src);
}
//console.log(picArray); //this gets logged correctly
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    switch(message.type){
        case "getContent":
            console.log(srcArray);//this never gets logged
            sendResponse(srcArray);
            break;
        default:
            console.error("unexpected message: ", message);
    }
});

我注意到点击我的扩展程序并检查它时出现以下错误：

响应 tabs.query 时出错：错误：参数 3 的值无效。属性“类型”：意外属性。在 Object.callback (chrome-extension://mhnnhbbcahnfjmfgofalcmikdedelicg/popup.js:2:17) 在 chrome-extension://mhnnhbbcahnfjmfgofalcmikdedelicg/popup.js:1:13

我对开发 chrome 扩展非常陌生，我真的不知道如何解决这个问题。该错误似乎表明回调函数是 chrome.tabs.query 中的无效参数，但我不确定如何。感谢帮助。请注意，我的 background.js 脚本是一个空文件。

【问题讨论】：

在这个chrome.runtime.sendMessage(tabs[0].id, {type: "getContent"}, 为什么你要传递标签ID？如果需要，您应该将其传递为chrome.runtime.sendMessage({id: tabs[0].id, type: "getContent"}, function() {}) 。
@RafiqueMohammed 它贴在上面！我只有一个功能
@Apb False，调用正确。
@Apb 好的，谢谢，我将其更改为您建议的方式，现在出现新错误：>TypeError: Cannot read property '0' of undefined

标签： javascript google-chrome-extension callback

【解决方案1】：

您尝试做的事情无论如何都行不通，因为您无法通过消息传递 DOM 节点（它不是 JSON 可序列化的）。

您应该只传递您关心的属性，例如如果您需要 src's - 提取它们的数组并传递该数组。

更新：啊，我现在知道错误的原因了。您正在使用chrome.runtime.sendMessage，而在这种情况下您应该使用chrome.tabs.sendMessage - 它会因无效调用而窒息（第一个参数，如果存在，应该是一个字符串 - 您尝试传递一个数字，因此它被解释为消息，然后对象混淆它）。

要修复，只需将chrome.runtime.sendMessage 替换为chrome.tabs.sendMessage。

【讨论】：

感谢您的帮助。我更新了 content.js 脚本以从 picArray 中获取 src url 字符串数组，然后将其发送回 popup.js。但是，我仍然收到与最初发布的相同的错误。我的 popup.js 脚本和我原来的帖子一样，我没有你指出的逗号错误。关于可能导致此错误的任何想法？数组是否可能仍然无效？（我更新了上面的content.js）
我发现了错误 - 因为您的代码非常正确，所以很难发现。另外，一些建议 - 当您收到消息时在内容脚本中收集数组，而不是在内容脚本运行时，您将获得更新的状态。