Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

BabelFrog, and Writing Chrome Extensions

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

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

Thank you!!

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