WebFund 2013F: Tutorial 13: Difference between revisions
No edit summary |
|||
| (7 intermediate revisions by the same user not shown) | |||
| Line 11: | Line 11: | ||
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.) Note you can view and edit the source by selecting "Manage User Scripts" from the Greasemonkey button, selecting preferences for a script, and then clicking on the edit script button at the bottom of the pop-up dialog. | |||
===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/userscripts/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. | ||
| Line 20: | Line 26: | ||
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. | ||
=== | ===Make Site Visible=== | ||
Try the [http://userscripts.org/scripts/show/56331 Make Site Visible] script. (Local copy [http://homeostasis.scs.carleton.ca/~soma/webfund-2013f/userscripts/make-site-visible-56331.user.js here].) Note how you can press Ctrl-M on any page and change the colour of the text. User scripts can be used to make small tweaks to web interfaces like this. | |||
===Google Translator Tooltip=== | |||
You can also change the interface of a web page in more useful ways. Install the [http://userscripts.org/scripts/show/150664 Google Translator Tooltip] user script. (Local copy [http://homeostasis.scs.carleton.ca/~soma/webfund-2013f/userscripts/translate-tooltip-150664.user.js here].) Then visit [http://www.spiegel.de/ Spiegel Online]. Highlight some text, notice the little button that appears, and move your mouse over it. Select the right languages and now you can read German! | |||
===Explore=== | ===Explore=== | ||
* All kinds of user scripts are available at [http://userscripts.org]. | * All kinds of user scripts are available at [http://userscripts.org userscripts.org]. Look at all of the Facebook hacks! | ||
* A full book on writing user scripts, ''Greasemonkey Hacks'', is [http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks here] in wiki form. It is a bit dated and Firefox-specific in parts; however, most of the content is still relevant. | * A full book on writing user scripts, ''Greasemonkey Hacks'', is [http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks 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 [http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started#Avoid_Common_Pitfalls many security concerns with user scripts] (but they are mostly taken care of now). | * And in case you were wondering, yes there are [http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started#Avoid_Common_Pitfalls many security concerns with user scripts] (but they are mostly taken care of now). | ||
Latest revision as of 16:24, 6 December 2013
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.) Note you can view and edit the source by selecting "Manage User Scripts" from the Greasemonkey button, selecting preferences for a script, and then clicking on the edit script button at the bottom of the pop-up dialog.
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.
Make Site Visible
Try the Make Site Visible script. (Local copy here.) Note how you can press Ctrl-M on any page and change the colour of the text. User scripts can be used to make small tweaks to web interfaces like this.
Google Translator Tooltip
You can also change the interface of a web page in more useful ways. Install the Google Translator Tooltip user script. (Local copy here.) Then visit Spiegel Online. Highlight some text, notice the little button that appears, and move your mouse over it. Select the right languages and now you can read German!
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).