Chrome ExtensionsRon 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 require explicit permission to be used during the installation process

● Easily distributed and maintained through the Chrome Web Store

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 Extensions4. Check "Developer Mode" on the top right5. Click "Load Unpacked Extension..."6. Locate your directory

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.

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 invoke a

callback function or open a popup

● A page action allows specific actions according to the page type

● For example, registering to the RSS feed of a website

Page Action

● Chrome extensions can configure context menus for actions

Context Menus

● 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

Content Scripts

● 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"

Background Page

Options Page● Every extension can have a configuration

page● Should use local storage for configuration● HTML file declared in the manifest as

"options_page"

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

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

sendMessage

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 time a user

enters it and presses "space", it will send the request to the extension

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● History API - Allows managing the

browser history

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)

Questions?Thank You!