Question

下面的列表概述了测试用例中的操作。

打开FF
```
addon: loaded
```

点击widget图标

console.log: addon: shown
console.log: addon: getting prefs
console.log: addon: sending prefs

点击cancelButton

console.log: addon: Clicked: Cancel
console.log: addon: Recieved .. Cancel
console.log: addon: hid
console.log: addon: loaded

重复..

在这种情况下，这四个步骤共执行了4次，即16次操作以下是该执行的调试信息，
为什么在//console.log: addon: loaded被点击4次后输出cancelButton 而不是console.log: addon: Recieved .. Cancel？

addon: loaded // 1st iteration
JavaScript strict warning: chrome://browser/content/urlbarBindings.xml, line 672: reference to undefined property this._value
JavaScript error: chrome://browser/content/urlbarBindings.xml, line 654: aUrl is undefined
console.log: addon: shown
console.log: addon: getting prefs
console.log: addon: sending prefs
console.log: addon: Clicked: Cancel
console.log: addon: Recieved .. Cancel
console.log: addon: hid
console.log: addon: loaded // 2nd iteration
console.log: addon: shown
console.log: addon: getting prefs
console.log: addon: sending prefs
console.log: addon: Clicked: Cancel
console.log: addon: Recieved .. Cancel
console.log: addon: hid
console.log: addon: loaded // 3rd iteration
console.log: addon: shown
console.log: addon: getting prefs
console.log: addon: sending prefs
console.log: addon: Clicked: Cancel
console.log: addon: Recieved .. Cancel
console.log: addon: hid
console.log: addon: loaded // 4th iteration
console.log: addon: shown
console.log: addon: getting prefs
console.log: addon: sending prefs
console.log: addon: Clicked: Cancel
//console.log: addon: loaded

Panel是使用main.js中的Panel.init();创建的，但从未再次调用过。用户点击Panel时会显示widget。

var Panel = require("sdk/panel"),
    confirmation,
    selectedText;

exports.init = function() {

    confirmation = Panel.Panel({
        width: 450,
        height: 325,
        contentURL: require("sdk/self").data.url("html/ConfirmPanel.html"),
        contentScriptWhen: "ready",
        contentScriptFile: [ require("sdk/self").data.url("js/ConfirmPanel.js") ],
        onShow: function() { console.log("shown"); getPreferences(); },
        onHide: function() { console.log("hid"); },
        onError: function() { console.log("error"); }
    });

    confirmation.port.on("getPrefs", function () {
        getPreferences();
    }); 

    confirmation.port.on("click", function (action) {

        console.log("Recieved .. " + action);
        confirmation.hide();
    });

    require("sdk/widget").Widget({
          id: "widget",
          label: "addon",
          contentURL: require("sdk/self").data.url("images/addon.png"),
          panel: confirmation,
    });
}

function getPreferences() {

    console.log("getting prefs");

    var prefs = '{'
        +'"fileName":"' + File.createFileName() + '", '
        +'"pathToFile":"' + File.getPathToFile() + '"'
        +'}';

    console.log("sending prefs");
    confirmation.port.emit("prefs", prefs);
}

Panel由ConfirmPanel.html定义的内容：

<html>
    <head>
        <meta charset="UTF-8" />   
    </head>
    <body>
        <form>
            <table>
                <tr>
                    <td>
                        <div data-l10n-id="fileName_title"></div>
                    </td>
                    <td>
                        <textarea id="fileName" rows="1" cols="20"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div data-l10n-id="pathToFile_title"></div>
                    </td>
                    <td>
                        <textarea id="pathToFile" readonly="true"></textarea>
                        <button id="pathToFileButton">
                            <div data-l10n-id="browse_title"></div>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button id="saveButton">Save</button>
                    </td>
                    <td>
                        <button id="cancelButton">Cancel</button>
                    </td>
                </tr>
            </table>
        </form>
    </body> 
</html>

内容脚本，ConfirmPanel.js：

console.log("loaded");

// listen for preferences message from addon code and set values of Panel UI
self.port.on("prefs", function (prefs) {
    var parsedPrefs = JSON.parse(prefs);

    document.getElementById("fileName").value = parsedPrefs.fileName;
    document.getElementById("pathToFile").value = parsedPrefs.pathToFile;
});

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        text = target.textContent || text.innerText;   

    console.log("Clicked: " + text);
    self.port.emit("click", text);

}, true);

Answer 1

将type添加到Panel按钮会阻止他们提交数据并阻止不必要的行为发生：

<button type="button" id="saveButton">Save</button>

addon sdk Panel不接收来自内容脚本的通信

1 个答案: