Chrome Extensions at Manhattan JS

Chrome ExtensionsWhat are they good for, anyway?

Cory Forsyth

@bantic

201 Created

Consultants in New York City

Browsers, Then & Now

Browsers Then20+ Years Old

Text, Links, small GIFs

Credit: Indolering (Own work) [CC0], via Wikimedia Commons

<blink>

Browsers Now• 10M Lines of Code

• Ubiquitous

• Indispensable

• WebGL, Location

• Orientation, Battery

• High-performance

• Text-to-speech, Audio

• Sentient?

Browsers Now

• TV, Play, Communication, Relaxing

• Filters to the world

• For “working hard and hardly working”

Browsers Now

Extensions: Intro

Internet

Extensions

Browser

Chrome Extensions• Installable, App-like, JS+CSS+HTML

• Look-over-your-shoulder; and

• Liminal: between your browser and the world

• Powerful position!

• Democratic, open like the web

Chrome Extensions

Put icons herePut icons hereRead page contents

Watch/change history

Chrome Extensions

Filter network requests

Add DevTool Panes

Chrome Extensions

Take pictures of tab contentOpen, close, reorder tabs

Change textChange icon

Capabilities• alarms

• manage bookmarks, tabs (open/close/move)

• contentSettings — cookies, javascript

• notifications

• tabCapture — take pictures

• text-to-speech

• override built-in pages (new-tab, bookmarks, history)

• geolocation

• omnibox

• history

Extensions: Anatomy

manifest.json

• the “outline”

• name, description, icons

• permissions

• describes which files to include, and how

manifest.json{ "name": "My extension", "version": "1.0", "description": "Hard to describe.", "icons": { "128": "icon128.png" },

"manifest_version": 2,manifest.json

content scripts• Injected js in each tab

• “Bookmarklet on steroids”

• Can read/write DOM

• Can only access chrome message-passing APIs

• No access to other `chrome.*` APIs

• Operates in “isolated world”

"content_scripts": [ { "matches": ["<all_urls>"], "js": [ "jquery.js", "content_script.js" ] } ],

manifest.json

background page (script)• Accesses Chrome Extension APIs (`chrome.*`)

• Read/change browser state (tabs, windows, etc)

• Add listeners for Chrome API events (toolbar icon clicks, network requests, tab changes, history updated, etc.)

• No access to DOM

• Uses message-passing to coordinate w/ content script

• Only 1 instance per extension (not per tab)

background page (script)

"background": { "scripts": [ "background.js" ] },

manifest.json1 background script

Content Script injected

Content Script injected

2 Tabs

page / browser action• Icon in or near toolbar

• Optional “badge” text

• Animatable

• Pop-up (configured via manifest.json); or

• Add click listener (via background page (script))

page / browser action

Browser ActionPage Action

"browser_action": { "default_icon": "icon.png", "default_title": "My action" },

manifest.json

"page_action": { "default_icon": "icon.png", "default_title": "My action" },

manifest.json

Distribution

• “Developer mode”

• Chrome Web Store

• Inline Install

• Developer Dashboard

Distribution

Security

Security

Security

Security

Not kidding. At all.

Chrome Security

• Automatic Static Analysis

• limit Inline Install

• Expectation: Malicious Keyloggers

“Unwanted Software”• Like 90s Toolbars

• Change default search prefs or new tab page

• Search Engine + Affiliate Code

• Inject Ads

• Binaries that sideload extensions

• “.exe” from “free-tv.com” sites, e.g.

“Unwanted Software”

• New Chrome (v48) shows all extensions

• “Chrome Cleanup” Tool

• like a virus scanner…for a browser

Debugging Extensions

Chrome Extensions: Tips & Tricks

Chrome Extension Source Viewer (meta!)

• “Developer Mode” at chrome://extensions

• background page link — opens DevTools

• “inspect popup” — opens DevTools

Examples

BPM BrowserBrett Stiller

DecodeliaMelanie Hoff

Marc Abbey

WSJ Bypass• WSJ has paywall in front of articles

• but allows Google to crawl its content

• How?

• Referer + User-Agent detection

• Solution? Chrome Ext strips referer, changes User-Agent

• Blog Post by Isoroku Yamamoto

1 user. Wat

Chrome Extensions: Helpful References

• Manifest.json — The portal into every extension

• hacking-the-browser repo — Lots of simple examples

Chrome Extension Source Viewer

• BPM Browser by Brett Stiller

• Decodelia by Melanie Hoff

• Passtime by Marc Abbey

• Chrome Blog Inline Install Policy Post