Erik Vold's Blog

New Work Blog Online

Tue, 28 Aug 2012 09:56:00 -0400

I've been wanting to start a new blog to separate my work from this website, which I'm not sure what I will do with anymore.. then I started working at Mozilla about a month ago, and now I need the new blog! So I have started it over at work.erikvold.com, I call it Voldzilla.

Right now the site is ugly, really ugly, because it is very plain, and it hasn't got any content at the moment. The content is something that I have time for, the design is going to take time.. but if you would like to help with the look and feel, or if anything at all bothers you about the site, then you can contribute here!!

70,000 More Extensions for Fennec!

Tue, 06 Sep 2011 01:40:00 -0400

Ever since I got my Android and installed Fennec I've wanted to add support for user scripts to Fennec. I'm happy to report that as of the last Scriptish release, you can install any user script on Fennec now!. So, now you can user script the mobile web to your heart's content. In fact, there's over 70,000 user scripts on userscripts.org alone.

Get Scriptish News @ Scriptish.org

Mon, 22 Aug 2011 15:00:00 -0400

For those of you that follow my blog for Scriptish news, you should know that there is a new website, scriptish.org, with a Scriptish blog.

So go to scriptish.org for your Scriptish news! though I'll probably still write about Scriptish and user scripts on this blog as well.

Using Jetpack SDK, part 2: Building Add-ons

Wed, 29 Jun 2011 01:42:00 -0400

Well after part 1 on cfx, you should know what the cfx command line tool is, so let's see if you can build a add-on with it now. FYI, I'm going to assume you know how to use git, because if you don't then you should learn asap.

First of all you'll need to have the Jetpack SDK (aka Add-on SDK) source downloaded, I recommend getting the source from github here. I typically keep all git clones from github in a folder called "github" someplace on my HD. After you've got the Jetpack SDK downloaded, you will want to clone my simple Copy HTML add-on for Firefox.

Once you have the Jetpack source, and the Copy HTML source downloaded, navigate to the Jetpack SDK clone in a shell program and follow these instructions. You should have gotten a message that says something like "Welcome to the Add-on SDK. Run 'cfx docs' for assistance.". Running cfx docs here would allow you to access the Jetpack SDK documentation, which is very valuable, and you should get familiar with it. You can disregard the message for now though, and navigate to the Copy HTML clone in your same shell window, once you are there you can use two important commands which build your addon; the first is "cfx xpi" which will build a xpi, and the second is "cfx run" which will build the add-on temporarily and open it in Firefox instance for you to test it out. Typically you will use "cfx run" and few times, testing changes out, before finally running "cfx xpi" and distributing your add-on.

The Copy HTML add-on is a simple add-on which adds a context menu called "Copy HTML" that allows one to copy the HTML source code for the area selected. So if you highlight a blog post, and copy the html, then you will have the html source of the blog post in your clipboard, img tags, anchor links, and all.

Well give this a try, and see if you can get it to work, so that you will be ready for part 3 on using packages.

Using Jetpack SDK, part 1: WTF is CFX?

Tue, 28 Jun 2011 02:57:00 -0400

I'm starting a new series on using the Jetpack SDK, as I like to call it; you may know it as the Add-on SDK, and I wold not hold that against you ;). I won't be talking about the Add-on Builder, that's another topic that I will save for later. If you are new to the Jetpack SDK, and think you are capable of running it via command line, then I hope that this will be a good starting point for you.

So you may be asking yourself "just wtf is cfx?" at this point. Well, cfx is short for Cuddlefish executer iirc, but the point I want to make is that the name doesn't really matter, it was just a arbitrary name for the tool afaik. However, cfx is the command-line tool provided by the Jetpack SDK that will allow you to build, run, and test add-ons that you develop with it, as well as allow you to access the documentation for the Jetpack SDK, and other packages that you may be using; so the name may not be important, but the tool is. The latest version of the documentation can be accessed here, but you will be able to access the documentation of third party packages (more on what these are to come!) with the cfx command-line tool, so it's usually easier to read the documentation with the cfx tool imo.

