Fix Your Life Using Chrome Extensions

Fix Your Life Using Chrome Extensions

A tutorial and live demo showing how to solve 4 real-world problems using Chrome Extensions.

This talk covers everything required for people who've used JS but never created an extension before, including a couple of tips you won’t find in the official docs.

23fc4556be14017796d38579dd4778ab?s=128

Mike MacCana

April 19, 2012
Tweet

Transcript

  1. 1.

    FIX YOUR LIFE USING CHROME EXTENSIONS Hey there! Since you

    didn’t attend the NotConf talk, I’m adding these notes here for the stuff you missed. This talk is about solving 4 real- world problems using Chrome Extensions. If you already know JS, making Chrome extensions is easy. - Mike
  2. 2.

    WEBPAGES BOTHER YOU Google search results now have animated G+

    notifications. Let’s make a quick chrome extension to remove them - it will take 30 seconds. Follow along!
  3. 3.

    LET’S FIX IT 2. 1. 3. Make a new folder,

    and: Add manifest.json - get it from pastebin.com/JsrYk7pY Add jquery.js Make a content.js to edit the page The part that does the work - content.js - is a single line! See git repo @ https:/ /github.com/mikemaccana/ japanese_mayonnaise
  4. 4.

    CONGRATULATIONS You’ve just developed your first extension Go load the

    extension at chrome:/ /extensions - click on ‘developer mode’ and load the extension from your folder. Then visit google.com - you’ll see the annoying animations are gone!
  5. 6.

    OUR JS CAN’T SEE THEIR JS Origin site’s JS DOM

    Our extension JS HTTP Requests HTTP Requests Sites in extension permissions Origin sites Our JS has it’s own window object. It can’t see the page’s JS functions, or trigger events handled by the page’s JS.
  6. 7.

    NOTE RE: JS CONSOLE •What you type into the console

    runs in in the context of the origin page - not your extension •You can still print to the console from your extension console.log($) in our content.js shows JQuery. console.log($) on google.com (typed into the console) shows something else. Keep this in mind when debugging!
  7. 8.

    YOU’RE A BAD TYPIST Colleagues discussing their brilliant typing scores

    on 10fastfingers speedtest. 10fastfingers.com is an online typing test my colleagues were demoing their sweet typing skills on. Unfortunately I;m a bad typist.
  8. 9.

    READ THE SITE’S JS Go inspect speedtest. 10fastfingers.com. Turns out

    the site has all the words in an iframe, and looks for a ‘space up’ key event to load the next page.
  9. 10.

    THE LOCATION HACK Origin site’s JS DOM Our extension JS

    HTTP Requests HTTP Requests Sites in extension permissions Origin sites window.location = ‘javascript:origin_function();’ Generating a ‘space up’ event from our content script won’t trigger the origin site’s event handler. Damn! But wait: let’s use window.location to load some JS that runs on the origin site! (you could also insert a script tag) See the git repo at: https:/ / github.com/mikemaccana/devils_pie
  10. 11.

    LET’S GO WIN We got #1 space on the site

    with 3000 words per minute. Go try it yourself!
  11. 12.

    YOU’D LIKE TO STOP THE MUSIC 4 windows, and 28

    tabs, and somewhere Soundcloud is playing music We don’t want to hunt for the tab where SoundCloud is running. We’re going to make an extension that lets us stop SoundCloud from the keyboard from any browser tab/window.
  12. 13.

    BACKGROUND PAGES APPS •Persistent background apps •Usually more JS than

    HTML Unlike content scripts - which run when a tab matching them is started - background pages run in the background, constantly. I call ‘background pages’ ‘background apps’ as they’re usually just a blank HTML page with some <script> tags - the script tags do most of the work.
  13. 14.

    BACKGROUND APPS Recieve keypresses, requests play/pause toggle Finds a Soundcloud

    tab Soundcloud Only Content Script Persistent Background App All Tabs Content Script Starts / stops music 1. 3. 2. Two content scripts, with a background app to keep track of what the currently playing song is. Check out the git repo at: https:/ /github.com/ mikemaccana/staring_and_slurping
  14. 15.

    LISTEN TO GR†LLGR†LL I made the entire room listen to

    some sweet witchhouse music on SoundCloud, and showed that we could start/stop the music from any window using the F5 key on our Macs.
  15. 16.

    YOU’D LIKE JSCONF TICKETS Because it’s not called ‘mashing your

    keyboard’ conf. A lot of folk on Twitter were discussing their ‘Cmd R’ and ‘F5’ skill when JSConf tickets went on sale. If only there was a scripting language that ran in the browser...
  16. 17.

    WHAT THIS COULD LOOK LIKE •Find our event in the

    table •Does it have a <select>? Then fill it out. •Otherwise reload ...theoretically. No github repo link here folks.
  17. 18.

    THE CONSOLE OUTPUT MIGHT LOOK LIKE THIS chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:1____________Starting  Again______________ chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:5Checking

     for  "Buckaroo"  tickets chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:6Wed  Jan  25  2012  20:00:00  GMT+0000  (GMT) chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:13Tickets  not  on  sale  yet chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:14Wed  Jan  25  2012  20:00:00  GMT+0000  (GMT) chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:28ticket_check:  5ms chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:1____________Starting  Again______________ chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:5Checking  for  "Buckaroo"  tickets chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:6Wed  Jan  25  2012  20:00:05  GMT+0000  (GMT) chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:17Scored  a  ticket.  Clicking  button chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:20Wed  Jan  25  2012  20:00:05  GMT+0000  (GMT) chrome-­‐extension://lflahflobhfadhdflgfendhjfchijabd/js/content.js:28ticket_check:  33ms Also theoretically.
  18. 19.

    THANKS @MIKEMACCANA Thanks! I hope this inspires you to make

    your own Chrome extensions. Follow me on twitter @mikemaccana.