introduction to web browser extension/add-ons
TRANSCRIPT
![Page 1: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/1.jpg)
Browser ExtensionsIntroduction
![Page 2: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/2.jpg)
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.
![Page 3: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/5.jpg)
Best way to understand … Examples
An Extension that keeps showing new Facebook notifications without needing to open Facebook in a tab
![Page 6: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/6.jpg)
Best way to understand … Examples
An Extension that lets you save documents to Google Drive on the fly
![Page 7: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/8.jpg)
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 ..
![Page 9: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/9.jpg)
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 …
![Page 10: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/10.jpg)
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 !!
![Page 11: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/12.jpg)
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 …
![Page 13: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to Web Browser Extension/Add-ons](https://reader033.vdocuments.mx/reader033/viewer/2022052602/55a19afc1a28abfd748b47e6/html5/thumbnails/14.jpg)
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