Can i use html for addon gui? [closed]

Question

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 8 years ago.

Improve this question

I need a button on addon bar and button on toolbar that redirect to some type of settings page(html,css,js) and this page can interact with main.js. Can it be done? If can, plz reccomend good tutorial.

Answer 1

Add button: use widget, ActionButton or ToggleButton.
Settings page(html,css,js):use page-mod.
Interact with main.js:use port or postMessage()

Here is an example:
main.js:

var pageMod = require("sdk/page-mod");
var widgets = require("sdk/widget");
var tabs = require("sdk/tabs");
const data = require("sdk/self").data;

var optionsPage = pageMod.PageMod({
    include: data.url("options.html"),
    contentScriptFile: data.url("options.js"),
    onAttach: function(worker) {
        worker.port.on("callMain",function(msg){
            console.log("callMain: " + msg);
        });
    }
});
var widget = widgets.Widget({
    id: "justForTest",
    label: "justForTest",
    contentURL: data.url("widget.png"),
    onClick: function(){
        tabs.open(data.url("options.html"));
    }
});

options.js:

self.port.emit("callMain", "from options.js");