Niro* by cho45

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.

• https://github.com/cho45/jsdeferred/blob/jetpack/jsdeferred.jetpack.js#L368

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]]