[英]addon sdk Panel does not recieve communication from content script
The list below outlines actions in a test case. 下面的列表概述了测试用例中的操作。
Open FF 打开FF
addon: loaded
Click widget
icon 点击widget
图标
console.log: addon: shown console.log: addon: getting prefs console.log: addon: sending prefs
Click cancelButton
点击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. 在场景中,这4个步骤总共执行4次,即16个动作。
the following is debug info from that execution, 以下是该执行的调试信息,
why is //console.log: addon: loaded
output after cancelButton
is clicked 4 times 为什么//console.log: addon: loaded
在单击cancelButton
4次后//console.log: addon: loaded
输出
instead of console.log: addon: Recieved .. Cancel
? 而不是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();
使用Panel.init();
创建Panel
Panel.init();
in main.js and never called again. 在main.js中,不再调用。 Panel
is displayed when user clicks widget
. 用户单击widget
时将显示Panel
。
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
: 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>
Content script, ConfirmPanel.js
: 内容脚本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);
在Panel
的按钮中添加type
阻止了他们提交数据,并阻止了不良行为的发生:
<button type="button" id="saveButton">Save</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.