A talk about Chrome Extensions — how they work, why they are cool, what capabilities they have — delivered at Manhattan.js.

1. Chrome Extensions
What are they good for, anyway?

2. Cory Forsyth
@bantic

3. 201 Created
Consultants in NewYork City

4. Browsers, Then & Now

5. Browsers Then
20+ Years Old
Text, Links, small GIFs
Credit: Indolering (Own work) [CC0], via Wikimedia Commons
<blink>

6. Browsers Now
• 10M Lines of Code
• Ubiquitous
• Indispensable
• WebGL, Location
• Orientation, Battery
• High-performance
• Text-to-speech, Audio
• Sentient?

7. Browsers Now
• TV, Play, Communication, Relaxing
• Filters to the world
• For “working hard and hardly working”

8. Browsers Now

9. Extensions: Intro

10. Internet
Extensions
Browser

11. 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

12. Chrome Extensions
Put icons here
Put icons hereRead page contents
Watch/change history

13. Chrome Extensions
Filter network requests
Add DevTool Panes

14. Chrome Extensions
Take pictures of tab content
Open, close, reorder tabs
Change text
Change icon

15. 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

16. Extensions: Anatomy

17. manifest.json
• the “outline”
• name, description, icons
• permissions
• describes which files to include, and how

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

19. 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

20. 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)

21. background page (script)
"background": {
"scripts": [
"background.js"
]
},
manifest.json
1 background script
Content Script injected
Content Script injected
2 Tabs

22. 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))

23. page / browser action
Browser Action
Page 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

24. Distribution

25. • “Developer mode”
• Chrome Web Store
• Inline Install
• Developer Dashboard
Distribution

26. Security

28. Security

29. Security

30. Security
Not kidding. At all.

32. Chrome Security
• Automatic Static Analysis
• limit Inline Install
• Expectation: Malicious Keyloggers

33. “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.

34. “Unwanted Software”
• New Chrome (v48) shows all extensions
• “Chrome Cleanup” Tool
• like a virus scanner…for a browser

35. Debugging Extensions

37. Chrome Extensions: Tips &
Tricks
Chrome Extension Source Viewer (meta!)
• “Developer Mode” at chrome://extensions
• background page link — opens DevTools
• “inspect popup” — opens DevTools

38. Examples

39. BPM Browser
Brett Stiller

41. Decodelia
Melanie Hoff

43. Marc Abbey

48. 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

51. 1 user. Wat

53. 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