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 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");