CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonfirefox-addon-sdk
Abhishek Goyal
Abhishek Goyal

Reputation: 877

Firefox Addon SDK : prompt with multiple checkboxes

I'm developing a Firefox Add-On for a client.

When an user is uninstalling the Add-On, I need to show the user a prompt, which contains three checkboxes. These checkboxes will serve as an option to the user for restoring his/her previous browser settings.

I've successfully created a prompt on uninstall/disable, using the confirmCheck method of the nsIPromptService interface :

let value = {value: true};

let confirm = promptService.confirmCheck(
    null,
    "Uninstall My Extension",
    "You are uninstalling My Extension. You can chose these options to restore your settings to previous state.",
    "Remove My Extension as the default search engine, homepage, new tab landing page, and restore to my previous settings",
    value
);

The only problem is, it only contains a single checkbox, and I need 3 different ones, for "Seach Engine", "Homepage", and "New Tab Url" each.

I'm using chrome code through the Add-On SDK, and am not familiar with XUL.

How should I go about this? Do I really need to learn XUL for creating a simple prompt?

Upvotes: 1

Views: 299

Answers (1)

Abhishek Goyal
Abhishek Goyal

Reputation: 877

Alright, answering my own question, as I figured it out. The easiest way I found (comparatively) was to use XUL :

This is my prompt.xul :

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
<dialog id="myDialog"
        title="My Extension"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        onload="init();"
        buttons="accept"
        buttonlabelaccept="OK"
        ondialogaccept="return doContinue();">

    <script type="application/x-javascript">
        function init() {

        }

        function doContinue() {
            window.arguments[0].CHECK_1 = document.querySelector('#check_1').checked;
            window.arguments[0].CHECK_2 = document.querySelector('#check_2').checked;
            window.arguments[0].CHECK_3 = document.querySelector('#check_3').checked;
            return true;
        }
    </script>

    <html:div style="width: 410px;">
        <html:div>
            <html:p>You have selected to uninstall My Extension</html:p>
        </html:div>
        <html:blockquote id="checkboxes_container">
            <html:div id="remove_search_container">
                <html:input type="checkbox" id="check_1" value="true" checked="true"/>
                <html:label for="check_1">Label 1</html:label>
            </html:div>
            <html:div id="remove_homepage_container">
                <html:input type="checkbox" id="check_2" value="true" checked="true"/>
                <html:label for="check_2">Label 2</html:label>
            </html:div>
            <html:div id="remove_newtab_container">
                <html:input type="checkbox" id="check_3" value="true" checked="true"/>
                <html:label for="check_3">Label 3</html:label>
            </html:div>
        </html:blockquote>
    </html:div>
</dialog>

After adding the chrome package to chrome.manifest, this file should be accessible by :

chrome://YOUR_PACKAGE_NAME/content/PATH_TO_dialog.xul

I'm using chrome code to load the prompt, in main.js : 

let Window = Cc["@mozilla.org/embedcomp/window-watcher;1"]
            .getService(Ci.nsIWindowWatcher);

let arg = {

    CHECK_1: false,

    CHECK_2: false,

    CHECK_3: false

};

let window = Window.activeWindow.openDialog("chrome://YOUR_PACKAGE_NAME/content/PATH_TO_dialog.xul", "myWindow", "chrome,modal,centerscreen", arg);

After the user has closed the prompt, the arg object will contain the checkbox values of the prompt. For example, if an user ticks all the checkboxes, the arg object will be : 

{

    CHECK_1 : true,

    CHECK_2 : true,

    CHECK_3 : true

}

And that did it for me. Have a nice day!

Upvotes: 2

Related Questions