The instructions on how to install cfx are here, and the instructions on how to use cfx are here. So I won't bore you with those details, but I suggest you read them over, so that you are ahead of the game for part 2 "how to build a addon".

Restartless Firefox Add-ons, Part 8: Require, CommonJS, and Jetpack

Sun, 19 Jun 2011 17:27:00 -0400

Jetpack is the future. Give the old school add-ons up, it's over. Because sooner or later everything will be possible with some CommonJS style module, which would mean you'd be a fool to ignore these modules.

At the moment, I see normal restartless add-ons as those that write their own bootstrap.js file, which is a method I've been trying to help people learn to do with this series, because I felt it would be a stepping stone to converting existing old school add-ons to Jetpacks which I needed, and that other developers might need as well. Now, I can't explain why very well, but I feel that there is a freedom writing the bootstrap yourself which is very nice, and although it requires me to think about how to cleanup my code a lot more, that's something I needed.

There are serious drawbacks to building Jetpacks I think as well. Such as the file size of Jetpacks, a simple add-on which only uses a couple of the built-in modules is actually shipped with every module built-in to the add-on sdk, which means that anything you build will be at least ~250kb no matter what it does. Now that just sucks for desktop users, but for mobile users it really sucks.

Now though, I'm starting to write some common includes for my restartless add-ons, and those which I contribute to, which I'd like to share, and I'm starting to see Jetpack modules/packages being written that I want to use in my restartless add-ons. So I thought "it'd be nice to have a require() method for bootstrap.js", so I wrote a simple one:

If you copy & paste this code into your bootstrap.js file somewhere near the top of the file then you will have a require() method which will look in your add-on's "packages" folder for a ".js" file with the name you provide, if a module is not found there then the name is assumed to be a relative url.

With that you can start writing CommonJS modules which can be used by Jetpacks and even NodeJS and the like, as well as for your lean mean restartless add-ons. You can even start using Jetpack modules and other CommonJS style modules in your restartless add-on as well!

As always you can checkout Restartless Restart as a example.

Restartless Firefox Add-ons, Part 7: CSS

Sun, 19 Jun 2011 04:25:00 -0400

If you want to use css in your restartless addon, then you have wondered what the best way to do so is. There are many options, you could create xul/html elements to inject css, or you could simply alter the style attribute of elements you care about, but the other option (and the best one imo) is to use the nsIStyleSheetService to load css.

Loading and unloading

Use the loadAndRegisterSheet() method to load css at startup, and then use unregisterSheet() to unload the file during shutdown.

Getting CSS URL

You can use the bootstrap.js's "__SCRIPT_URI_SPEC__" constant to find the url of your css. For example, if you named your css file main.css and it was in a 'skin' folder in the root of your addon, then the url of the css file will be:

@-moz-document

You must use @-moz-document however to define which content or chrome page(s) the css rules that you are defining should run on. Userstyles have the same requirements.

Example

Here is a example where I separated the css from the bootstrap.js file for a addon called Search Tabs.

Using UserStyles with Jetpack

Sun, 19 Jun 2011 03:17:00 -0400

This morning I created a Jetpack module which makes it dead simple to include userstyles in a addon.

How to use

Here's a example:

In this example, the addon is loading a userstyle/css file located within it's "data" folder.

If you'd like to use this module, then it is available on github here for those of you that know how to use the addon-sdk. Otherwise, the module is also available on the Addon Builder here, and I have a example of how to use the module in the Addon Builder here. So give it a try!

UserStyles

For those of you that don't already know, a userstyle can be used to modify the css of any webpage (aka content) or Firefox window (aka chrome), and has been made popular by Stylish add-on for Firefox for which there is a site, userstyles.org, where thousands of userstyles can be found.

Github Address Bar Search Firefox Add-on

Tue, 14 Jun 2011 01:48:00 -0400

A couple of weeks ago Mozilla Labs & Twitter released a restartless Firefox add-on called "Twitter Address Bar Search", which actually did 3 main things:

