Firefox Addon SDK: Các cách hiển thị tùy chọn cho người dùng?

Question

Tôi khá mới để phát triển addon với firefox. Tôi đã chọn addon sdk để chuyển tiện ích chrome của tôi sang firefox.

Bạn sẽ đề xuất gì để hiển thị cửa sổ tùy chọn/cửa sổ tùy chọn/cửa sổ tùy chọn cho người dùng?

Tải tệp options.html từ thư mục addon của tôi hoạt động khá tốt (addTab (data.url ("options.html"));), nhưng tôi không thể đính kèm trang-mod vào nó, miễn là ai biết. Vì vậy tôi không thể giao tiếp với main.js để lưu các tùy chọn của tôi, phải không?

Ngoài ra người dùng nên truy cập nó như thế nào? Trong chrome, điều này khá dễ dàng. Nhấp chuột phải vào biểu tượng của bạn -> tùy chọn và nó sẽ mở ra cho bạn. Có cách nào để tạo một hành vi simliar cho firefox không?

Mọi đề xuất về điều đó?

Answer 1

Bắt đầu với SDK bổ sung 1.4, bạn có simple-prefs module. Nó sẽ tự động tạo các tùy chọn nội dòng cho tiện ích bổ sung của bạn - chúng được hiển thị trực tiếp trên trang của tiện ích mở rộng của bạn trong Trình quản lý Tiện ích. Đó nên là cách ưa thích để hiển thị các tùy chọn. Nhược điểm: mở các tùy chọn lập trình là không tầm thường, ngay cả đối với các tiện ích bổ sung cổ điển. Và SDK dường như không hỗ trợ các điều khiển phức tạp (documentation of what's possible with inline options), chỉ có những điều cơ bản nhất.

Nếu bạn muốn tự cuộn, có thể bạn muốn tích hợp nút "Tùy chọn" vào một số drop-down panel. Bạn cũng sẽ có thể đính kèm một kịch bản nội dung để nó qua page-mod package, một cái gì đó như thế này nên làm việc:

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

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

Nhược điểm ở đây: bằng cách sử dụng phương pháp tiêu chuẩn để hiển thị add-on tùy chọn (thông qua Add-ons Manager) thắng' t có thể, SDK không hỗ trợ bất cứ điều gì, nhưng tùy chọn nội tuyến.

Answer 2

Trong trường hợp này, bạn cần sử dụng Port.on()/Port.emit() để gửi tùy chọn kiểm soát từ options.html, như nhấp vào nút cài đặt. Và "tab" mô-đun

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

Cảm ơn Wladimir Palant để chỉ ra hướng, tuy nhiên nó vẫn đưa tôi nhiều thời gian để tìm ra các mã cuối cùng. Tôi đặt kết quả của tôi ở đây để tham khảo những người khác trong tương lai. (Tôi đơn giản hóa mã một chút ở đây cho mục đích xây dựng, nhưng cơ cấu chính nên chính xác.)

content.js: (bấm vào một liên kết để mở trang tùy chọn)

$("#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: (trang này cũng là bối cảnh nội dung kịch bản)

$(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 
}); 

Tham chiếu: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs