Google Chrome Extensions

Rishi Pithadiya MCA -54

Outline
Definition Examples Types of Extensions Structure of Extension Difference between Extension and Plugins How to Make ? Conclusion

Outline

Definition
Examples Types of Extensions Structure of Extension Difference between Extension and Plugins How to Make ? Conclusion

Definition
Applications / Small Programs Run Inside Chrome Browser Installed instantly Update automatically Use technology such as HTML, JavaScript and CSSs

Outline
Definition

Examples
Types of Extensions Structure of Extension Difference between Extension and Plugins How to Make ? Conclusion

Examples
Gmail Checker

Outline
Definition Examples

Types of Extensions
Structure of Extension Difference between Extension and Plugins How to Make ? Conclusion

Types of Extensions

Omnibox: Add functionality to your address bar with predefined keywords Page Actions: Show a little icon in the address bar Browser Actions: Add an icon next to your address bar (i.e. to show a popup) Desktop notifications: Show notifications on your desktop

Outline
Definition Examples Types of Extensions

Structure of Extension
Difference between Extension and Plugins How to Make ? Conclusion

Structure of Extension
Compressed directory containing: manifest file (manifest.json) And one or more of these components: Browser Action Content Script (Java Script) Background Page Other files

Structure of Extension
Browser Action Browser actions are those actions a user performs using a web browser including keystrokes, mouse actions, text entry, and system actions such as close or submit.

Structure of Extension
Manifest.json file Structure

Piece it together
Extension +----- install.rdf +----- chrome.manifest +----- [content] +----- *.xul +----- *.js +----- [locale] +----- [en-us] +----- *.dtd +----- *.properties +----- [skin] +----- *.css +----- *.png,*.jpg

Metadata

UI + Code

Localization

Icons + Styles

Outline
Definition Examples Types of Extensions Structure of Extension

Difference between Extension and Plugins

How to Make ? Conclusion

Difference between Extension and Plug-in

A plug-in is, quite simply, a third party library that plugs in to the browser that can be embedded inside a web page. i.e. Adobe Reader, Apple Quicktime, Macromedia Flash. They cant create Toolbars, cant affect Menus, dont know about Tabs and Browser Process

Outline
Definition Examples Types of Extensions Structure of Extension Difference between Extension and Plugins

How to Make ?
Conclusion

How to Make ?

How to Make ?

How to Make ?

How to Make ?

How to Make ?

How to Make ?

How to Make ?

How to Make ?

You will find various extensions on Google WebStore.

Outline
Definition Examples Types of Extensions Structure of Extension Difference between Extension and Plugins How to Make ?

Conclusion

Conclusion
Chrome extension is a good API provided by Chrome browser. Helps us writing more useful applications that can run directly inside the browser. The API does not require much knowledge beside Javascript. However, things might come too difficult to debug or development if you dont understand the whole architecture model behind it.

Questions ?