Firefox WebExtension: Überprüfen, ob die Erweiterung bereits existiert

Question

Ich portiere meine Chrome-Erweiterung zu einer Firefox-WebExtension, so weit so gut, dass ich problemlos mit meinen Inhalten, Hintergrundskripten und meiner ausführbaren Datei kommunizieren kann.

Ich möchte jetzt die Existenz meiner Erweiterung überprüfen. Dies ist eigentlich die Art, wie ich es tun:

Browser Skript

// browser-script.js 

var isExtensionHere = false; 

$("#is-extension-here").click(function(){ 

    console.log("Check the existence of the extension"); 

    window.postMessage({ 
     direction: "from-page-script", 
     message: "areYouThere" 
     }, "*"); 
}); 

window.addEventListener("message", function(event) { 
    if (event.source == window && 
     event.data.direction && 
     event.data.direction == "from-content-script") { 
     if(event.data.message == "OK") { 
      isExtensionHere = true; 
     } 
    } 
}); 

Inhalt Script

// content-script.js 

window.addEventListener("message", function(event) { 
    if (event.source == window && 
     event.data.direction && 
     event.data.direction == "from-page-script") { 

    if(event.data.message == "areYouThere") { 
     window.postMessage({ 
     direction: "from-content-script", 
     message: "OK" 
     }, "*"); 
    } 
    } 
}); 

Es funktioniert gut, wenn die Erweiterung hier. Aber wenn es nicht ist, bekomme ich offensichtlich keine Antwort von meiner Erweiterung. Wie kann ich dann wissen, wie man ein Popup oder eine Nachricht auslöst, wenn die Erweiterung nicht hier ist?

Answer 1

1. Sie können die Logik umkehren: Lassen Sie die Seite einen Ping von der Nebenstelle abhören. Sie müssen darauf achten, dass Skripte (z. B. abhängig vom Parameter run_at) in Relation zueinander ausgeführt werden, damit Sie nicht versehentlich eine Nachricht senden, bevor die Seite zu hören beginnt.

2. Sie eine andere Methode der Ankündigung Präsenz auf der Seite verwenden können: ein Content-Skript kann hinzufügen, ein unsichtbares DOM-Element mit einer bekannten ID, und Sie können auf der Seite für seine Anwesenheit überprüfen.

3. Wenn Sie den aktuellen Ansatz beibehalten möchten, können Sie einen Timer für die Antwort festlegen. So etwas wie 200ms sollte mehr als genug sein.

   Sie können dies als ein Versprechen, implementieren, da es nur einmal gelöst werden kann:

   var isExtensionHere = new Promise((resolve, reject) => { 
       const listener = (event) => { 
       if (
        event.source == window && event.data.direction 
        && event.data.direction == "from-content-script" 
        && event.data.message == "OK" 
       ) { 
        resolve(true); 
       } 
       } 
   
       setTimeout(() => { 
       window.removeEventListener("message", listener); 
       resolve(false); // Will have no effect if already called with true 
       }, 200); 
   
       window.addEventListener("message", listener); 
   
       window.postMessage({ 
       direction: "from-page-script", 
       message: "areYouThere" 
       }, "*"); 
   }); 
   
   // Sometime later 
   isExtensionHere.then((result) => { /* ... */ }); 
   

   Wenn Sie dynamisch überprüfen erneut zu, isExtensionHere eine Funktion machen, dass ein neues Versprechen jedes Mal zurück.