addon sdk Panel does not recieve communication from content script

Question

The list below outlines actions in a test case.

Open FF
```
 addon: loaded 
```

Click widget icon

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

Click cancelButton

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

Repeat ..

Those 4 steps are executed 4 times in total during the scenario, ie 16 actions.
the following is debug info from that execution,
why is //console.log: addon: loaded output after cancelButton is clicked 4 times
instead of 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 is created using Panel.init(); in main.js and never called again. Panel is displayed when user clicks 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 's content defined by 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>

Content script, 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

在Panel的按钮中添加type阻止了他们提交数据，并阻止了不良行为的发生：

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

addon sdk Panel does not recieve communication from content script

Question

1 answers

solution1
0 ACCPTED 2013-11-25 14:48:13

addon sdk Panel does not recieve communication from content script

Question

1 answers

solution1 0 ACCPTED 2013-11-25 14:48:13

solution1
0 ACCPTED 2013-11-25 14:48:13