Added a app tab for http://twitter.com/ if you did not already have one.
Added a Twitter search engine.
Added results to the address bar's suggestion list for you when you typed @username of #hash, which would allow you to save time whilst searching for @mentions or #hashes

Then Dietrich partly ported the address bar mods to a add-on sdk module. So I took his module, made some improvements, fixed some bugs, and whipped up a extension that does basically the same thing as the "Twitter Address Bar Search" add-on, but for Github, and made with the add-on sdk.

Github Address Bar Search

The "Github Address Bar Search" add-on is the same as the "Twitter Address Bar Search" add-on, except it doesn't add a Github search engine, I leave that to you.

Restartless Firefox Add-ons, Part 6: Better Includes

Tue, 14 Jun 2011 01:37:00 -0400

I just wanted to make a quick update on part 2: includes, because I've written a better include() function. This one will allow you to include files at any point in your bootstrap.js file; so you no longer need to wait for the startup function to run, and you no longer need to use the AddonManager.jsm file. This is just much more simple.

Just copy & paste the script above into your bootstrap.js file and then any code executed after it can use it immediately, and with relative urls. This is why you no longer need to use the AddonManager.jsm file, and that is why you no longer need to wait to use the startup method before including helper files.

Scriptish 0.1 Released!

Wed, 25 May 2011 01:40:00 -0400

Well, I'm very proud to announce that Scriptish 0.1 has finally been released!

Thank you

This is an event that has taken a long time to achieve, and I have had so much help from so many wonderful people that it has been a great pleasure to work on this project.

Greg Parris

Greg forked Scriptish and started contributing back in Oct '10 and he's been a constant help ever since. Greg has written plenty of code, made the wiki readable, improved the usability and user experience, and no doubt has spent countless hours testing. Thank you Greg!

Olivier Cornu

Olivier really showed me the way, he had forked Greasemonkey long before I ever started Scriptish, making a extension called Webmonkey which used Firefox 3 as the minimum supported version and taking advantage of the benefits that Firefox 3 had to offer. I pulled some code from Webmonkey and made Olivier the author (which he told me would be alright), but he really provided me with a proof by example of a simple idea, that a far better user script engine could be made by increasing the minimum supported version and taking advantage of the new features. Thank you Olivier!

Kirs Maglione

Kris has helped out with some error handling contributions early on, answering more than a few of my questions on IRC, and for doing the last few reviews on AMO which I'm sure took some time. Thank you Kris!

Nils Maier

Nils wrote some wonderful commits revamping the install window and really improving the UX of user scripts in the extension manager. I think these changes are the most visible to the average user, and are great improvements imo, so his help has been invaluable. Thank you Nils!

Dave Townsend

Dave is one of the developers of the new Addon Manager in Firefox, and he made a restartless extension called SlipperyMonkey (which he blogged about here) showing off a bunch of Firefox 4's new features. I've pulled a lot of this code in to Scriptish, and had the pleasure to meet Dave at the 2010 Mozilla summit in Whistler when he was showing SlipperyMonkey off, and got a change for a quick ~5min QA which proved to be most helpful to me. Thank you Dave! (and thank you David Dahl for telling me to speak with him, which I might not have done).

Mozillians

A community really makes all of the difference, and I've met no better. Just look at the documentation, look at the support, look at the inspiration, and look at the goals. Thank you Mozillians!

Github

I quite honestly wouldn't have bothered spending so many unpaid hours managing a open source project without a site that helps me administrate it like Github does, because it'd just be a waste of time. Thank you Github!

Restartless Firefox Add-ons, Part 5: Logging

Fri, 01 Apr 2011 23:07:00 -0400

This is a simple one for most of you, but I found someone asking the question "How do I dump messages from bootstrap.js" on stackovercrap so I thought it would make a good topic to quickly blog about.

First of all what I'm about to describe is exactly how one would log messages and report errors from a JavaScript code module, so if you already know how to do this, then stop reading and bounce.

