Creating and Publishing a Browser Extension

by Aaron Lenoir

I made a super-tiny browser extension. It's a button. When pressed it sends the current page to the Internet Archive.

The business end is about 10 lines of code.

In case you are wondering. The Internet Achive itself offers a plugin which is probably better than mine. It has more features. Mine does almost nothing, which is exactly what I wanted.

WebExtensions API

In the past, extensions were different for each browser. There is now a standard called "WebExtenions API". Which more or less allows you to write an extension that runs on all modern browsers.

In my case, I tested it on the desktop versions of Firefox, Chrome and Edge.

These extensions are made with html, css and javascript.

Have a look at the source code on Github.

There are two important files:

manifest.json

This is where one defines some info of the extension. I specify

  • Information
{
"author": "Aaron Lenoir",
"manifest_version": 2,
"name": "Send to Internet Archive",
"version": "1.0.0",
"description": "Saves the current web page as it appears now to the Internet Archive for use as a trusted citation in the future.",
"homepage_url": "https://github.com/AaronLenoir/SendToArchive",
  • Required permissions
"permissions": [
  "activeTab"
],
  • Icons
"icons": {
  "16": "icons/add_doc_16.png",
  "20": "icons/add_doc_20.png",
  "48": "icons/add_doc_48.png",
  "64": "icons/add_doc_64.png",
  "128": "icons/add_doc_128.png"
},

Interestingly, support for SVG icons is bad. I was forced to use png's of various sizes. The SVG icons were often deformed or wouldn't appear at all.

  • Menus and actions
  "browser_action": {
    "default_icon": {
      "16": "icons/add_doc_16.png",
      "20": "icons/add_doc_20.png",
      "48": "icons/add_doc_48.png",
      "64": "icons/add_doc_64.png",
      "128": "icons/add_doc_128.png"
    },
    "default_title": "Save page to the Internet Archive"
},

In my case, I only had one action and no menu. An action can have an icon associated to it. But each browser displays it differently. Chrome and Firefox show an icon in the toolbar. In Edge it's hidden in a menu somewhere.

  • Background scripts to load
"background": {
  "scripts": ["background_scripts/background.js"],
  "persistent": false
}
}

The persistent flag was required by Edge. It means this is an event page: Unless the extension is actively doing something, it is unloaded. As opposed to a persistent background page that remains loaded.

Triggering an Action

The background.js script defines what must happen when the browser action is executed:

var browser = browser || chrome;

browser.browserAction.onClicked.addListener(function (tabInfo) {
    var rootUrl = "https://web.archive.org/save/";
    var targetUrl = rootUrl + tabInfo.url;
    browser.tabs.create({
        url: targetUrl,
        active: false
    });
});

Interesting here is the "browser" object is not available in chrome. That's why the first line is var browser = browser || chrome;. According to the WebExtension API, it should be "browser".

Testing

To test an add-on, you can load debug addons. The way to do that is different for Chrome, Firefox and Edge.

  • Chrome: go to chrome://extensions and enable "Developer mode". Then "load an unpacked extension" and point it to the folder where the manifest.json file sits.
  • Firefox: go to about:debugging, click "Load temporary addon", open the manifest.json file of the extension
  • Edge: go to about:flags, enable "Enable extension developer features", go to the "more" menu ("...") > Extensions > Load extension and select the manifest.json file

Icons

To make the icons I used InkScape. I'm not very experienced so it was mostly trial and error. The challenging part was drawing something that made sense when it was big, but that still worked when it was smaller.

The key is not to have too many details.

I included the original SVG in my github if you want to look at it.

Note that I don't use this SVG in the plugin, since most browsers are pretty bad at handling SVG for this.

Publishing

So that was actually the entire extension. Since I had it, I also wanted to publish it.

Firefox

Publishing the extension for Firefox was quite straight forward.

Firefox will, after some automated checks, sign the extension. You can choose to place it on the addons pages of Firefox or retrieve the signed extension and make it available by yourself.

Firefox only runs extensions signed by addons.mozilla.org.

Chrome

Slight surprise here. Before you can upload an extension, even a tiny one like mine, you need to pay google a $5 sign up fee for the "store". Their goal is not to make a lot of money with this, but they use it to make sure you are who you say you are.

This is an attempt to stop malware being pushed into the store.

To publish, you first sign in to the webstore. Then you publish your extension, and pay the $5 fee.

Paying this was a huge pain because it would not accept my credit card. I tried it a few times in various ways then I gave up. A few days later I was notified by Mastercard my card was blocked due to suspicious transactions.

After calling Mastercard, they unblocked my card and allowed "google services", which they had blocked by default. This was the reason google wouldn't accept it.

After that, it got published: https://chrome.google.com/webstore/detail/send-to-internet-archive/bahemchapiecnbbljjmnjkpneaphcncl

Edge

Apparently, edge only publishes some select extensions. You have to sign up and let them know you want your extension included. It's a totally manual operation.

I didn't yet go through with this.

Conclusion

This was a small extension I wanted to have. There were some similar extensions out there, so I probably shouldn't have made anything.

But at least I learned about Web Extensions and publishing them to the Firefox and Chrome "stores".