ChromeExtensionsRon Reiter, 2012
Agenda●   What is a Chrome Extension?●   How to Build a Chrome Extension●   Packaging & Deployment●   Features
What is a Chrome Extension?● A powerful JavaScript application which  integrates with the Chrome browser● Almost all APIs ...
How to build a Chrome Extension1. Create a directory with a new file called   manifest.json, along with any needed files2....
Packaging● Chrome extensions provide a packaged  format called CRX.● However, were not creating CRX packages  because we u...
Deployment● Go to the Chrome Web Store, and open up  the developer dashboard
Deployment (cont.)● Upload your zip file● Select whether you want to use a closed  group or to publish it to the store
Browser Action● A browser action can have an icon, a  tooltip, a badge, and a popup● When users click it, it can either in...
Page Action● A page action allows specific actions  according to the page type● For example, registering to the RSS feed o...
Context Menus● Chrome extensions can configure context  menus for actions
Content Scripts● Allows JavaScript and CSS injection to any  page, according to the manifest● Can be automatic or programm...
Background Page● Each extension has a background page (an  HTML page) which is always open● Should listen to events and do...
Options Page● Every extension can have a configuration  page● Should use local storage for configuration● HTML file declar...
Tabs API● Allows managing the Chrome tabs● Read information on all open tabs● Execute a content script on a specific tab● ...
sendMessage● Chrome contains a postMessage-like RPC  mechanism which allows sending  messages between all components of a ...
Desktop Notifications● Useful for notifying users when the  Chrome extension wants attention, but is  not focused
Override Pages● Extensions can override 3 types of default  pages  ○ Bookmark manager  ○ History manager  ○ New tab
Omnibox● Allows you to register a new search type  using the address bar and suggest results● Specify a keyword, and every...
Themes● Chrome extensions can also configure  various images to create new themes for  the browser
More APIs● Bookmarks API - Allows managing  bookmarks● Cookies API - Allows managing cookies of  different websites● Histo...
More APIs● Windows API - API for handling all open  windows, creating / closing windows, etc.● Cross origin requests - Chr...
Questions?Thank You!
Upcoming SlideShare
Loading in...5
×

Building Chrome Extensions

1,094

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,094
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building Chrome Extensions

  1. 1. ChromeExtensionsRon Reiter, 2012
  2. 2. Agenda● What is a Chrome Extension?● How to Build a Chrome Extension● Packaging & Deployment● Features
  3. 3. What is a Chrome Extension?● A powerful JavaScript application which integrates with the Chrome browser● Almost all APIs require explicit permission to be used during the installation process● Easily distributed and maintained through the Chrome Web Store
  4. 4. How to build a Chrome Extension1. Create a directory with a new file called manifest.json, along with any needed files2. Write the manifest file (using the Google Developers documentation)3. Go to Chrome Extensions4. Check "Developer Mode" on the top right5. Click "Load Unpacked Extension..."6. Locate your directory
  5. 5. Packaging● Chrome extensions provide a packaged format called CRX.● However, were not creating CRX packages because we usually distribute our extension through the Chrome Web Store● Therefore, all we need to do is zip our extension and upload it to the Chrome Web Store.
  6. 6. Deployment● Go to the Chrome Web Store, and open up the developer dashboard
  7. 7. Deployment (cont.)● Upload your zip file● Select whether you want to use a closed group or to publish it to the store
  8. 8. Browser Action● A browser action can have an icon, a tooltip, a badge, and a popup● When users click it, it can either invoke a callback function or open a popup
  9. 9. Page Action● A page action allows specific actions according to the page type● For example, registering to the RSS feed of a website
  10. 10. Context Menus● Chrome extensions can configure context menus for actions
  11. 11. Content Scripts● Allows JavaScript and CSS injection to any page, according to the manifest● Can be automatic or programmatic (invoked)● Good for manipulating pages or processing the DOM of pages and sending back the information to the extension
  12. 12. Background Page● Each extension has a background page (an HTML page) which is always open● Should listen to events and do the initial configuration (for example, setting up the context menu)● HTML file declared in the manifest as "background_page"
  13. 13. Options Page● Every extension can have a configuration page● Should use local storage for configuration● HTML file declared in the manifest as "options_page"
  14. 14. Tabs API● Allows managing the Chrome tabs● Read information on all open tabs● Execute a content script on a specific tab● Send messages to Google specific code running in tabs● Get notified about changes (active tab changed, tab opened, closed, loaded, etc.)
  15. 15. sendMessage● Chrome contains a postMessage-like RPC mechanism which allows sending messages between all components of a Chrome extension: ○ Background Page ○ Content Script ○ Popup Page ○ etc.
  16. 16. Desktop Notifications● Useful for notifying users when the Chrome extension wants attention, but is not focused
  17. 17. Override Pages● Extensions can override 3 types of default pages ○ Bookmark manager ○ History manager ○ New tab
  18. 18. Omnibox● Allows you to register a new search type using the address bar and suggest results● Specify a keyword, and every time a user enters it and presses "space", it will send the request to the extension
  19. 19. Themes● Chrome extensions can also configure various images to create new themes for the browser
  20. 20. More APIs● Bookmarks API - Allows managing bookmarks● Cookies API - Allows managing cookies of different websites● History API - Allows managing the browser history
  21. 21. More APIs● Windows API - API for handling all open windows, creating / closing windows, etc.● Cross origin requests - Chrome extensions are allowed to send cross origin requests as long as they have permission for it● NPAPI - Allows running native code on the browser (useful for games)
  22. 22. Questions?Thank You!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×