Firefox for Android has an interesting homescreen: it’s divided in multiple panels (or tabs), which by default contain your history, bookmarks, recently closed tabs, reading list, synced tabs and the new-tab tiles. Since a while extensions can add their own panels. Even though the API is pretty simple it’s not as comfortable as Add-on SDK APIs are, so I decided to write a wrapper around it.
The result is in my jetpack-homepanel repository: a jetpack module, that lets you create panels like these:
Now, usage of the module isn’t that straight forward as installing the module via npm – yet. The main reason being that the package.json isn’t ready for npm. As soon as it is, I will publish the package on npm, so installation in your project is super easy.
The API I created is pretty well documented in the README.md, so I won’t repeat it here.
I’ve learned a few things while creating this module: never use JS arrow functions ( () => {} ) in a place you want a specific “this” context.
And use the WebIDE to debug Firefox for Android, since it’s very convenient to connect to the remote instance on Android. It would be nice, if you could push extensions over the IDE, because installing via Dropbox is a hassle…
Further the IDE will sometimes have problems with locating where an error occurred and similar things. Setting a breakpoint in the code (use the debugger statement if it’s in initialization code) will sometimes solve that, or at least give you line numbers or traces.
Overall remote debugging feels pretty unstable with weird SQL errors occurring somewhere in the debug protocol and similar things.