There is no great way of injecting CSS. There are probably some browser extensions, but a common approach are bookmarklets.

Bookmarklets are Javascript snippets that you can run on any page. They are commonly pinned to the bookmarks bar and are formatted as a generic function that is URL-safe. I wrote a blog post on them.

An example bookmarklet is like the following:

javascript: (function () {
  /* Your code here */
})();

Here’s a cool example that you can either click or save for later.

So now that we know we want to use bookmarklets, we have another problem.

How do we inject the CSS???

There are so many ways, one of the easiest is to adjust the CSS of every single element.

<!-- Before -->
<div id="container">...</div>

<!-- After -->
<div id="container" style="color: red;">...</div>

document.getElementById("container").style.color = "red";

Another is inserting a <link> tag that goes to a hosted stylesheet.

var myTag = document.createElement("link");
myTag.rel = "stylesheet";
myTag.href = "https://linkto.site";
document.head.appendChild(myTag);

The last that I can think of is creating a custom <style> tag.

var myTag = document.createElement("style");
var myTagContent = document.createTextNode("body{color:red;}");
myTag.appendChild(myTagContent);
document.head.appendChild(myTag);

Our Solution

All of those are good, but in reality we don’t need to worry about that. In my journey through bookmarklets, I have found a really wonderful website that allows your to create these scripts from a stylesheet. No effort is required on our part!

To create the bookmarklet, paste in your new stylesheet to the website, click “Generate Bookmarklet” and drag the link to your bookmarks bar.

You can also find the source for the website here.