Customize Websites With Dotjs

Dotjs is an addon available for both chrome and Firefox which allows you to run custom Javascript on websites. How you use this power is up to your imagination, but I can see it being most popular for customizing fonts to your preferences or removing elements from the sites.

Although the addon is available for chrome, I have only managed to get it working on Firefox.

Steps

First install the addon for firefox or for chrome.

Create a folder called .css in your $HOME directory.

mkdir $HOME/.css
For this example I am going to customize [www.theverge.com](http://www.theverge.com/) so that the tiles have "better" fonts. Thus, I create a file called `theverge.com.css` with the following contents:
h3 a {
    color: black;
    font-family: "Open Sans";
    font-size: 0.9em;
}

.m-entry-slot__blurb p {
    color: black;
    font-family: "Ubuntu";
    font-size: 1.2em;
}

Now when I open the site in my browser it looks like below on the right (click to view image in full size).

Applying CSS to Every Site.

If you want to apply some custom css to every site, then put the CSS in a file called default.css.

Applying Custom JS

Javascript works the same way. Create a .js folder in your home directory:

mkdir $HOME/.js
Create a file with the domain of the site you wish to customize and then add the js in there. For example:
alert("hello world");

Author

Programster

Stuart is a software developer with a passion for Linux and open source projects.

comments powered by Disqus