Chrome Extension Workshop

0 - Chrome Workshop.md

Short Url: http://caseywatts.com/chromeextensionworkshop

Alternate Short Url: http://tinyurl.com/blatant-panda

Other gists & tricks: http://caseywatts.com/gists-and-tricks

Table of Contents

0. Inspiration - Some Chrome Extensions to Inspire You

• Cloud to Butt Plus
• XKCD Substitutions

1. Warmup - Things to know before the workshop
2. Part A - Chrome Developer Console
3. Part B - Bookmarklet
4. Part C - Chrome Extension
5. More Extensions - for further Inspiration
6. Misc FAQ

0 Inspiration - Cloud To Butt Plus.md

Cloud To Butt Plus (Chrome Extension)

Cloud To Butt Plus Chrome Extension

Links

• In The News - On Gizmodo
• Examples - Flickr Album
• Source Code - On GitHub (don't look at this until after the workshop! :D)

0 Inspiration - XKCD Substitutions.md

XKCD Substitutions

XKCD Substitutions Chrome Extension

• Inspired by http://xkcd.com/1288/

Examples

Source Code

• Source Code - Blog Post
• Source Code - On GitHub (don't look at this until after the workshop! :D)
  • In particular, this file

1 warmup.md

You should know some javascript before coming to this workshop. If you can google and copy-paste that will get you most of the way there, but you should at least understand the commands you’re typing. You definitely don’t have to be able to write this sort of thing from memory.

Before coming to this workshop make sure you know how to:

1. CSS Use javascript to change how the page looks, changing styles (CSS).

• To make sure you know this, try to use the Chrome Developer Console to turn Facebook's main navigation bar pink.
• https://developer.chrome.com/devtools/docs/elements-styles

2. REGEX Use javascript "regular expression" just to do a simple find-and-replace

• use this regex tool: http://regexpal.com/

3. LOOPS Loop over an array in javascript

• like in any of these examples: http://www.learn-js.org/en/Loops

2 console.md

This part of the workshop should be done in groups of 2-3 people. Use javascript to do a find-and-replace on the entire page, in the Chrome Developer Console.

Goals

1. Find-and-replace in your own string

• example string "What string should I write?"
• find "I"
• replace with "you"
• result is "What string should you write?"

2. Get the entire page ("body") as a string.
3. On a webpage about the Black Stars (like this one) find all instances of "Black Stars" and replace them with "THE BEST FOOTBALL TEAM IN THE WORLD".
4. Replace the current HTML of the page with the find-and-replace'd version.
5. Did your way replace the first instance of "Black Stars" or all of them? Make it do all of them! :)

Solution Guide

Try to complete this challenge above on your own before looking at this. If you get stuck, ask people around you for guidance first. Once you've completed it you should check over the guide to make sure you understand everything that's happened. There's also a challenge at the bottom of the guide!

• Find and Replace - Guide

3 bookmarklet.md

Take your find-and-replace code from earlier, and make it into a bookmarklet!

Follow this guide:

• Making Bookmarklets - Guide

4 Chrome Extension.md

Time to take the code from earlier and make it into a Chrome Extension!

• Chrome Extensioning - Guide

5 More Extensions.md

More Extensions!

Here are some example extensions you might care about (some of Casey's examples, and other ones)

• Casey's Cloud to Butt
• Alex Reinking's Amazon => Orbis Extension
  • Source Code Example (it's changed since this first iteration, but this gets the point!)
• Casey's Chrome Extensions Blog Post
• Service Now Linker - finds strings of a certain format, creates a link out of it to the IT Ticket's page (same idea as cloud-to-butt)
• ITIL Tooltips - This is like cloud-to-butt, but over a dictionary of IT jargon terms (in json). Provides tooltips with the definition when you hover over one of these jargon words.
• NetID Linker - find-and-replace netids with a link to their phonebook entry. Includes keyboard shorcuts - highlight a netid, press a keyboard shortcut, and then you're on their phonebook entry.
• Meta-bookmarklet-generator - a bookmarklet that makes bookmarklets. Generated bookmarklets manipulate the UI of Service Now, the IT Ticket Tracking system - calling one of the functions in the software, with our parameters.

Related - another way to extend a browser's functionality is to add a search engine! Here are a bunch for Yale:

• Casey's Browser Searches Blog Post
• Source Code on GitHub

6 Misc FAQs.md

Can I use jQuery?

Environment	How
Developer Console	Yes. If it's already on the page, or if you import it with something like jQuerify
Bookmarklet	Sort of. Bookmarklets have to be short. Importing a library or other js file is possible, but more difficult. See [Script Inclusion (Browser Power)](http://subsimple.com/bookmarklets/tips.php#Script Inclusion) and Bookmarklets with jQuery.
Chrome Extension	Absolutely! Just include jQuery in your package.

Can I use underscore.js for this?

Same rules as above

Can I use some_other_javascript_package for this?

Same rules as above

It's been taught now at least 4 times in 3 continents, with great feedback from students! :D

Yay great lesson!