- 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
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
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
- Any questions?
- Now go write a Chrome extension!!!