I wrote a binding of JSDeferred*1 to Jetpack (Add-on SDK). This makes very easy to message dialogues between chrome and content in some cases.
Load this library and you can use Deferred.postie(constructor, options) function for creating new widget or panel.
A instance of a widget or panel created by Deferred.postie has post() method and bind() method.
- post(args..., function) //=> Deferred
- Call function with args in the content context of receiver and get the result as Deferred.
- bind(selector, event, function) //=> Deferred
- Bind event to all matched elements by selector in content context and call function in chrome context as a event is fired.
So you can write basic message dialogue with following:
const Deferred = require("jsdeferred").Deferred;
Deferred.define(this);
widget = Deferred.postie(widgets.Widget, {
label : "Foo",
contentURL : 'http://example.com/',
width : 32,
onClick : function () {
var self = this;
next(function () {
return self.
post(1, 2, function (a, b) { // content context
return a + b;
}).
next(function (res) { // chrome context
console.log(res);
});
}).
next(function () {
return wait(1);
}).
next(function () {
return self.
post(function (a, b) {
throw "foo";
}).
next(function (res) {
console.log(res);
}).
error(function (e) {
console.log(e);
});
});
},
onMessage : function (message) {
console.log(message);
},
contentScript : 'setTimeout(function () { postMessage("custom message") }, 1000)',
});
widget.post(function () {
var d = new Deferred();
setTimeout(function () {
d.call(1);
}, 1000);
return d;
}).
next(function (a) {
console.log("Hello! " + a);
}).
error(function (e) {
console.log(e);
});
widget.bind("body", "click", function (e) {
console.log("body clicked" + e);
}).
error(function (e) {
console.log(e);
});
[[javascript]] [[jsdeferred]] [[jetpack]]