javascript - 插件 sdk 面板未收到来自内容脚本的通信

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 个步骤在场景中总共执行了 4 次，即 16 个动作。
以下是该执行的调试信息，
为什么单击 4 次//console.log: addon: loaded后输出而不是？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是Panel.init();在 main.js 中使用创建的，并且不再调用。 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);

score 0 · Accepted Answer

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

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

javascript - 插件 sdk 面板未收到来自内容脚本的通信

1 回答 1

Related

Reference