top of page

Subscribe to get best practices, tutorials, and many other cool things directly to your email inbox

  • Writer's pictureAhmed Tarek

Customize Webpage UI/Behavior with JavaScript UserScripts

Updated: Apr 17

Even if you don’t own the Webpage, you can still attach your JavaScript UserScripts.


How to Customize Webpages UI/Behavior Using JavaScript UserScripts. Even if you don't own the Webpage, you can still attach your JavaScript UserScripts Scripting. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Jim Manning from FreeImages

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.


 

How to Customize Webpages UI/Behavior Using JavaScript UserScripts. Even if you don't own the Webpage, you can still attach your JavaScript UserScripts Scripting. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Olga Thelavart on Unsplash, modified by Ahmed Tarek

2021–11–04

I have created an interesting story about Learn How to Develop a UserScript to Monitor Freelancer’s New Projects and Post Them to Your Slack Channel. I encourage you to go there and have a look.

 


 

How to Customize Webpages UI/Behavior Using JavaScript UserScripts. Even if you don't own the Webpage, you can still attach your JavaScript UserScripts Scripting. Best Practice Code Coding Programming Software Development Architecture Engineering
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:


 

How to Customize Webpages UI/Behavior Using JavaScript UserScripts. Even if you don't own the Webpage, you can still attach your JavaScript UserScripts Scripting. Best Practice Code Coding Programming Software Development Architecture Engineering

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:


Therefore, depending on the type of your Web browser you can choose the plugin which suits you needs.


 

How to Customize Webpages UI/Behavior Using JavaScript UserScripts. Even if you don't own the Webpage, you can still attach your JavaScript UserScripts Scripting. Best Practice Code Coding Programming Software Development Architecture Engineering
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.


 


 

How to Customize Webpages UI/Behavior Using JavaScript UserScripts. Even if you don't own the Webpage, you can still attach your JavaScript UserScripts Scripting. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Brett Jordan on Unsplash

I already developed some UserScripts a while ago. You can check them here and here.


Also, I have created an interesting story about Learn How to Develop a UserScript to Monitor Freelancer’s New Projects and Post Them to Your Slack Channel. I encourage you to go there and have a look.


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 article as interesting as I found writing it.



Recent Posts

See All

Комментарии

Оценка: 0 из 5 звезд.
Еще нет оценок

Добавить рейтинг

Subscribe to get best practices, tutorials, and many other cool things directly to your email inbox

bottom of page