1 of 37

Hacking the Browser

Week 3

2 of 37

Overview

  • Bookkeeping
  • Bookmarklets review
  • Presentations
  • Chrome Extensions!

3 of 37

office hours

  • No class next Monday (next is Feb 25)
  • Office hours
    • Sunday Feb 17 11am-130pm
    • Sunday Feb 24 2pm-4pm
  • Other help:
    • SIRs/Residents
      • Yining Shi
      • Chino Kim
      • Wenqi Li (Eric)

​

4 of 37

class goals

  • Bookmarklets Review/Questions
  • Bookmarklets Reverse-Engineering
  • Intro to Chrome extensions
  • In-class: Make Chrome extensions

​

5 of 37

review

  • Bookmarklets
    • What are they?
    • Pros?
    • Cons? Limitations? What can’t they do?
  • window.onclick
  • add/remove event listener
  • DevTools

6 of 37

Bookmarklet Troubleshooting

  • Simplify!
  • Prototype in the console
  • What can go wrong?
  • Bookmarklet Snippets

7 of 37

Common Error: Mixed-Content

  • solution: “//myurl.com”, remove “http:”
  • Only works if the script can be served over https

8 of 37

Adding jQuery

  • Bookmarklet executes in page’s JavaScript context
    • Not all pages have jQuery
  • Solution? Add jQuery script using JavaScript!
  • Problem: Content-Security-Policy
    • Browser blocks external JavaScript
    • Sites that use it: Facebook, Github, Google, etc
    • Solution? In-line all JS (aka no jQuery)

9 of 37

Reverse-Engineering Bookmarklets

  • Right-click -> edit...copy/paste
  • urldecode
  • jsnice
    • look to see if an external script is being loaded

​

10 of 37

Content-Security Policy

  • What is it?
    • A way for a site to prevent loading unwanted resources
  • Why is that useful?
  • How does it work?
  • How to get around it?

11 of 37

Silly, quasi-Bookmarklets

  1. QUIT button
  2. Dinosaur game

12 of 37

presentations

  • Async vs Sync
  • Events
  • What is DOM?

​

Laptop lids down, please.

13 of 37

Chrome Extensions

  • What is a chrome extension?
  • How is it like a bookmarklet?
  • How is it different?

14 of 37

Chrome Extensions

  • Alter the browsing experience
  • Add UI (toolbar, location bar, default pages, popups)
  • Be always active (no clicks)
  • Read the browsing experience
    • See all tabs, everything on every page (no secrets!)
  • Modify network requests (ad blockers)

15 of 37

Extension Core Components

  • manifest.json
  • content scripts
  • background scripts
  • UI elements:
    • browser/page action (Button alongside address bar)

16 of 37

Interlude: Rapid-Fire JSON Syntax

17 of 37

Interlude: Rapid-Fire JSON Syntax

18 of 37

Interlude: Rapid-Fire JSON Syntax

19 of 37

Interlude: Rapid-Fire JSON Syntax

20 of 37

Interlude: Rapid-Fire JSON Syntax

21 of 37

Interlude: Rapid-Fire JSON Syntax

22 of 37

Interlude: Rapid-Fire JSON Syntax

23 of 37

Interlude: Rapid-Fire JSON Syntax

24 of 37

Components of an Extension

  • manifest.json
    • Describes extension
    • Points to files
    • Requests permissions
    • Must include “name”, “version”, “manifest_version”
    • Must be valid JSON
  • We will create “Hello World” together

25 of 37

Load your Hello World extension

26 of 37

Hello World, continued

  • Add browser action popup
  • Remove popup, keep title

27 of 37

Concepts: Content Scripts

  • content scripts
    • Injected into the page (like bookmarklets)
    • Specified in manifest.json
    • CSS or JS files
    • JS files can access the DOM, cannot access JS variables (unlike bookmarklets)
    • Can include jQuery (easily!)
    • requires “matches” array property
      • Use “<all_urls>” to match all

​

​

28 of 37

Hello World, continued

  • Add content script with logging
  • Add content CSS

​

29 of 37

Components: UI: Browser Action

  • icon
  • popup
  • title

^^ These properties are set by the manifest, can be modified by code

  • badge
  • badge background
  • disable/enable
    • default: enabled

^^ These properties are modified by your background script

​

30 of 37

Background Scripts

  • background script
    • Specified in manifest.json
    • Not run inside of a page (different than content script or bookmarklet)
    • One running script for all pages/tabs
    • can use most chrome.* apis
    • can send messages to content script(s)
    • cannot access active tab’s DOM or JS vars directly

​

31 of 37

Demo: Content Script programmatic injection

  • chrome.browserAction.onClicked (bg)
    • onClicked.addListener( function() {} )
    • Chrome API event listener
  • chrome.tabs.executeScript (bg)
  • Required permission: “activeTab”

​

Full code: content-script-via-browser-action

32 of 37

Troubleshooting Extensions

  • console.log or debugger
    • Content script -> page devtools console
    • Bg script -> special background page (via chrome://extensions)
  • Reloading code:
    • At chrome://extensions click circular “reload” icon
    • Also reload the page you are on
  • Permissions
    • Review docs — do you need a permission?
    • Remove and re-add extension w/ new permissions
  • Simplify: disable other extensions (use empty profile)
  • Extensions not active on newtab, blank, chrome:// URLs

33 of 37

Components of an Extension: Code

  • manifest.json
    • JSON format.
    • Capabilities, names of files, permissions
  • content scripts
    • similar to bookmarklets
    • Injected onto any/every page you want
    • Many instances; 1 per tab
  • background scripts
    • Used to communicate with Chrome (via APIs)
    • Only one instance; Shared between all tabs

34 of 37

In-Class Groups: Extensions

  1. Extension that makes body bg blue on every page
    1. Hint: Use a content script (JS) or stylesheet (CSS)
  2. Change #2 to only work on pages that have “blue” in the path
    • Hint: Use the “matches” property in the manifest

35 of 37

In-Class Groups: Extensions: Continued

  • Change #1 to only work when you click the browser action
    • Remove the “content_scripts” part from manifest, add “browser_action” (with name)
    • Add background script
    • Use the browserAction.onClicked + tabs.executeScript API + “activeTab” permission (manifest)
  • Browser action: Click it and it opens a new tab with the class syllabus
    • Hint: Look at the “tabs.create” API
  • Browser action that shows badge with count of links on the page
    • Hint 1: Start with a content scripts that console.logs the count of links
    • Hint 2: Look at the `browserAction.setBadgeText` API

36 of 37

Next class (2 weeks) presentations

  • Volunteers for presentations:
    1. Requests:
      1. DevTools and the Debugger
      2. Chrome Special Pages
      3. Chrome Extension Docs

37 of 37

Class Homework

Create

  • Turn your bookmarklet into extension

Find

  • Find an interesting Chrome Extension, reverse-engineer it using source viewer

Reading

  • Complete Extensions Debugging Tutorial
  • Review this Extension Tutorial

​

Full details on the syllabus: hackingthebrowser.com