Firefox Addon SDK:带有多个复选框的提示

时间:2014-12-05 07:03:40

标签: javascript firefox firefox-addon firefox-addon-sdk

我正在为客户开发一个Firefox附加组件。

当用户卸载附加组件时,我需要向用户显示一个提示符,其中包含三个复选框。这些复选框将作为用户恢复其先前浏览器设置的选项。

我已使用uninstall/disable界面的confirmCheck方法在nsIPromptService上成功创建了提示:

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
);

唯一的问题是,它只包含一个复选框,我需要3个不同的复选框,分别用于“Seach Engine”,“Homepage”和“New Tab Url”。

我通过附加SDK使用chrome代码,并且不熟悉XUL。

我应该怎么做?我真的需要学习XUL来创建简单的提示吗?

1 个答案:

答案 0 :(得分:2)

好吧,回答我自己的问题,正如我弄清楚的那样。我发现(比较)最简单的方法是使用XUL:

这是我的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>

将Chrome包添加到chrome.manifest后,可以通过以下方式访问此文件:

chrome://YOUR_PACKAGE_NAME/content/PATH_TO_dialog.xul

我在main.js

中使用chrome代码加载提示
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);

用户关闭提示后,arg对象将包含提示的复选框值。例如,如果用户勾选所有复选框,则arg对象将为:

{

    CHECK_1 : true,

    CHECK_2 : true,

    CHECK_3 : true

}

这就是为我做的。祝你有愉快的一天!