WebFund 2013F: Tutorial 13: Difference between revisions
No edit summary |
|||
| Line 13: | Line 13: | ||
Note the rest of the instructions assume the use of Firefox and Greasemonkey; however, all of the code should work on either browser. | Note the rest of the instructions assume the use of Firefox and Greasemonkey; however, all of the code should work on either browser. | ||
===Hello World!=== | |||
Install the [http://userscripts.org/scripts/show/172301 WebMonkey Hello World] script. (Local copy [http://homeostasis.scs.carleton.ca/~soma/webfund-2013f/ here].)You should be able to just click the "install" button in the top-right corner of the page. Make sure you see the smiling monkey in the top-right corner of your browser. If it is greyed out then scripts are disabled!Read the code. Load some pages. See what happens! | |||
Then look at the source code. It should be pretty clear what it does. | |||
===Changing Google's Interface=== | ===Changing Google's Interface=== | ||
Install the [http://userscripts.org/scripts/show/179402 Google Black Bar Returns] user script. ( | Install the [http://userscripts.org/scripts/show/179402 Google Black Bar Returns] user script. (Local copy [http://homeostasis.scs.carleton.ca/~soma/webfund-2013f/googleblackbar-179402.user.js here].) You should be able to just click the "install" button in the top-right corner of the page. Make sure you see the smiling monkey in the top-right corner of your browser. If it is greyed out then scripts are disabled! | ||
After installing it, visit the [http://www.google.ca Google home page]. Notice anything different? Try and click on the gear icon in the top right. | After installing it, visit the [http://www.google.ca Google home page]. Notice anything different? Try and click on the gear icon in the top right. | ||
Next, look at the source of the script (how can you do that?) and see how much of it you can understand. | Next, look at the source of the script (how can you do that?) and see how much of it you can understand. | ||
===Explore=== | ===Explore=== | ||
Revision as of 15:55, 6 December 2013
This tutorial is not yet finalized.
In this tutorial you will be learning about adding JavaScript code to your browser to modify the behavior and content of selected web pages. Such JavaScript code is knows as greasemonkey scripts or user scripts.
This material is purely optional. If you have been having difficulty we suggest that you use this tutorial time to get help with the assignments and past tutorials. You will get full marks for this tutorial simply for attending and working on class-related material during that time.
Getting Started
First, you should install the appropriate browser extension:
- Greasemonkey for Firefox, or
- Tampermonkey for Chrome/Chromium (Chrome web store or project page)
While Chrome has native support for user scripts; however, the interface is a bit clunky without an extension.
Note the rest of the instructions assume the use of Firefox and Greasemonkey; however, all of the code should work on either browser.
Hello World!
Install the WebMonkey Hello World script. (Local copy here.)You should be able to just click the "install" button in the top-right corner of the page. Make sure you see the smiling monkey in the top-right corner of your browser. If it is greyed out then scripts are disabled!Read the code. Load some pages. See what happens!
Then look at the source code. It should be pretty clear what it does.
Changing Google's Interface
Install the Google Black Bar Returns user script. (Local copy here.) You should be able to just click the "install" button in the top-right corner of the page. Make sure you see the smiling monkey in the top-right corner of your browser. If it is greyed out then scripts are disabled!
After installing it, visit the Google home page. Notice anything different? Try and click on the gear icon in the top right.
Next, look at the source of the script (how can you do that?) and see how much of it you can understand.
Explore
- All kinds of user scripts are available at userscripts.org. Look at all of the Facebook hacks!
- A full book on writing user scripts, Greasemonkey Hacks, is here in wiki form. It is a bit dated and Firefox-specific in parts; however, most of the content is still relevant.
- And in case you were wondering, yes there are many security concerns with user scripts (but they are mostly taken care of now).