Oct 02, 2021 Technically, a userscript is just a text file that ends with.user.js. This fact allows userscript managers to detect and install userscripts when a file is opened in the browser. Installing a userscript manager. From my experience, Tampermonkey is best suited for Chromium-based browsers such as Google Chrome and Opera. 7) Once that is open, navigate over to Krunker.IO. 8) Now you are on Krunker within the browser click on the tampermonkey icon in the top right, and click create a new script. 9) Once you are there, remove the pre filled code and copy in the code from the script text file from the download file. 10) Once you are done, click file and then save. Tampermonkey is a Google Chrome browser extension that allows you to write and install user scripts that enhance the functionality of your browser or of webpages you regularly visit.
Have you ever wondered if you could load the next page when you reach the end of a web page ? Or maybe add quick links and information from external pages (ex: add the Rotten Tomatoes score and link to the IMDb page of a movie) ?
Userscripts can answer all this questions.
A userscript is a set of JavaScript code and metadata that is executed when a web page is loading:
- The code is a sequence of instructions that tells the browser how to modify the page.
- The metadata are information about the userscript, for example: the web pages where they should run, the resources and libraries they require, and more.
In order to add, update and manage userscripts, a userscript manager must be installed.
Technically, a userscript is just a text file that ends with .user.js. This fact allows userscript managers to detect and install userscripts when a file is opened in the browser.
Installing a userscript manager
From my experience, Tampermonkey is best suited for Chromium-based browsers such as Google Chrome and Opera.
Violentmonkey is currently the best supported userscript manager for Firefox.
Tampermonkey
With more than 10 million users, Tampermonkey is the leading userscript manager. It's also available in all the major navigators.
Here are the direct pages where you can install the Tampermonkey extension:
- Google Chrome: https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en
- Opera: https://addons.opera.com/en/extensions/details/tampermonkey-beta/
- Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd
- Safari: https://apps.apple.com/app/apple-store/id1482490089?mt=8
More detailed instructions to install Tampermonkey and a comprehensive features overview is presented in the following links: Google Chrome, Opera, Microsoft Edge, Safari.
Violentmonkey
Violentmonkey is the main alternative to Tampermonkey, and is completely open source. It's available in Firefox, Chrome, Opera and Maxthon.
The following page lists the download links for the different supported browsers: https://violentmonkey.github.io/get-it/
Greasemonkey
Greasemonkey is the original userscript manager. Following Firefox 57, and starting from the version Greasemonkey 4, the extension changed its API to be compatible with the Browser Extension API, and no longer support scripts written using the older GM_ synchronous API (more explanations can be found in this blog post).
I discourage using it at the moment because the majority of userscripts are written using the older API and the other userscript managers don't support the new asynchronous API.
You will have to install it only if a userscript you want to add is written specifically using the new GM. asynchronous API and doesn't have a polyfill to support the older API (very rarely).
Searching for userscripts
The majority of userscripts are hosted either on openuserjs.org or greasyfork.org.
OpenUserJS
The following example illustrates how to search for a userscript on OpenUserJS and install it on Google Chrome with Tampermonkey:
- Navigate to the home page
- Enter the keywords into the
Search Userscriptstext input: can be the target website name, the desired feature, etc. For example, let's search for a Google userscript - Open the script page you want to install, for example
Endless Google - If the script's description is corresponding to the features you are searching for, install the script by clicking the
Installbutton - Confirm the installation by clicking
Install - The userscript can now be tested by opening or reloading the target website
GreasyFork
Firefox with Violentmonkey is used in the next steps:
- Navigate to the Scripts page
- Enter the keywords into the
Search scriptstext input: can be the target website name, the desired feature, etc. For example, let's search for a Feedly userscript - Open the script page you want to install, for example
Feedly filtering and sorting - If the script's description is corresponding to the features you are searching for, install the script by clicking the
Install this scriptbutton - Confirm the installation
- The userscript can now be tested by opening or reloading the target website
Alternatives
Userscripts.org used to be the leading userscript repository. But the website was shut down in 2014, and a mirror web page was launched to host all it's original userscripts: userscripts-mirror.org
There are some userscripts that are hosted on personal or github pages, a general search engine such as Google can be used in this case to search for them.
Tampermonkey File Converter
Using userscripts
A userscript can be configured and interacted with in different ways after installing it:
- Some userscripts will indicate in their description or documentation page that they will add a button to a specific part of the page to open a settings menu or execute another action
- They can also register commands and/or shortcuts in the userscript manager to open the setting menu or to execute another action on the current page
- Others won't need any configuration and will work as is
The userscript manager can also be used to configure security, storage and other script specific settings such as the pages where the script should run as presented in the following section.
Tampermonkey File Extension
Includes and Excludes
The includes/matches are the web pages where the script will run (@include supports regular expressions and @match is safer). The excludes are the pages where the script shouldn't run.
Even though the userscript already defines includes and excludes in its metadata, they can be overwritten using the userscript manager.
Tampermonkey
- Open the Dashboard by clicking on the Tampermonkey button and selecting
Dashboard - Click on the userscript you want to configure
- Switch to the
Settingstab. You can now add additional includes, matches and excludes. You can also disable the original includes and excludes
Violentmonkey
- Open the Dashboard by clicking on the Violentmonkey button and selecting
Open Dashboard - Click on the edit button next to the userscript you want to configure
- Switch to the
Settingstab. You can now add additional includes, matches and excludes. You can also disable the original includes and excludes
Userscript examples
Here is a list of the userscripts demonstrated in this guide in addition to others that I personally find very useful:
- Endless Google: Load more results automatically and append them to the end of the current Google results page
- Show Rottentomatoes meter: Show the Rotten Tomatoes score on imdb.com and other websites
- Feedly filtering and sorting: Enhance the feedly website with advanced keyword filtering and restricting, sorting, duplicates checking, coloring rules and more
- W.A.R. Links Checker Premium: Automatically checks links from hundreds of file hosts such as Google Drive and Rapidgator, and display the file size in a pop up when hovering over the links (when possible)
Writing your own userscripts
Prerequisites
Basic HTML knowledge is required. Get started with HTML.
Basic CSS knowledge is also needed, especially selectors. Get introduced to CSS selectors.
If you are unfamiliar with JavaScript, I recommend reading the following first steps guides.
If you were already introduced to JavaScript and need a refresher, or you just need a summarized tutorial to quickly learn the language, here is a re-introduction to JavaScript
You can also follow the chapters of this intermediary JavaScript guide, and read this exhaustive JavaScript reference.
Your first userscript
As mentioned earlier, a userscript is a set of JavaScript code and metadata which are technically just JavaScript comments.
From the userscript manager dashboard, click on the + button to create a new userscript.
Change the name, description and the match pattern to target a specific web page. Replace // Your code here... with alert('Hello World !');
Now navigate to your target website or refresh it if it's already open. You should have an alert pop up that displays Hello World
That's it!
You can now start experimenting with the GM_* API to store data for example, or add third-party code libraries (such as JQuery) to help you write less or to reuse existing code.
Using the API and adding external libraries
If you want to use the GM_* API, you must declare a @grant header in the metadata followed by the API function name (such as GM_getValue, GM_setValue, etc.)
A userscript documentation describing the available headers (metadata) and the API (GM_*) can be found in the following page. An alternative metadata documentation can be found here.
Third-party libraries can be added by defining the @require header followed by the library URL. For example:
Userscript idioms and code snippets
- Query and remove a page element:
- Store an object:
- Retrieve an object:
- Replace the current URL and redirect the page:
- Add a button to execute some function on the page:
- Append a style to the page:
- Fetching and parsing an external page:
