Firefox WebExtension：檢查擴展名是否已經存在

Question

我將我的Chrome擴展程序移植到Firefox WebExtension中，到目前爲止狀況良好，我設法與我的內容，後臺腳本和可執行文件平穩通信。

我想現在檢查我的擴展的存在。其實，這是我做的方式：

瀏覽器腳本

// 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; 
     } 
    } 
}); 

內容腳本

// 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" 
     }, "*"); 
    } 
    } 
}); 

它工作正常時，擴展名是在這裏。但是當它不是時，顯然我沒有從我的擴展中得到答案。如何知道當擴展不在這裏時如何觸發彈出窗口或消息？

Answer 1

1. 您可以反轉邏輯：讓頁面監聽來自分機的ping。您需要注意腳本何時執行（例如，取決於參數run_at），以便在頁面開始偵聽之前不會意外發送消息。

2. 您可以使用另一種方法通告頁面狀態：內容腳本可以添加具有已知ID的不可見DOM元素，並且您可以從頁面檢查它的存在。

3. 如果你想保持當前的方法，你可以設置一個計時器來響應發生。比如說，200ms應該足夠了。

   您可以實現這是一個承諾，因爲它一次只能解決：

   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) => { /* ... */ }); 
   

   如果要動態地重新檢查，使isExtensionHere返回一個新的承諾，每次一個函數。