Upload
cory-forsyth
View
528
Download
0
Embed Size (px)
Citation preview
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