Hi

• I'm @mikemaccana

Browse like Xerces, the
GOD KING OF THE PERSIANS

This talk isn't:

• How to make a Chrome Extension

This talk is:

• Controlling the world

Creators not consumers

• Mould and shape the world in our image
• Even when we're not working

Chapter 1

Darius the Wizard Slayer

The Story of Darius

Knowing what's real

Shapeshifting wizard ✓

Dead King ✗

Demo time

An extension

• Make a folder
• Make a manifest.js

  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": ["js/superagent.js", "js/eyes.js"],
      "run_at": "document_end"
    }
  ],

• Add some JS as a content script
• Load chrome:///extensions, click 'developer mode', pick folder

Eye Size Calc

var eyeSize =
  ( Math.sqrt(Math.pow(eyeDistanceX,2)
    + Math.pow(eyeDistanceY,2)) )
  / EYE_SIZE_TO_DISTANCE_RATIO;
  

Chapter 2

Xerces

• Born of Darius
• Cyrus's Daughter

• King of Persia
• King of Media
• Great King
• King of Kings
• King of Nations
• Fastest Typist

Jumping the wall

var injectJSFile = function(file) {
  var url = chrome.extension.getURL(file);
  var script = document.createElement('script');
  script.src = url;
  document.querySelector('head').appendChild(script);
}

injectJSFile('injectme.js')

In your manifest.json:

"web_accessible_resources": ["injectme.js"]

Demo time

Chapter 3

Whipping the Sea

• Hellespont thwarted his ambitions

• A Soft Murmur

Soon Chrome will have keyboard shortcuts for extensions

So you can listen directly from the background app

Demo time

Chapter 4

Conquering

If only there was a programming language in the browser

Thankyou

Make an API for anything with MutationSummary

var observer = new MutationSummary({
  callback: function(summaries){
    // Only 1 query, so only one summary.
    log('summary', summaries[0])
    summaries[0].added.forEach(function(addedElement){
      …
    })
  },
  queries: [{ element: 'someelementype.someclass' }]
});

Demo time

Browsing tips from 2500 year old Zoroastrians:

• Change what you don't like
• Automate the stuff that bores you
• Control your data online
• Extend and control the web apps you use

Thanks.

@mikemaccana