BabelFrog, and Writing Chrome Extensions

• Alex Dergachev
• @dergachev on twitter
• @dergachev on github
• Co-founder at Evolving Web

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
• Le Navet

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

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

Thank you!!

• Any questions?
• Now go write a Chrome extension!!!