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