尝试将数组从内容脚本发送到弹出脚本的 Chrome 扩展程序错误
Posted
技术标签:
【中文标题】尝试将数组从内容脚本发送到弹出脚本的 Chrome 扩展程序错误【英文标题】：Chrome Extension error trying to send array from content script to popup script 【发布时间】：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="" >
</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
【参考方案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） 我发现了错误 - 因为您的代码非常正确，所以很难发现。另外，一些建议 - 当您收到消息时在内容脚本中收集数组，而不是在内容脚本运行时，您将获得更新的状态。以上是关于尝试将数组从内容脚本发送到弹出脚本的 Chrome 扩展程序错误的主要内容，如果未能解决你的问题，请参考以下文章