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.

Transcript

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. 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. 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. 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. A MOMENT TO EXPLORE HOW THIS WORKS There’s something important you need to know about extensions...
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.
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!
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.
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.
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
11. LET’S GO WIN We got #1 space on the site with 3000 words per minute. Go try it yourself!
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.
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.
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
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.
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...
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.
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.
19. THANKS @MIKEMACCANA Thanks! I hope this inspires you to make your own Chrome extensions. Follow me on twitter @mikemaccana.