Skip to content

Instantly share code, notes, and snippets.

@caseywatts
Last active July 21, 2024 18:42
Show Gist options
  • Save caseywatts/8eec8ff974dee9f3b247 to your computer and use it in GitHub Desktop.
Save caseywatts/8eec8ff974dee9f3b247 to your computer and use it in GitHub Desktop.
Chrome Extension Workshop

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).
  1. REGEX Use javascript "regular expression" just to do a simple find-and-replace
  1. LOOPS Loop over an array in javascript

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?"
  1. Get the entire page ("body") as a string.
  2. 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".
  3. Replace the current HTML of the page with the find-and-replace'd version.
  4. 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!

More Extensions!

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

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

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

@caseywatts
Copy link
Author

caseywatts commented Nov 13, 2014

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

@jkeam
Copy link

jkeam commented Dec 17, 2015

Yay great lesson!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment