Introduction to Web Browser Extension/Add-ons

Browser ExtensionsIntroduction

What are they ?

An extension of the Web browser

The terminology, however, maybe different for different browsers; you have Chrome Extensions and Firefox Add-ons and … well others …

*And also, Chrome extensions can be installed and run only on Google Chrome, whereas Firefox Add-ons can be installed and run only on Mozilla Firefox and so on.

What are they ?

• Applications/Programs that are run by the browser, inside the browser.

So your application executes when the user starts the browser

• They build customized features on top of the browser that can make a user’s life easy, enable him to do more stuff

Why have extensions ?

• A browser in its base form provides only the absolutely necessary features/functionality

• Extensions can provide more features on top of the basic browser functionality. These features can make a user’s life easier, enable him to do more stuff etc.

• This enables users to install only features they use, and not unnecessarily load the browser with useless (for the user) features

Best way to understand … Examples

An Extension that keeps showing new Facebook notifications without needing to open Facebook in a tab

Best way to understand … Examples

An Extension that lets you save documents to Google Drive on the fly

They are developed in …

Extensions for most browsers are written in JavaScript. At least for Chrome and Firefox they are.

Advanced Extensions usually use JSON and AJAX (a lot !) to do complex stuff.

How do they work ? … Collect Information

When your extension (JavaScript code) runs inside the browser, it can access various information, like:

1. Page Url

2. Html of the entire page

3. If user has selected something, and what has he selected

4. If the user clicked

etc etc etc ..

How do they work ? … Do Stuff

Using the above information, they can do a lot of cool stuff, like:

1. Remove all the ads on the page

2. Suggest similar pages on the internet

3. Organize the tabs in a better way rather than in a row

4. Show a user how much time he spends on which page

etc etc etc …

But How to Collect Information and Do Stuff

• Have you ever written JavaScript ? I hope you have …

• Have you ever collected information in JavaScript, say

read the Url : << document.URL >>

Or read the page HTML : << document.documentElement.innerHTML >>

• And have you ever done stuff in JavaScript, say

Alert the user: << alert(“Hi, you are at :” + document.URL); >>

Or Change the page contents: << document.documentElement.innerHtml = “Hey, we removed all content from your page :P”; >>

Then you are all set to develop Extensions !!

But How to Collect Information and Do Stuff

(At a broader level), you just need to keep writing that JavaScript and give it to the browser and the browser will run it on the webpage for you !

Well, that is, if the user has installed your Extension :D

It’s a different thing, however,

that with an extension, you can collect more information than just the page Url and Html Content and do much more stuff :D

You can have a user sign into his Google Account or Facebook Account using their Oauth Ids. This will give you access to the user’s name, email etc etc …

Just a little more complex … really !

Usually, browsers won’t just ask you for a list of javascript files and run them on the user’s webpage

They will have various parts, ex:

1. A set of scripts that will run in the user’s webpage. The browser runs a separate copy of these for each tab. They can read anything in that tab, modify the page etc …

2. A set of scripts that will run in the background. They are not specific to any one webpage/tab in the browser. But they can talk to the first set of scripts

This organization of files/code is specific to the browser for which you are making the extension

Useful Resources

• http://talks.codegram.com/creating-basic-chrome-extensions#/description

• Google Chrome Extension Tutorial:https://developer.chrome.com/extensions/overview

• Chrome Storage API (lets your extension save data on user’s computer that can be used later)https://developer.chrome.com/apps/storage#property-local