Chrome Extension

Chrome Extension Overview

• A way to extend the Google Chrome browser to do different actions.
• 3 types of actions: browser actions, page actions, content scripts
• Uses HTML, CSS, Javascript
• Analogy: A fancy Javascript injection into a browser

Actions

• Browser Actions - affect every page you navigate to with a specific action - e.g. AdBlockPlus
• Page Actions - affect pages that match a certain URL pattern, usually prompting popups
• Content Script - affect certain designated pages that match a certain URL pattern and is able to alter the web page's HTML and CSS

Chrome Extension Project Demo

When a user looks at a listing on Airbnb, a popup will display with information about crime in the location of that listing, if available.

What is Airbnb?

• Allows people to put up properties for "any"-term rental
• Allows people to book unique places to stay when traveling
• A "unicorn" startup - pioneering the home-sharing economy
• Founded by Brian Chesky, Joe Gebbia

Components

• Content Script - scrapes the location from the HTML/CSS on the Airbnb listing page
• Page Action - displays the popup with the relevant crime information
• Background Script - an overseer in communication between the page action and the content script

More Detail

Links

Github repository: chrome-extension-skeleton

Complete tutorial: chrome-extension-complete

Slides: tutorials/chrome-extension