Question

我正在尝试查找用户当前所在网页上的所有图片，并在用户点击该扩展程序时显示这些图片。我查看了很多帖子，似乎找到了最好的方法：在激活时让pop.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的值无效。属性＆＃39;键入＆＃39;：意外的属性。在Object.callback（chrome-extension：//mhnnhbbcahnfjmfgofalcmikdedelicg/popup.js：2：17）在chrome-extension：//mhnnhbbcahnfjmfgofalcmikdedelicg/popup.js：1：13

我是开发Chrome扩展程序的新手，并不知道如何解决这个问题。该错误似乎表明回调函数是chrome.tabs.query中的无效参数，但我不知道如何。感谢帮助。请注意，我的background.js脚本是一个空文件。

Answer 1

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

你应该只传递你关心的属性，例如如果你需要src＆＃39; s - 提取它们的数组并传递该数组。

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

要解决此问题，只需将chrome.runtime.sendMessage替换为chrome.tabs.sendMessage。

尝试将数组从内容脚本发送到弹出式脚本

1 个答案: