• BabelFrog, and Writing Chrome Extensions

  • About BabelFrog

    • Demo
    • Why I wrote it
    • What it does
    • How it works
  • About Chrome Extensions

    • Use cases / examples
    • What they can do
    • How they work
    • How to install / manage
      — “Load unpacked extension”
  • Writing your own chrome extension

    • Link To Element extension
    • manifest.json, permissions
    • background.js
    • chrome.* APIs
    • debugging
  • Best practices

    • security
    • performance
    • updates / Chrome Web Store
    • keyboard shortcuts
    • marketing / Chrome Web Store
  • Publishing

  • Thank you!!

    • Any questions?
    • Now go write a Chrome extension!!!
  • Why I Wrote It

    • planned my wedding using Google Translate built-in to Chrome, but found limitations
    • help me read French online
    • help my dad read English online
    • most other similar tools sucked
  • What It Does

    • install, then pick language TO and FROM
    • activate on given page
    • select to translate
    • optionally, reads orig. text aloud
    • nothing else
  • How It Works

    • hijacks ajax endpoint for translate.google.com
    • originally paid paid for beta versions (500 chars - 1 cent)
    • also made bing version, awkward signup
    • cross-domain ajax request
    • steals their text-to-speech API too
    • supports all their languages
  • BabelFrog as a business

    • no plans to monetize, this is an experiment
    • possible to get a few hundred thousand users, exciting as marketing experiment
    • maybe promote using a dash of controversy
  • BabelFrog - Future Features

    • auto-detect language
    • persistent activation
    • social features?
    • support for CJK langs
  • Use cases / Examples

    • AdBlock
    • OneTab
    • LastPass
    • Google Hangout
    • Reddit Enhancement Suite
    • Pinterest
  • What Extensions Can Do

    • settings page
    • control every request in chrome
    • make cross-domain ajax (with perms)
    • inject CSS/JS into any page
    • manipulate chrome tabs (open, close, rearrange)
  • How Extensions Work

    • UI
      • browser action, page action, search bar, keyboard shortcuts, desktop navigations, options page
      • inject UI into active page
    • pass messages
    • shadow DOM
    • permissions
    • auto-update
  • Before writing an extension

  • manifest.json

    • metadata (name, icons, version)
    • permissions
    • injected scripts
  • background.js

    • runs in the background (like a hidden iframe / tab)
    • can access chrome APIs (trusted)
    • can pass messages to specially-crafted “content scripts”
  • link-to-element.js

    • injected into the page
    • listens to messages
    • shadow DOM
  • Debugging

    • console
    • background console
    • refreshing code
    • not work on chrome:// or chrome web store
    • shadow DOM
{"cards":[{"_id":"4bd9d6a352b7b44db0000017","treeId":"4bd8a145a14535d57e00004a","seq":996226,"position":0.5,"parentId":null,"content":"# BabelFrog, and Writing Chrome Extensions\n\n- Alex Dergachev\n- [@dergachev](https://twitter.com/dergachev) on twitter\n- [@dergachev](https://github.com/dergachev) on github\n- Co-founder at [Evolving Web](http://evolvingweb.ca)"},{"_id":"4bd8a399a14535d57e00004c","treeId":"4bd8a145a14535d57e00004a","seq":996103,"position":1,"parentId":null,"content":"About BabelFrog \n- Demo\n- Why I wrote it\n- What it does\n- How it works"},{"_id":"4bd9a86c16bbd9077a000013","treeId":"4bd8a145a14535d57e00004a","seq":996174,"position":2,"parentId":"4bd8a399a14535d57e00004c","content":"BabelFrog Demo\n- http://babelfrog.com\n- https://github.com/dergachev/babelfrog\n- [/r/quebec](http://reddit.com/r/quebec)\n- [Le Navet](http://lenavet.ca/4365/le-peage-du-pont-maurice-richard-sera-gratuit-lorsque-le-canadien-marquera-cinq-buts-ou-plus/)"},{"_id":"4bd9a9ce16bbd9077a000014","treeId":"4bd8a145a14535d57e00004a","seq":996106,"position":3,"parentId":"4bd8a399a14535d57e00004c","content":"Why I Wrote It\n- planned my wedding using Google Translate built-in to Chrome, but found limitations\n- help me read French online\n- help my dad read English online\n- most other similar tools sucked"},{"_id":"4bd9db6d52b7b44db0000018","treeId":"4bd8a145a14535d57e00004a","seq":996186,"position":3.5,"parentId":"4bd8a399a14535d57e00004c","content":"What It Does\n\n- install, then pick language TO and FROM\n- activate on given page\n- select to translate\n- optionally, reads orig. text aloud\n- nothing else"},{"_id":"4bd9ace316bbd9077a000015","treeId":"4bd8a145a14535d57e00004a","seq":996134,"position":4,"parentId":"4bd8a399a14535d57e00004c","content":"How It Works\n- hijacks ajax endpoint for translate.google.com\n- originally paid paid for beta versions (500 chars - 1 cent)\n- also made bing version, awkward signup\n- cross-domain ajax request\n- steals their text-to-speech API too\n- supports all their languages"},{"_id":"4bd9b90416bbd9077a00001a","treeId":"4bd8a145a14535d57e00004a","seq":996158,"position":4.5,"parentId":"4bd8a399a14535d57e00004c","content":"BabelFrog as a business\n\n- no plans to monetize, this is an experiment\n- possible to get a few hundred thousand users, exciting as marketing experiment\n- maybe promote using a [dash of controversy](https://dl.dropbox.com/u/29440342/screenshots/MRYLDIWN-2014.11.11-17-54-32.png)"},{"_id":"4bd9b55516bbd9077a000016","treeId":"4bd8a145a14535d57e00004a","seq":996130,"position":5,"parentId":"4bd8a399a14535d57e00004c","content":"BabelFrog - Future Features\n- auto-detect language\n- persistent activation\n- social features?\n- support for CJK langs"},{"_id":"4bd8aef2a14535d57e00004d","treeId":"4bd8a145a14535d57e00004a","seq":995131,"position":2,"parentId":null,"content":"\nAbout Chrome Extensions\n- Use cases / examples\n- What they can do\n- How they work\n- How to install / manage\n-- \"Load unpacked extension\""},{"_id":"4bd98dcf16bbd9077a000010","treeId":"4bd8a145a14535d57e00004a","seq":995863,"position":1,"parentId":"4bd8aef2a14535d57e00004d","content":"Use cases / Examples\n- AdBlock\n- OneTab\n- LastPass\n- Google Hangout\n- Reddit Enhancement Suite\n- Pinterest"},{"_id":"4bd990c816bbd9077a000011","treeId":"4bd8a145a14535d57e00004a","seq":996065,"position":2,"parentId":"4bd8aef2a14535d57e00004d","content":"What Extensions Can Do\n- settings page\n- control every request in chrome\n- make cross-domain ajax (with perms)\n- inject CSS/JS into any page\n- manipulate chrome tabs (open, close, rearrange)"},{"_id":"4bd9991616bbd9077a000012","treeId":"4bd8a145a14535d57e00004a","seq":1001518,"position":3,"parentId":"4bd8aef2a14535d57e00004d","content":"How Extensions Work\n- UI\n - browser action, page action, search bar, keyboard shortcuts, desktop navigations, options page\n - inject UI into active page\n- pass messages\n- shadow DOM\n- permissions\n- auto-update"},{"_id":"4bd8b69ae9423cc15f00000a","treeId":"4bd8a145a14535d57e00004a","seq":996232,"position":4,"parentId":"4bd8aef2a14535d57e00004d","content":"Before writing an extension\n\n- bookmarklet\n- tampermonkey\n- http://extensionizr.com/\n- https://developer.chrome.com/extensions/getstarted"},{"_id":"4bd8b07ba14535d57e00004f","treeId":"4bd8a145a14535d57e00004a","seq":996238,"position":3,"parentId":null,"content":"Writing your own chrome extension\n- [Link To Element](https://github.com/dergachev/link-to-element) extension\n- manifest.json, permissions\n- background.js\n- chrome.* APIs\n- debugging"},{"_id":"4bd8fee016bbd9077a00000b","treeId":"4bd8a145a14535d57e00004a","seq":995774,"position":1,"parentId":"4bd8b07ba14535d57e00004f","content":"**manifest.json**\n- metadata (name, icons, version)\n- permissions\n- injected scripts"},{"_id":"4bd9de4652b7b44db0000019","treeId":"4bd8a145a14535d57e00004a","seq":996194,"position":2,"parentId":"4bd8b07ba14535d57e00004f","content":"**background.js**\n- runs in the background (like a hidden iframe / tab)\n- can access chrome APIs (trusted)\n- can pass messages to specially-crafted \"content scripts\""},{"_id":"4bd9e20452b7b44db000001a","treeId":"4bd8a145a14535d57e00004a","seq":996201,"position":3,"parentId":"4bd8b07ba14535d57e00004f","content":"**link-to-element.js**\n- injected into the page\n- listens to messages\n- shadow DOM"},{"_id":"4bd926ed16bbd9077a00000d","treeId":"4bd8a145a14535d57e00004a","seq":996234,"position":4,"parentId":"4bd8b07ba14535d57e00004f","content":"Debugging\n- console\n- background console\n- refreshing code\n- not work on chrome:// or chrome web store\n- shadow DOM\n"},{"_id":"4bd8b5a8e9423cc15f000009","treeId":"4bd8a145a14535d57e00004a","seq":996177,"position":5,"parentId":null,"content":"Best practices\n- security\n- performance\n- updates / Chrome Web Store\n- keyboard shortcuts\n- marketing / Chrome Web Store"},{"_id":"4bd90f8c16bbd9077a00000c","treeId":"4bd8a145a14535d57e00004a","seq":996180,"position":6,"parentId":null,"content":"Publishing\n- Chrome Web Store\n - extensions vs apps\n- [BabelFrog DEVNOTES](https://github.com/dergachev/babelfrog/blob/master/DEVNOTES.md)"},{"_id":"4bd9e4c752b7b44db000001b","treeId":"4bd8a145a14535d57e00004a","seq":996223,"position":7,"parentId":null,"content":"## Thank you!!\n\n- Any questions?\n- **Now go write a Chrome extension!!!**"}],"tree":{"_id":"4bd8a145a14535d57e00004a","name":"BabelFrog","publicUrl":"babel-frog-presentation"}}