Customize Webpage UI/Behavior with JavaScript UserScripts
Even if you don’t own the Webpage, you can still attach your JavaScript UserScripts.
At some point everyone of us has faced the situation when he found that some website (like Facebook, LinkedIn, Google etc) is missing something which could have been done by just a bit of JavaScript. But, unfortunately we can do nothing about it as we don’t own the website, we can’t change its code. But, is this the end of the story?
Thanks for UserScripts and browser plugins/extensions which can run them, we have a solution.
Photo by Pankaj Patel on Unsplash
UserScript is a bit of JavaScript written in a text file which most probably would have the extension .user.js. On this JavaScript code you have access to all what a Webpage exposes to you as an end user, so nothing fishy. You can manipulate UI by adding, removing, moving, and styling HTML elements. Additionally, you can modify the behavior of some elements or even add new behavior. It is all up to your needs.
Worth to mention that all the JavaScript code in the UserScript would be executed on the Webpage on your side only, so don’t expect that your code would somehow find its way to the web server where the Webpage originally resides and inject itself there.
There are some famous online UserScript repositories where you can share your own UserScripts and find others created by other developers as well.
Some of these online repositories are:
Browser plugins/extensions allow you to set some configurations to control which UserScript runs on which Webpage once it is loaded in your browser. A part of these configurations is set in the UserScript itself as I would show you later.
Here is a list of the most famous plugins/extensions:
FireMonkey
Therefore, depending on the type of your Web browser you can choose the plugin which suits you needs.
Photo by Emily Morter on Unsplash
What does a UserScript look like?
A UserScript most probably consists of the following.
UserScript Header
On the header you set some fields which configure the browser plugin/extension.
name: is the name of the UserScript. This is used inside the dashboard of the browser plugin/extension so that you can identify this specific UserScript.
namespace: is used to avoid naming collisions between scripts hosted on public online repositories. If you call your script foobar and someone else did as well, then it would be so hard telling them apart. On the example above I am setting it to my LinkedIn profile as this is unique to me.
description: is the description to appear inside the dashboard of the browser plugin/extension.
match/include: is the pattern used to match the Webpage URL on which the UserScript should run. This could accept regular expressions or wildcards. For more info about what is acceptable or not, you need to check the browser plugin/extension you are using.
require: is where you set any external JS files required for your code to run successfully. In the code above, I included jquery-3.3.1.min.js as I am using jQuery on my code.
author: is the author of the UserScript. In the code above it is me.
UserScript Body
This is where you place your JavaScript code. It is simply just below the header, nothing less, nothing more.
Photo by Brett Jordan on Unsplash
I already developed some UserScripts a while ago. You can check them here and here.
Finally, I encourage you to browse the internet for UserScripts and see samples of what you can do when you unleash the power of UserScripts. Then, you can try to develop your own UserScripts and share them with others.
Hope you found reading this story as interesting as I found writing it.
This article is originally published on Development Simply Put.