Skip to content

Instantly share code, notes, and snippets.

@esteedqueen
Forked from caseywatts/0 - Chrome Workshop.md
Last active August 29, 2015 14:14
Show Gist options
  • Save esteedqueen/e5d294baa6f0c56b0614 to your computer and use it in GitHub Desktop.
Save esteedqueen/e5d294baa6f0c56b0614 to your computer and use it in GitHub Desktop.

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.
  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 Not really. 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).
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

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