Porting a legacy add-on to WebExtensions

tl;dr: Search Keys has been ported successfully and it is known as Add Search Number. Please try it! It works with Google, Yahoo (HK/TW/US), Bing, DuckDuckGo and even Wikipedia’s search page.


Add Search Number

I have been using the excellent Search Keys add-on (original page) for a long time. It allows one to “go to search results by pressing the number of the search”. However, it hasn’t been updated for the better half of a decade and most features (e.g. support for Yahoo! and Bing) had broken, except for the numbers for Google Search.

Recently, there has been a push to move to the WebExtensions API, especially since Firefox 57 will stop supporting legacy XUL add-ons. Hence, I set about a quest to see what it takes to port Search Keys away from XUL, and I kept the author updated throughout.


  • Using GitHub with Travis and ESLint integration was crucial for saving myself time avoiding silly syntax errors. I’m sure it could be done in your favourite online repository hosting alternative (Bitbucket/GitLab), etc.
  • Getting web-ext via npm also proved essential, along with WebExtension examples
  • You need to check if the old APIs have equivalents.
    • Search Keys was using nsIIOService which had no equivalent, but it was only used for ensure that a URL is indeed an URL, so I just did it another way (new URL = “<url>”). Thanks :MattN for the tip.
    • Another usage was for openUILinkIn, and there are similar-enough WebExtensions equivalents for this (tabs, windows).
    • (File a bug if an equivalent isn’t available, but first check for dupes)
  • Migrating an old project by another person is hard. I had to have several commits where I removed features, wither down the code to the bare minimum (my objective was just to add numbers for Google Search results), got it to work, tested, and then re-added support for Yahoo!, Bing, and even DuckDuckGo and Wikipedia.
  • Comments proved extremely helpful, in the absence of documentation.

I took about 2 days to port the add-on. Developing an add-on now has come a long way and is now much easier due to the presence of these tools (GitHub, devtools, etc.) as well as AMO being much improved ever since I started writing my first add-on (ViewAbout) almost a decade ago. Sadly, ViewAbout will unlikely be ported to WebExtensions, if ever. (Reasons are at that link)

This was tested on Firefox 55, exactly experiencing the difficulties that an add-on developer currently would face right now.

The only major caveat?

There were times when I set a breakpoint on a content script using Firefox’s Developer Tools (instantiated via web-ext). After I refresh the page, the extension would occasionally “disappear” from the devtools. I would then have to close Firefox, restart it via web-ext, re-set the breakpoint, then cross my fingers and hope that the devtools will stop at the required breakpoint.

In my experience, this has been straightforward, as the original add-on was fairly simple. I understand that for other complex add-ons, the porting process is much more complicated and take a much longer time.

What has your experience been like?

(Please note that this post does not discuss the pros and cons of whether Firefox 57 and later should use WebExtensions or not, hence cutting off legacy support, any comments on this will be removed.)


Multilingual slides in HTML5 Mozilla Sandstone slidedeck

Edit: You can now preview the changes live. Also, the pull request got accepted!

I just submitted a GitHub PR for adding multilingual support to Mozilla’s HTML5 Sandstone slidedeck. The selection is persistent across slide changes, and in Firefox, the URL bar will update the lang attribute as well.

Pictures are worth thousands of words, so here you go:

Screenshot showing language menu dropdown

Screenshot showing language menu dropdown

To add languages:

  1. Add the style tags to the stylesheet
  2. Modify the language menu
  3. Place your translation within <div> tags with language code class names
Screenshot showing slide after language selection

Slide after language selection

Example code:

<div class=”en-US”>This is English.</div>
<div class=”zh-CN”>这是中文(简体)。</div>
<div class=”zh-TW”>這是中文(繁體)。</div>
<div class=”ja-JP”>これは日本語です。</div>

Screenshot showing the next slide with persistent language selection change

Next slide with persistent language selection change

If you would like to use this now, my changes are on a GitHub fork.

Massive thanks go out to :MattN who greatly helped me out. Thanks Matt!