फ़ायरफ़ॉक्स एडन एसडीके: उपयोगकर्ता को विकल्प प्रदर्शित करने के तरीके?

Question

मैं फ़ायरफ़ॉक्स के साथ विकास को जोड़ने के लिए काफी नया हूं। मैंने फ़ायरफ़ॉक्स में अपने क्रोम एक्सटेंशन को पोर्ट करने के लिए एडन एसडीके चुना।

उपयोगकर्ता के लिए विकल्प पृष्ठ/विकल्प पैनल/विकल्प विंडो प्रदर्शित करने के लिए आप क्या सुझाव देंगे?

मेरी एडन निर्देशिका से एक विकल्प.html फ़ाइल लोड करना काफी ठीक काम करता है (addTab (data.url ("options.html"));), लेकिन मैं इसे पेज-मोड संलग्न नहीं कर सकता, जहां तक ​​एआई जानना। इसलिए मैं अपने विकल्पों को बचाने के लिए main.js के साथ संवाद नहीं कर सकता, है ना?

इसके अलावा उपयोगकर्ता को इसका उपयोग कैसे करना चाहिए? क्रोम में यह काफी आसान है। अपने आइकन पर राइटक्लिक करें -> विकल्प और यह आपके लिए खुलता है। फ़ायरफ़ॉक्स के लिए एक समान व्यवहार बनाने के तरीके हैं?

उस पर कोई सुझाव?

Answer 1

ऐड-ऑन एसडीके 1.4 से शुरू होने पर आपके पास simple-prefs module है। यह स्वचालित रूप से आपके ऐड-ऑन के लिए इनलाइन विकल्पों को उत्पन्न करेगा - ये ऐड-ऑन प्रबंधक में सीधे आपके एक्सटेंशन के पृष्ठ पर प्रदर्शित होते हैं। विकल्प प्रदर्शित करने के लिए यह पसंदीदा तरीका होना चाहिए। नकारात्मकता: क्लासिक ऐड-ऑन के लिए प्रोग्रामेटिक रूप से विकल्प खोलना गैर-तुच्छ है। और एसडीके जटिल नियंत्रण (documentation of what's possible with inline options) का समर्थन नहीं करता है, केवल सबसे बुनियादी हैं।

यदि आप अपना खुद का रोल करना चाहते हैं, तो आप शायद drop-down panel में "विकल्प" बटन को एकीकृत करना चाहते हैं। तुम भी page-mod package के माध्यम से इसे करने के लिए एक सामग्री स्क्रिप्ट संलग्न करने के लिए सक्षम होना चाहिए, कुछ इस तरह काम करना चाहिए:

var pageMod = require("page-mod"); 
pageMod.PageMod({ 
    include: data.url("options.html"), 
    ... 
}); 

var tabs = require("tabs"); 
tabs.open(data.url("options.html")); 

नकारात्मक यहाँ: ऐड-ऑन विकल्प (ऐड-ऑन प्रबंधक के माध्यम से) प्रदर्शित करने के लिए मानकीकृत तरीका का उपयोग कर जीता ' टी संभव नहीं है, एसडीके इनलाइन विकल्पों के अलावा कुछ भी समर्थन नहीं करता है।

Answer 2

इस मामले में आपको options.html से नियंत्रण विकल्प भेजने के लिए Port.on()/Port.emit() का उपयोग करने की आवश्यकता है, जैसे सेटिंग बटन पर क्लिक करें। और "टैब" मॉड्यूल

options.html 

     var panelIsOpen = 0; 

     $('#settings').click(function() { 
       self.port.emit("statusoptions", {optionsIsOpen:1}); 
      }); 

popup.html 

     Panel.port.on("statusoptions", function (panda) { 
       if(panda.optionsIsOpen === 1){ 
        Panel.hide(); 
        tabs.open({ 
         url: "options.html", 
         onReady: function onReady(tab) { 
          Panel.hide(); 
         }, 
         contentScriptFile: [ 
          data.url("js/jquery-2.0.0.min.js"), 
          data.url("js/options.js")], 
        }); 
       } 
      }); 

Answer 3

धन्यवाद दिशा ओर इशारा करते हुए के लिए Wladimir Palant, फिर भी यह अभी भी मुझे काफी समय लगा अंतिम कोड पता लगाने की। मैंने भविष्य में दूसरों के संदर्भ के लिए अपना परिणाम यहां दिया। (मैं विस्तार के उद्देश्य के लिए एक छोटा सा यहाँ कोड को सरल बनाया है, लेकिन मुख्य संरचना सही होना चाहिए।)

content.js: (विकल्प पृष्ठ खोलने के लिए एक लिंक पर क्लिक करें)

$("#options").click(function(){ 
    self.port.emit("open_options", {}); 
    }); 

background.js :

//regsiter the event 
backgroundInit = function(worker) { 
    worker.port.on("open_options", function(request){ 
    var tabs = require("sdk/tabs"); 
    tabs.open({ 
     //open a new tab to display options page 
     url: self.data.url("options.html"), 
    }); 
    } 

    worker.port.on("pull_preferences", function(request){ 
    var preferences = null; 
    //get preferences (from simple storage or API) 
    woker.emit("update_content_preferences", {preferences:preferences}); 
    }); 


    worker.port.on("push_preferences", function(request){ 
    var preferences = request.preferences; 
    //write the preferences (to simple storage or API) 
    }); 
} 

//register the page, note that you could register multiple ones 
pageMod.PageMod({ 
    include: self.data.url('options.html'), 
    contentScriptFile: [ self.data.url("lib/jquery-1.11.3.min.js"), 
         self.data.url("options.js")], 
    contentScriptWhen: 'end', 
    onAttach: backgroundInit 

}); 

options.js: (इस पेज सामग्री स्क्रिप्ट के संदर्भ पर भी है)

$(document).ready(function(){ 
    self.port.on("update_content_preferences", function(request){ 
    var preferences = request.preferences; 
    //update options page values using the preferences 
    }); 

    $("#save").click(function(){ 
    var preferences = null; 
    //get preferences from options page 
    self.port.emit("push_preferences", {preferences:preferences}); 
    }); 

    self.port.emit("pull_preferences", {}); //trigger the pull upon page start 
}); 

संदर्भ: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs