0
通信でクロムエクステンションを書くときに問題があります。 この拡張機能の操作方法については、クロム拡張コミュニケーションウェブページ - > content_script - > popup.js
は、オブジェクトを生成するページ（拡張子ではありません）です。これらのオブジェクトは、表示される拡張子に送信され、次の形式でユーザーに表示されます。simply list
[OK]をクリックします。コードは次のようになります。
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"
}
]
}
Webページ（拡張子の一部ではない）
<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：console：
_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
それがどのように見えます
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が、私は手動で以下の例のようにstorage-にいくつかの値を入力する場合（_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の状態を更新しますか？ content_scriptがメッセージを受け取った後でなければ、popup.jsが_Imgにアクセスするにはどうすればよいですか？
代わりに、私はcontent_scriptするすべて_Imgを送信するためにWebページを変更することができます。
<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 WebExtensionsの場合は、* manifest.json *とバックグラウンド、コンテンツ、ポップアップスクリプト/ HTML、およびウェブページのHTML /スクリプトを含める必要があります。 （1）必要な動作、（2）特定の問題またはエラー、および（3）それを再現するために必要な最短のコードを含める必要があります。質問自体に*。また、[ここではどのような話題を聞くことができますか？]（/ help/on-topic）、[ask]を参照してください。 – 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