Writing a Chrome extension

With a large number of services available online, we tend to to spend most of our time on our browser. Well browser do come handy for a large number of activities from reading news to making travel and dining reservations. What can be better than a browser that can do some cool stuff with a click of mouse or a simple key stroke… I guess nothing

Google Chrome is the best web browser around right now (see usage statistics), and part of Chrome’s appeal is owed to its excellent extensions. Its not really hard write simple extension to get your work done.
All it needs is a little javascript, html and may be some css if you want things to be a little more pretty.

So lets build one…

Purpose: Export Chrome bookmarks to Pocket account.

Requirements:

  • Some javascript skills
  • poor html skills
  • since we want to talk to servers at Pocket, we need to know how the api works.

Authenticating with pocket api

  1. Obtain platform consumer key from Pocket
  2. Obtain a request token
  3. Redirect user to pocket to continue authentication
  4. Receive callback from pocket
  5. Convert request code from step 2 into a Pocket access token
  6. Begin making authenticated request to Pocket

Step 1 above needs to be performed only once while you will have to go through remaining steps overtime want to connect to pocket. More details can be obtained from Pocket docs rtfm.

When making a request to get request token from Pocket, we need to pass a redirect url, this is application specific url where Pocket will redirect our request after processing. We can obtain an unique redirect url for our chrome extension using the Chrome Identity api. The api provides a getRedirectURL() function just for this purpose. Hence we do chrome.identity.getRedirectURL() call to obtain the redirect url.

Writing Chrome browser extension

manifest.json:  the Anchor

Every chrome extension must have at the least one file named manifest.json, which holds the basics of the extension- its name, description, version number, permissions, etc.

So, in order to begin create a new folder for the extension, and within the folder a file called manifest.json.
Put following content in the file:

the first few fields are self explanatory, for others
browser_action: tells Chrome that we are making a browser extension that have a icon called import.png and default popup will show from file popup.html.
then there is some information about the icon and obviously the author.

content_scripts: Content scripts are JavaScript files that run in the context of web pages. By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.
We will use import.js for all our js code required. We also specify that we will only communicate with getpocket.com domain and its subdomains, if any.

permissions: API to request declared optional permissions at run time rather than install time, so users understand why the permissions are needed and grant only those that are necessary.

  • bookmarks: API to create, organize, and otherwise manipulate bookmarks.
  • identity: API to get OAuth2 access tokens

Now we have our manifest.json in a good shape let’s begin with import.js, the core of the extension.

popup.html: User interaction

Within the folder create another file called popup.html and put in the following code

this is simple enough and goes without any explanation.

import.js:  Core application logic

Within the folder crate another file named import.js.

Put in the following content in the file.

the file contains the code for making XMLHttpRequests to Pocket api.

On page load e.i. when the pop-up has been initialised we call our first function  import_chrome_bookmarks.

This function invokes other functions in a chain in order to complete all the six steps mentioned above and hence successfully upload all our bookmarks to Pocket account.

We have used two of the Chrome APIs to fulfil our task

  • Bookamarks: chrome.bookmarks.getTree() api call gives us access to user’s bookmarks and also accepts a callback function to manipulate the bookmarks.
  • Identity: chrome.identity.launchWebAuthFlow() api call enables us launch webAuthentication process with Pocket api and accepts a callback function to process the redirect and generate access token.

Link to github Repo

Advertisements