Niro* by cho45

#18 JSDeferred in Jetpack (Add-on SDK). Easy to dialogues between chrome and content.

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;

widget = Deferred.postie(widgets.Widget, {
	label      : "Foo",
	contentURL : '',
	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
		next(function () {
			return wait(1);
		next(function () {
			return self.
				post(function (a, b) {
					throw "foo";
				next(function (res) {
				error(function (e) {
	onMessage : function (message) {
	contentScript : 'setTimeout(function () { postMessage("custom message") }, 1000)',
}); () {
	var d = new Deferred();
	setTimeout(function () {;
	}, 1000);
	return d;
next(function (a) {
	console.log("Hello! " + a);
error(function (e) {

widget.bind("body", "click", function (e) {
	console.log("body clicked" + e);
error(function (e) {

[[javascript]] [[jsdeferred]] [[jetpack]]

#16 The JavaScript Philosophy

  1. Small is beautiful.
  2. Make each snippet do one thing well.
  3. Build a prototype as soon as possible.
  4. Choose portability over efficiency.
  5. Store data in plain object.
  6. Use software leverage to your advantage.
  7. Use callback to increase leverage and portability.
  8. Avoid captive user interfaces.
  9. Make every snippet independent.

Mike Gancarz: The UNIX Philosophy


#2 Benchmark JavaScript code casually

Sometimes, want benchmark to compare some codes and show it people. I made a tiny benchmark script in a .html and a .js.


  • Run each code in random for fairness
  • Color after running
  • Only html and javascript code
  • link



#1 Advantage of createElementFromString over jQuery

createElementFromString is a snippet which creates DOM elements from JavaScript string. This is mostly slower than innerHTML or jQuery's $(). But sometimes, this function has advantage over them.

  • Create lump of DOM tree from string
    • Eg. create from template
  • Do fill-in after constructing DOM
  • Do bind events in inner DOM elements

As usual, jQuery's $() is used with $().find() function to retrieve event target elements. find() is very heavy function, using it many times is not a good idea. So solution of createElementFromString is not using innerHTML but parsing by self and hold elements which will be needed at a time.


'template1' is a string contains following:

<div class="entry">
	<h2 class="title">#{title}</h2>
	<div class="body">
	<div class="info">
		<span class="datetime">#{datetime}</span>
		<span class="author">#{author}</span>

And use createElementFromString as

var t = createElementFromString(template1, {
    parent : document.body,
    data : {
        title    : "aaa<aaa>",
        body     : "foobar",
        datetime : "2008-07-19T20:26:54Z",
        author   : "cho45"

Returned object has properties named with each class attribute.

t.title    //=> h2.title
t.body     //=> div.body     //=>
t.datetime //=> span.datetime   //=>


[[javascript]] [[snippet]]