![](/img/trans.png)
[英]localStorage between panel content script and page content script in firefox addon
[英]addon sdk Panel does not recieve communication from content script
下面的列表概述了測試用例中的操作。
打開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個動作。
以下是該執行的調試信息,
為什么//console.log: addon: loaded
在單擊cancelButton
4次后//console.log: addon: loaded
輸出
而不是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.init();
創建Panel
Panel.init();
在main.js中,不再調用。 用戶單擊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
的內容由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);
在Panel
的按鈕中添加type
阻止了他們提交數據,並阻止了不良行為的發生:
<button type="button" id="saveButton">Save</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.