Create an Opera extension in 5 mins

Because of Pocket's super terrible tag searching, I think it's kinda important for me to have a new read-later service. Readability is another good read-later service, and it supports Kindle, which is very good for people who loves to read on Kindle. However, the bad news is Readability doesn't have extension for Opera or Mac application, and I really don't want to switch to Chrome just because I want to add a link, so I decided to create a very simple extension just for myself. Opera 15 is very different from the original Opera. I would say that Opera 15 is basically another version of Chrome. If you have ever created Chrome extension, then there's no need to worry about creating Opera extension. Theoretically, Opera and Chrome can basically share the same extension; however, not many developers upload their extensions to Opera extension site, which is why I still need to write an extension for my own need.

To create an Opera extension, I created a new folder and there are only 3 files inside of this folder:

  • manifest.json
  • background.js
  • icon.png (the icon PNG file, I downloaded from Readability)

Start from manifest.json

This is a config file for your extension, and I only have very basic settings in here. If you would like to know more details about each facet, please check the document Formats: Manifest Files on Dev.Opera.

manifest.json
{
  "manifest_version": 2,
  "name": "oBookmark",
  "description": "Bookmark extensions for Opera 15",
  "version": "0.0",
  "developer": {
    "name": "Eva Hsieh",
    "url": "http://codingair.wordpress.com/"
  },
  "background": {"scripts": ["background.js"]},
  "permissions": ["tabs"],
  "homepage_url": "http://codingair.wordpress.com/",
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Save To Readability"
  }
}

The facet `background` is a common need seeting for extension. In general case, background page will exist for the lifetime of the extension and only have one instance when the extension is active. However, if your extension use "incognito": "split", it will create new instance when you create new incognito window.

Because all I need is a super simple JavaScript that can mail the page information to Readability, I only specified the background script in my manifest.js file.

For `browser_action`, I specified the icon and icon title, which will appear on your browser toolbar.

Work on background.js

My idea is to get URL and Title information from current tab and mail to my readability email, which you can find in Readability > Add via Email.

Then I added all required information to the `mailto` link and create a new tab to link to this mailto link.

background.js
chrome.browserAction.onClicked.addListener(function(tab) {
    var action_url = 'mailto:xxx@inbox.readability.com?';

    action_url += 'subject=' + encodeURIComponent('Email Article URLS Into Readability');
    action_url += '&body=' + encodeURIComponent(tab.title);
    action_url += '%0D%0A%0D%0A' + encodeURIComponent('Like this one: ' + tab.url);
    chrome.tabs.create({ url: action_url });
});

Load Unpacked Extension

Go to Window > Extensions and click the `Developer Mode` button on the top-right hand side. Then you can select `Load Unpacked Extension` and select your own folder. If you have any update or change, all you need to do is to `reload` the extension.

Screen Shot 2013-08-16 at 2.00.14 PM

That's all. Now I can use this super simple extension to add links to Readability without switching to Chrome, and change to use Readability API when I have time.