An overview of what Browser Extensions are, why they are useful and important, what all they can do and moreover, what kind of technologies and knowledge is involved in developing a Google Chrome Extension or Mozilla Firefox Add-on

1. Browser Extensions
Introduction

2. 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.

3. 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

4. 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

5. Best way to understand … Examples
An Extension that keeps showing new Facebook notifications without needing to open Facebook in a tab

6. Best way to understand … Examples
An Extension that lets you save documents to Google Drive on the fly

7. 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.

8. 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
etcetcetc..

9. 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
etcetcetc…

10. 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>>
Orread 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);>>
OrChange the page contents: << document.documentElement.innerHtml= “Hey, we removed all content from your page :P”;>>
Then you are all set to develop Extensions !!

11. 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

12. It’s a different thing, however,
that with an extension, you can collect more information than just the page Urland Html Content and do much more stuff :D
You can have a user sign into his Google Account or Facebook Account using their OauthIds. This will give you access to the user’s name, email etcetc…

13. Just a little more complex … really !
Usually, browsers won’t just ask you for a list of javascriptfiles 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

14. 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