If you are lost without window.dump or don't know what that is, then give this page https://developer.mozilla.org/en/window.dump a quick read. There is a note that says:

"dump is commonly used to debug JavaScript. Privileged code can also use Components.utils.reportError and nsIConsoleService to log messages to the Error Console."

Bingo! Give the page on nsIConsoleService a re-read. There is a code example on the top of that page that you can use to get a console service, then the page describes it's various methods, such as logStringMessage. You can use the logStringMessage method in window.dump's stead.

The window.dump page also mentioned Components.utils.reportError which can be used for logging error messages to the Error Console.

The way that I prefer to access the console service is via the Services.jsm JavaScript code module, like so:

Restartless Firefox Add-ons, Part 4: Localization (l10n)

Fri, 18 Feb 2011 02:33:00 -0400

Alright, part four has been a long time coming, but I finally got around to typing out an localization include for restartless Firefox 4 addons which I'm ready to talk about. If you haven't read part 2 it's all about how to use includes, so read it first, if you don't know what a restartless addon is, then start with part 1.

To start off with I wrote this include for Restartless Restart, and I consider that to be my demo.

Overview

Alright, so you should know how to use includes in a restartless addon now, and I shouldn't have to explain why localizing your addon is important, and you have an example; here are some notes:

To begin with you will need to copy this l10n.js file in to your addon, then include it at startup (in your addons bootstrap.js file) and create the all important underscore function (literally "_(aKey)"), like so:

Setup

So the example above assumes that you copied the l10n.js into a includes/ subdirectory, and that "filename.properties" is the name of the files within a /locale/en-US/ subdirectory for example, so the path to the english (US) translation for the text in your addon would be "/locale/en-US/filename.properties" (I would recommend using something other than "filename"). After l10n() is called it will create (and return) a global function named "_", which can be used to obtain the appropriate localized text. The 3rd parameter for l10n is the default locale that should be used when all other attempts fail. A failed attempted could be caused by a missing locale file (say you haven't yet translated your addon for the user's locale for instance), or the locale file could exist but not have the requested key, or the key could exist but be blank.

Using _

_ takes 2 arguments aKey, and aLocale which is optional.

aKey is the key for the text in your .properties file.

aLocale allows you to attempt to grab a specific translation before trying to get a translation from the user's locale, and lastly trying the default locale specified by the addon developer in the l10n call above (if that 3rd argument of l10n isn't provided then "en" is used). I use this in Restartless Restart to provide the user with the ability to override their browser's locale and get another translation. So I use the ja-JP translation for Restartless Restart on my Firefox profiles these days just because.

Conclusion

If you have a restartless addon, and you haven't localized it yet, then get to it!

Restartless Firefox Add-ons, Part 3: Icons

Mon, 07 Feb 2011 23:26:00 -0400

Well this is only part three, we are still just getting started after all =] so since I have very little time today I thought that I would write about how to include a icon for your restartless extension, since it's not exactly obvious. Although this method is documented here.

Basically all you need to do is include a icon.png in the root of your xpi (the same place as your bootstrap.js and install.rdf) and Firefox will automatically find it. You can also include a icon64.png in the root of your xpi and this will be used in the add-on manager's add-on detail view, so it's a good idea to include both if you have them because it'll be a better UX.

If you want to use the icon in other places use the method that I described in part 2 in order to find the file: url of the image and use that.

Google Reader Widget + Panel Jetpack for Firefox 4

Sat, 05 Feb 2011 00:05:00 -0400

I was doing a little hacking on the Add-on SDK a few weeks ago and whipped up a simple add-on for Google Reader which demonstrates a typical use case for the widget and panel modules which are part of the addon-kit package which comes with the Mozilla Add-on SDK. I call this add-on GReader Panel, and it basically just creates a clickable widget (which is just an icon that you can put anyplace that a toolbar item can go), which when clicked will open/close a panel about the size of a iPod screen with Google Reader mobile.

Check it out on AMO!

If you're interested in seeing the code, it's available on Github like all of my open source work.