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