Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chrome Extensions at Manhattan JS

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

Chrome Extensions at Manhattan JS

  1. 1. Chrome Extensions What are they good for, anyway?
  2. 2. Cory Forsyth @bantic
  3. 3. 201 Created Consultants in NewYork City
  4. 4. Browsers, Then & Now
  5. 5. Browsers Then 20+ Years Old Text, Links, small GIFs Credit: Indolering (Own work) [CC0], via Wikimedia Commons <blink>
  6. 6. Browsers Now • 10M Lines of Code • Ubiquitous • Indispensable • WebGL, Location • Orientation, Battery • High-performance • Text-to-speech, Audio • Sentient?
  7. 7. Browsers Now • TV, Play, Communication, Relaxing • Filters to the world • For “working hard and hardly working”
  8. 8. Browsers Now
  9. 9. Extensions: Intro
  10. 10. Internet Extensions Browser
  11. 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. 12. Chrome Extensions Put icons here Put icons hereRead page contents Watch/change history
  13. 13. Chrome Extensions Filter network requests Add DevTool Panes
  14. 14. Chrome Extensions Take pictures of tab content Open, close, reorder tabs Change text Change icon
  15. 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. 16. Extensions: Anatomy
  17. 17. manifest.json • the “outline” • name, description, icons • permissions • describes which files to include, and how
  18. 18. manifest.json { "name": "My extension", "version": "1.0", "description": "Hard to describe.", "icons": { "128": "icon128.png" }, "manifest_version": 2, manifest.json
  19. 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. 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. 21. background page (script) "background": { "scripts": [ "background.js" ] }, manifest.json 1 background script Content Script injected Content Script injected 2 Tabs
  22. 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. 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. 24. Distribution
  25. 25. • “Developer mode” • Chrome Web Store • Inline Install • Developer Dashboard Distribution
  26. 26. Security
  27. 27. Security
  28. 28. Security
  29. 29. Security Not kidding. At all.
  30. 30. Chrome Security • Automatic Static Analysis • limit Inline Install • Expectation: Malicious Keyloggers
  31. 31. “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.
  32. 32. “Unwanted Software” • New Chrome (v48) shows all extensions • “Chrome Cleanup” Tool • like a virus scanner…for a browser
  33. 33. Debugging Extensions
  34. 34. Chrome Extensions: Tips & Tricks Chrome Extension Source Viewer (meta!) • “Developer Mode” at chrome://extensions • background page link — opens DevTools • “inspect popup” — opens DevTools
  35. 35. Examples
  36. 36. BPM Browser Brett Stiller
  37. 37. Decodelia Melanie Hoff
  38. 38. Marc Abbey
  39. 39. 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
  40. 40. 1 user. Wat
  41. 41. 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

    Be the first to comment

    Login to see the comments

  • ideak

    Apr. 27, 2016

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

Views

Total views

879

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

6

Shares

0

Comments

0

Likes

1

×