J'ai un problème lors de l'écriture de l'extension chrome avec la communication. Quelques mots sur la façon de travailler cette extension:chrome extension communication page web -> content_script -> popup.js
est une page (qui ne fait pas partie de l'extension) qui génère des objets. Ces objets seront envoyés à l'extension où ils doivent être répertoriés et affichés à l'utilisateur sous la forme: simply list
Ok, au fait. Le code ressemble à ceci:
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"
}
]
}
page web (ne fait pas partie de l'extension)
<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
Il ressemble à: 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 a accès à _img (si j'entrer manuellement des valeurs dans le RANGEMENT- comme dans l'exemple ci-dessous - cette liste ne fait pas de problème - et ressemble à cette liste aussi simple que ci-dessus)
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 })
Comment popup.js mettre à jour l'état _img? Que dois-je faire pour que popup.js accède à _Img seulement après que content_script a reçu le message?
Sinon, je peux changer la page Web pour envoyer tous _img à content_script:
<script>
_Img = {
storage: []
}
document.getElementById("theButton").addEventListener("click",
function() {
window.postMessage({ type: "FROM_PAGE", value: _Img.storage}, "*");
}, false);
</script>
le script de contenu ressemble à ceci:
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);
-mais je ne sais pas comment cela pourrait aider :)
S'il vous plaît [modifier] la question d'être sur le sujet: comprennent un [mcve] * qui fait double emploi avec le problème *. Pour les extensions Chrome ou Firefox WebExtensions, vous devez presque toujours inclure votre * manifest.json * et une partie de l'arrière-plan, du contenu et/ou des scripts contextuels/HTML, et souvent des HTML/scripts de pages Web. Les questions demandant l'aide au débogage ("pourquoi mon code ne fonctionne-t-il pas comme je veux?") Doivent inclure: (1) le comportement souhaité, (2) un problème ou une erreur spécifique et (3) le code le plus court nécessaire pour le reproduire * dans la question elle-même *. S'il vous plaît voir aussi: [Quels sujets puis-je poser ici?] (/ Help/on-topic), et [ask]. – Makyen
Je vous suggère de lire la [Vue d'ensemble de l'extension Chrome] (https://developer.chrome.com/extensions/overview) (peut-être avec les pages liées à la vue d'ensemble). La section [architecture] (https://developer.chrome.com/extensions/overview#arch) contient des informations générales sur l'architecture qui devraient vous aider à comprendre comment les choses sont généralement organisées/réalisées. Vous devriez également lire [Content Scripts] (https://developer.chrome.com/extensions/content_scripts). – Makyen
Pourquoi pensez-vous que votre popup a accès à '_Img'? Vous ne nous avez pas montré comment vous le définissez dans le popup, donc vous ne savez pas pourquoi vous pensez qu'il devrait y avoir accès. – Makyen