In Greasemonkey tutorial, I have covered how to write Greasemonkey user scripts. After this tutorial,you will be able to write user-scripts for Greasemonkey.
Topics covered:
GreaseMonkey Installation
Hello World Example
Adding a Button
Reading/Modifying HTML content
Loading External Scripts.
What is GreaseMonkey?
“Greasemonkey is a Mozilla Firefox extension that allows users to install scripts that make on-the-fly changes to web page content after or before the page is loaded in the browser”
Below picture explains how grease monkey works.
1. GreaseMonkey Installation
Download latest addon from : https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
Once the Greasemonkey is installed in Firefox, You can see Greasemonkey icon in the toolbar as shown in the below image.
2.Hello World Example
To write a new User script, Click on “New User Script” and fill all the details as shown in the below image.
After submitting the details, User-script is opened in an editor with initial configuration. Initial Configuration looks like.
@name : name of the user script
@namespace : namespace to differentiate the scripts.You can use domain name as namespace
@version: version of the User script
@include: enable this script only for this URLs. add @include multiple times, for multiple domains.
Valid include values are.
You can use all the Javascript API in Greasemonkey scripts. Below user-script shows an alert message when the webpage is loaded.
Note: Make sure that “Enabled” and “Hello World” menu items are checked and You need to refresh the webpage or open a new page to see the effects.
2. Adding a Button to Webpage
We can create a button dynamically with JavaScript API and append it to current webpage body.
The above script, adds a Button at the end of every webpage as shown in the below image.
By adding style to the button, we can show the button at the top as shown in the below image.
3. Reading/Modifying HTML Content
HTML content can be read/write with HTML DOM object.In this section, I gave two examples.
3.1).Reading Youtube Video Information
Below code explains how to read YouTube Video information.
After adding the code to your script, open any YouTube video: Youtube. You can see the video information as shown in the below image.
3.2).Google Auto Search
The below script, fills Google.com search field with “hayageek.com” and submits.
After adding the code to your script, Open Google
4.Loading External Scripts
External Scripts are loaded in Greasemonkey using @require tag. Below code loads jQuery and shows an alert when the document is ready.
To load multiple scripts,You can use @require multiple times.
If the script is already loaded in the webpage, then it can be accessed using unsafeWindow object.
The post Greasemonkey Tutorial for Beginners appeared first on hayaGeek.