0
我写通信时使用铬扩展时有问题。 有关如何使用此扩展的几句话：铬扩展通信网页 - > content_script - > popup.js
是生成对象的页面（不是扩展的一部分）。这些对象将被发送到他们将被列出并以下列格式显示给用户的分机：simply list
好的，到了这一点。代码如下所示：
的manifest.json
"name": "Img_",
"version": "1.0",
"browser_action": {
"default_icon":"icon.png",
"default_popup":"popup.html"
},
"permissions": [
"activeTab", "tabs", "<all_urls>", "http://*/*",
"https://*/*",
"https://www.google.com/*",
"http://www.google.com/*",
"storage"
],
"externally_connectable": {
"matches": ["The address of the external server to which we are connecting"]
},
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["content_script.js"],
"run_at": "document_start"
}
]
}
网页（而不是扩展的一部分）
<body>
<button id="theButton"> klik </button>
<script>
// Here is the code that will be responsible for generating the
// objects to be sent
document.getElementById("theButton").addEventListener("click",
function() {
window.postMessage({ type: "FROM_PAGE", value: {name: "xyx", age: 111}}, "*");
window.postMessage({ type: "FROM_PAGE", value: {name:"ccv", age: 222}}, "*");
}, false);
</script>
content_script：
_Img= {
storage: []
}
window.addEventListener("message", function(event) {
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("Connection works!! ");
__Img.storage.push(event.data.value)
console.log(event.data.value);
console.log(_Img.storage) // It shows the values that sent the page without problem
console.log("we have "+ _Img.storage.length + " instance") // show 0
List= _Img.storage.forEach(function(element) {
console.log(element);
return
}); // List the values that the page sent - works ok
};
}, false);
console.log(_Img) // This is displayed before clicking on the button - so _Img is obviously empty
它看起来像：console
个popup.js
$(function() {
demoP = document.getElementById("demo");
result = document.getElementById("app");
const Result = _Img.storage.length;
result.innerText = result.innerText + "Instance -" + Result
const List =_Img.storage.forEach(myFunction)
function myFunction(item) {
demoP.innerHTML = demoP.innerHTML + item + "<br>";
}
}); // Here nothing is displayed - for popup.js _Img is still empty
Popup.js访问_Img（如果我手动输入一些值到存储 - 如下面的例子 - 这个名单是做没有问题 - 看起来像这样的简单列表，如上图所示）
content.script：
_Img= {
storage: [{name: "opop", age: 121}, {name:"qwe", age: 333}]
}
window.addEventListener("message", function(event) { Here's the code
as above - no changes })
如何popup.js更新_Img状态？我应该怎么做才能让popup.js在content_script收到消息后才能访问_Img？
或者，我可以改变的网页发送所有_Img到content_script：
<script>
_Img = {
storage: []
}
document.getElementById("theButton").addEventListener("click",
function() {
window.postMessage({ type: "FROM_PAGE", value: _Img.storage}, "*");
}, false);
</script>
则内容脚本是这样的：
window.addEventListener("message", function(event) {
if (event.source != window)
return;
if (event.data.type && (event.data.type == "FROM_PAGE")) {
console.log("we have a connection");
console.log(event.data.value);
console.log("we have"+ event.data.value.length + " instance")
List= event.data.value.forEach(function(element) {
console.log(element);
return
});
};
}, false);
- 但我不知道这到底是怎么帮助:)
请[编辑]这个问题是关于话题：包括[MCVE]认为*复制的问题*。对于Chrome扩展程序或Firefox Web扩展程序，几乎总是需要包含* manifest.json *和一些背景，内容和/或弹出脚本/ HTML以及常用的网页HTML /脚本。寻求调试帮助的问题（“为什么我的代码不按我想要的方式工作？”）必须包括：（1）期望的行为，（2）特定问题或错误，以及（3）重现它所需的最短代码*在问题本身*。请参阅：[我可以在这里询问什么主题？]（/ help/on-topic）和[问]。 – Makyen
我建议您阅读[Chrome扩展程序概述]（https://developer.chrome.com/extensions/overview）（可能还包括从概述链接的页面）。 [体系结构部分]（https://developer.chrome.com/extensions/overview#arch）具有全面的体系结构信息，这些信息应该有助于您理解组织/完成情况的方式。您还应该阅读[内容脚本]（https://developer.chrome.com/extensions/content_scripts）。 – Makyen
你为什么认为你的弹出窗口可以访问'_Img'？您没有向我们展示如何在弹出窗口中定义它，所以目前还不清楚为什么您认为它应该有权访问。 – Makyen