火狐插件腳本之間的通信sdk - self.port不存在

Question

我想使用他們的sdk做一個Firefox插件，但我不知道如何讓我的js腳本進行通信。我們的目標是製作一個女巫形式的面板，其中有3個複選框，選中時可以隱藏/顯示活動選項卡上的某些元素。

下面是腳本： main.js：

var data = require("sdk/self").data; 

var painel1 = require("sdk/panel").Panel({ 
    width: 215, 
    height: 160, 
    contentURL: data.url("painelDestroyer.html"), 
    contentScriptFile: [data.url("jquery.js"),data.url("panel.js")] 
}); 

require("sdk/widget").Widget({ 
    id: "open-form-btn", 
    label: "Clear", 
    contentURL: data.url("mozico.png"), 
    panel: painel1 
}); 

// Attach a content script to the current active tab 
let worker = require("sdk/tabs").activeTab.attach({ 
    contentScriptFile: data.url("clear.js") 
}); 


painel1.port.on("show-tag",function(tag){ 
    worker.port.emit("show-tag", {tag:tag}); 
    console.log("worker emited"); 
}); 

painel1.port.on("hide-tag",function(tag){ 
    worker.port.emit("clear-tag", {tag:tag}); 
    console.log("worker emited"); 
}); 

painel.js：

$("#imgD").click(function() { 
    if ($(this).is(":checked")) { 
     panel.port.emit("clear-tag","img"); 
     console.log("panel emited"); 
    } else { 
     panel.port.emit("show-tag","img"); 
     console.log("panel emited"); 
    } 
}); 
$("#aD").click(function() { 
    if ($(this).is(":checked")) { 
     panel.port.emit("clear-tag","a"); 
     console.log("panel emited"); 
    } else { 
     panel.port.emit("show-tag","a"); 
     console.log("panel emited"); 
    } 
}); 
$("#iframeD").click(function() { 
    if ($(this).is(":checked")) { 
     panel.port.emit("clear-tag","iframe"); 
     console.log("panel emited"); 
    } else { 
     panel.port.emit("show-tag","iframe"); 
     console.log("panel emited"); 
    } 
}); 

clear.js：

function tagHide (tag, hide) { 
    $(tag).each(function() { 
     if (hide === false) { 
      $(this).css({ 
       "visibility": "visible" 
      }); 
     } else { 
      $(this).css({ 
       "visibility": "hidden" 
      }); 
     } 
    }); 
} 

self.port.on('show-tag', function(tag) { 
    tagHide(tag, false); 
}); 
self.port.on('clear-tag', function(tag) { 
    tagHide(tag, true); 
}); 

問題：如何讓我這個工作，如何溝通這3個腳本？我的猜測是，我必須從painel.js發送消息到main.js，然後發送到clean.js，但我該怎麼做？如何在clean.js或painel.js中收到消息？ 我不斷收到painel.js中不存在的self.port。

Answer 1

的問題是，你想從模塊腳本而不是內容腳本訪問和修改頁面的內容。在模塊腳本的範圍內沒有window或document，如the documentation中所述。因此，jQuery的$將不會在您的附加腳本中使用任何東西。

您需要將attach另一個內容腳本添加到當前選項卡。然後，您可以通過向其工作端口發送消息來顯示/隱藏頁面上的元素，這與您的附加模塊腳本和麪板腳本之間的通信方式類似。

// Attach a content script to the current active tab 
let worker = require("sdk/tabs").activeTab.attach({ 
    contentScriptFile: data.url("tabscript.js") 
}); 
// Send it a message 
worker.port.emit("show-tag", tag); 

你會然後移動tagHide功能爲活動選項卡的內容腳本，並把一些端口聽衆在那裏。這樣，附加腳本可以發出一些消息，並使內容腳本適當地調用tagHide。

注意：您可能最好使用page-mod而不是附加到選項卡。最後，當用戶導航到不同的頁面時，您可能不希望手動附加腳本，因此全局PageMod（include: "*"）是一個簡單的解決方案。不過，在轉發郵件時，您需要確保將目標標籤的工作人員作爲目標。因此，您需要跟蹤所有這些工作人員和clean them up when the worker is detached（使用worker.on('detach', callback)。最後，您應該遍歷所有當前連接的工作人員，並找到工作人員附加到當前活動選項卡的頁面（通過比較每個worker.tab到tabs.activeTab） 。

或者，你可以簡單地將命令直接插入到標籤頁中，如在Attaching Content Scripts to Tabs中所示的JavaScript。我覺得這很難看，並且不允許你在內容腳本中保留某些狀態（頁面上的變量保留在命令中）你可能需要更復雜的腳本

UPDATE 1：至於你的updat編輯問題，答案是very well documented in the SDK guides。你只需要使用一個self.port.on聽衆綁定：

self.port.on('show-tag', function(tag) { 
    tagHide(tag, false); 
}); 
self.port.on('clear-tag', function(tag) { 
    tagHide(tag); 
}); 

在另一方面，當前的代碼永遠只能與當前活動標籤工作時附加開始。很可能，活動選項卡會發生變化，您需要將您的內容腳本隨着時間推移到其他選項卡中。看到我以前的筆記，你如何可以管理所有這些腳本的工作人員。