1. Chrome
Extensions
Ron Reiter, 2012

2. Agenda
● What is a Chrome Extension?
● How to Build a Chrome Extension
● Packaging & Deployment
● Features

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. How to build a Chrome Extension
1. Create a directory with a new file called
manifest.json, along with any needed files
2. Write the manifest file (using the Google
Developers documentation)
3. Go to Chrome Extensions
4. Check "Developer Mode" on the top right
5. Click "Load Unpacked Extension..."
6. Locate your directory

5. Packaging
● Chrome extensions provide a packaged
format called CRX.
● However, we're 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. Deployment
● Go to the Chrome Web Store, and open up
the developer dashboard

7. Deployment (cont.)
● Upload your zip file
● Select whether you want to use a closed
group or to publish it to the store

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. Page Action
● A page action allows specific actions
according to the page type
● For example, registering to the RSS feed of
a website

10. Context Menus
● Chrome extensions can configure context
menus for actions

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. 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. 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. 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. 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. Desktop Notifications
● Useful for notifying users when the
Chrome extension wants attention, but is
not focused

17. Override Pages
● Extensions can override 3 types of default
pages
○ Bookmark manager
○ History manager
○ New tab

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. Themes
● Chrome extensions can also configure
various images to create new themes for
the browser

20. More APIs
● Bookmarks API - Allows managing
bookmarks
● Cookies API - Allows managing cookies of
different websites
● History API - Allows managing the
browser history

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. Questions?
Thank You!