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


  • 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


  • 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


Github repository: chrome-extension-skeleton

Complete tutorial: chrome-extension-complete

Slides: tutorials/chrome-extension