Lecture 23 - Chrome Extensions

Today's Agenda

Administrivia

HW4 due tonight
CP5 out - take advantage of this final creative project! This is your last chance to get feedback from TA's on your work this quarter :)

Today: What is a Chrome Extension, and how do you write one?

Note: We will not be testing on Chrome Extensions, but they are very useful to learn as web programmers!

What is a Chrome Extension?

A program to extend the Chrome browser, often to personalize the user's browsing experience

There are many different types of Chrome Extensions you can write (new tab overrides, bookmark customizations, CSS overriding on certain websites, content control, etc.)

Today we'll cover the most important components using a New Tab Override and Popup extension as examples!

You can Write Chrome Extensions to...

Automate Tasks
Improve site accessibility
Personalize user experience when browsing, on certain pages, etc.
Track your browsing patterns, visited sites, etc.
Analyze the DOM of pages you visit (e.g. can you find any neat HTML comment signatures?)
What else can you think of?

Examples

BSDetector
AdBlock
Grammarly
ColorTab Note that this is very easy to make with what you've learned in this class once you know how to write a New Tab Override!
Some Pony Extension...
Facebook Color & Theme Changer
Various Productivity Extensions (a ton of inspiration for your own)

Check out more on the Chrome Extension store!

More Examples

Pokémon Tabs
XKCD Tabs
NASA Tabs
News Feed (Hacker News) Popup
DOM Analytics (Popup displaying DOM stats on current tab)
Doggy Tabs
Internal Expedia Glossary extension shared company-wide (seriously, you can automate anything)
If you're a 14X TA, you may have heard of a Grade-It extension created by a TA

Building Blocks for a Chrome Extension

manifest.json (required)

Specifies configuration and files for your extension

HTML/CSS/JS files for the interface/behavior of the extension

HTML may be for a popup page, a new tab page, an extension options page (link CSS/JS as you normally would)
May need special background or content JS programs, depending on whether you are interacting with the DOM on the current tab

The `manifest.json` File (Required)

Gives the browser information about your extension (types of files used, permissions granted for different scripts or Chrome APIs)
At minimum, there are three required properties:
1. "manifest_version" - currently set to 2
2. "name" - name of your extension
3. "version" - version of your extension
Other properties determining the type of extension:
1. "description", "background_script", "content_scripts", "chrome_url_overrides", etc.
Complete description of Manifest File options

`mainifest.json` Example

{
  "manifest_version" : 2,
  "name" : "My Extension!",
  "version" : "0.1",
  "description" : "My extension description",
  "icons" : {
    "16" : "icon16.png",
    "48" : "icon48.png",
    "128" : "icon128.png"
  }
}

Example: Overriding the New Tab Page

This type of Chrome Extension is one of the easiest to get started with. It doesn't require content or background scripts, and you can use pretty much anything you've learned in this class to add as the New Tab page!

Great personalized holiday gifts :)

A Simple New Tab Override Workflow

Write your HTML, CSS, JS for the webpage you want to use as the New Tab
In starter manifest, add the following (using your HTML page name):

{
  ...
  "chrome_url_overrides" : {
    "newtab" : "your-html-page.html"
  },
  ...
}

Note: As you're trying different types of extensions, remember that this tab does not usually need other JS files other than the standard JS you add to the HTML

Example: Doggy Tabs!

Example `manifest.json`: Doggy Tabs!

{
  "name": "Doggy Tabs!",
  "version": "0.1",
  "manifest_version": 2,
  "description" : "Now you have an excuse to open more tabs!",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "chrome_url_overrides" : {
    "newtab": "doggy-tab.html"
  }
}

Doggy Tab Folder Contents (to upload to Chrome Extensions)

You can find the code here (please do not distribute as your own work and cite the original author if you extend it)

Adding Your Chrome Extension Locally (1/2)

Once you have your project folder with your manifest created, go to chrome://extensions in your Chrome browser (yes, you need Chrome).

Make sure you have Developer Mode on, and click Load Unpacked

More information here.

Adding your Chrome Extension Locally (2/2)

You will be prompted to select the folder containing your extension, and if you have everything set up correctly, you should see your new tab program!

Adding Your Chrome Extension Code to the Chrome Web Store (1/2)

Make sure you have Developer Mode on

Go to Developer Dashboard

Adding your Chrome Extension to the Chrome Web Store (2/2)

Click "Add New Item" to add your project folder (need to submit as .zip)

From here, there is a page with some options you'll need to provide. Then click the publish button and voila!

You can find a full guide on getting your Developer Account and first Chrome Extension published here.

Another Extension Type: Popup Extensions

These extensions can be another simple start to writing Chrome Extensions
At minimum, are a "mini" HTML popup page resulting from clicking the browser extension icon

A Simple Popup Extension Workflow

Write your HTML, CSS, JS for the webpage you want to use as the Popup
In starter manifest, add the following (using your HTML page name):

{
  ...
  "browser_action" : {
    "defualt_title" : "Popup Extension Title",
    "default_popup" : popup.html"
  },
  ...
}

This is sufficient to tell the browser to listen to the "browser action" event that fires when a user clicks the extension icon in the browser toolbar, which opens the specified HTML page

As with New Tab Overrides, you don't need background.js or content.js if you just want your popup page to appear when clicked and be self-contained (you'll need a content script to also interact with the current tab DOM)

Example: Hello World Popup

{
  "manifest_version" : 2,
  "name" : "Hello World Popup Example",
  "version" : "0.1",
  "browser_action": {
    "default_title": "Hello World!",
    "default_popup": "popup.html"
  }
}

manifest.json

Starter code (will show a basic popup if you add as local Extension)

Background and Content Scripts

One of the most important things to understand when writing Chrome Extensions is the difference between Background Scripts and Content Scripts

Both types of scripts are JS files (and you may have multiple of either, both, or none, depending on what you're writing)
Naming convention is background.js and content.js, but it's the manifest.json that really matters when adding these to an extension
Often used together to pass messages between browser (more permissions, access to bookmarks, history, other tabs, etc. but no DOM access) and current tabs (limited permissions, but access to current tab DOM)

Content Scripts

Used to directly interact with current tab DOM if the tab url matches a string in the "content_scripts" matches array (use <all_urls> if you want to match all pages)
Due to browser security rules, "sandboxed" - limited access to browser APIs, usually used alongside background.js to listen to messages/tasks for manipulating the DOM

Adding Content Scripts to manifest.json

Defined in manifest.json with:

{
  ...
  "content_scripts" : [{
      "matches" : [""],
      "js" : ["content.js"],
      "css" : ["custom-styles.css"]
    }],
  "permissions" : ["activeTab"],
  ...
}

Under Chrome's Developer guidelines, only give permissions where needed

More information here

Background Scripts

These programs are started when Chrome is launched and listen to events until Chrome is closed again
Can use to listen to events like clicks (e.g. browser action extensions), context menus, message passing between other extension files, etc.
Usually useful as "delegators" to respond to events on the browser and tell which extension scripts to do what (e.g. change CSS on the current tab DOM, show a badge notification, etc.)