{"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"}}