# BabelFrog, and Writing Chrome Extensions

- Alex Dergachev
- [@dergachev](https://twitter.com/dergachev) on twitter
- [@dergachev](https://github.com/dergachev) on github
- Co-founder at [Evolving Web](http://evolvingweb.ca)

About BabelFrog 
- Demo
- Why I wrote it
- What it does
- How it works

BabelFrog Demo
- http://babelfrog.com
- https://github.com/dergachev/babelfrog
- [/r/quebec](http://reddit.com/r/quebec)
- [Le Navet](http://lenavet.ca/4365/le-peage-du-pont-maurice-richard-sera-gratuit-lorsque-le-canadien-marquera-cinq-buts-ou-plus/)

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](https://dl.dropbox.com/u/29440342/screenshots/MRYLDIWN-2014.11.11-17-54-32.png)

BabelFrog - Future Features
- auto-detect language
- persistent activation
- social features?
- support for CJK langs


About Chrome Extensions
- Use cases / examples
- What they can do
- How they work
- How to install / manage
-- "Load unpacked extension"

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

- bookmarklet
- tampermonkey
- http://extensionizr.com/
- https://developer.chrome.com/extensions/getstarted

Writing your own chrome extension
- [Link To Element](https://github.com/dergachev/link-to-element) extension
- manifest.json, permissions
- background.js
- chrome.* APIs
- debugging

**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


Best practices
- security
- performance
- updates / Chrome Web Store
- keyboard shortcuts
- marketing / Chrome Web Store

Publishing
- Chrome Web Store
  - extensions vs apps
- [BabelFrog DEVNOTES](https://github.com/dergachev/babelfrog/blob/master/DEVNOTES.md)

## Thank you!!

- Any questions?
- **Now go write a Chrome extension!!!**