A released addon

Why?⌗

Last night, teddit.net trended over at Hacker News. Teddit describes itself as a privacy-first frontend for Reddit. It is compatible with the URL scheme that Reddit uses, for example reddit.com/r/unixporn becomes teddit.net/r/unixporn. Since I often end up on Reddit from links instead of casually browsing, I thoughy it would be handy with a way of automatically redirecting all Reddit links to Teddit instead.

Of course addons for redirecting one URL to another already exist, but I figured this would be a nice project to dip a toe into the world of browser addon development.

How?⌗

I was surprised how easy the whole process is - from getting an initial boiler plate to the process of submitting the finished project for review over at Mozilla. I think the whole shebang took about 20 minutes, plus one day for the review.

At its core, an addon consists of two files: manifest.json and app.js. The latter can be named what ever you want. The manifest points out a bunch of meta data about the addon, and for what URLs the addon should be active - in this case *://*.reddit.com/*. Compared to the manifest I recall from Android development, this manifest can be kept rather tiny.

// manifest.json
{
  "manifest_version": 2,
  "name": "Teddit Redirect",
  "description": "Redirect from Reddit to teddit automagically",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.reddit.com/*"],
      "js": ["teddit-redirect.js"]
    }
  ]
}

The manfest also points out what class that should be executed when the addon is invoked. There are no special handlers or so - the javascript is just invoked and executed as-is, from top to bottom. For teddit-redirect that means that the actual code is kept super slim, just three lines in total:

// app.js 
const original_url = window.location.href
const new_url = original_url.replace('old.reddit.com','teddit.net').replace('reddit.com','teddit.net')
window.location.replace(new_url)

That’s it! The addon is now technically ready for submission.

Test run⌗

teddit-redirect in action teddit-redirect in action, in 2x speed. The addon doesn’t execute until the page has finished loading, which is unfortunate, but opens up for a freemium business model where paying users are redirected instantly ʕ ͡° ͜ʖ ͡°ʔ

In Firefox, head over to about:debugging, and click This Firefox in the left menu, then Load Temporary Add-on.... Pick any of the files of your project and Firefox will figure out the rest and load your addon. Magic. The addon is installed only for the current session and will be unloaded when you restart Firefox.

Package and publish⌗

The “packaging” consists of zipping the project into a zip-file. zip -r -FS ../teddit-redirect.zip * --exclude '*.git*' will zip the current working directory and ignore the .git-directory.

Next, you need an Firefox account in order to submit an addon to the official Firefox addon store. It is the same kind of account you use for Firefox Sync.

Once you got your account, you are ready to publish. Just follow the wizard, upload your zip-file and wait for the folks at Mozilla to review it! Happy coding.

Further reading⌗