Why?

My addiction to proper dark/low-contract and outright badass interfaces is well-known and could even considered pathological.by one’s standards. This, alongside with inability to use third-party browser extensions in my company’s laptop (for security reasons) finally led me to start exploring the shocking world of DIY Chrome Extensions.

I did not even bother researching what you need to do, for your Chrome extension to make it to Google’s store facilities, I just wanted something, that works locally, personally for me and does one simple thing: dim the eye melting colours of corporate/enterprise web UIs. Thankfully, adding local dev versions of Chrome extensions is fairly straightforward.

First steps

rottingface@vipernest: ~$ md Darkk
rottingface@vipernest: ~$ cd Darkk
rottingface@vipernest: ~/Darkk$ touch manifest.json

{
    "name" : "Darkk",
    "version" : "1.0",
    "content_scripts": [
        {
            "matches": ["https://github.com/*"],
            "css" : ["css/github-dark.css"]
 
        }
    ],
    "permissions" : [ "activeTab", "webNavigation", "*://*/*" ],
    "description" : "Dark mode for my everyday web",
    "manifest_version" : 2
}

When you go to chrome://extensions URL in your browser and click “Add unpacked”, specifying your extension directory.

The catch

There is always one, isn’t it? Some times, it just does not work. Maybe because of Chrome, maybe because of today’s web pages do too much dynamic DOM manipulations on the way. So, in addition to that, I pretended to be a well-trained JS monkey and came up with a script that inserts a new style DOM element, after web page has loaded.

const url = chrome.runtime.getURL('data/github-dark.css');

fetch(url)
    .then((response) => response.text())
    .then((css) => {
        var head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

        head.appendChild(style);

        let prcss = css.replace(/@-moz-document regexp\((.*)\) \{(\n|\r)+/, "");
        style.type = 'text/css';
        if (style.styleSheet){
            // This is required for IE8 and below.
            style.styleSheet.cssText = prcss;
        } else {
            style.appendChild(document.createTextNode(prcss));
        }
    });

Here I wanted just a plain simple thing, apply custom CSS to the page, when the URL matches a pattern specified. Started to develop my in-house Google Chrome extension to adjust some of the WebUI palettes of the services I use every day. Let’s see how easy it goes. I could not really use any third+party extension from the Chrome store ob my working laptop, because of my company’s net security guidelines.

So, I created a simple .manifest file. Added a background script that hooks to a navigation complete element. By the way, simple CSS injections via tabs.injectCSS or “css” in manifest file did not work for some reason. Same went for jQuery (modern browsers almost fully blocking any Cross-Origin or local referencies). Was able to make my way simply through creating a style DOM element and filling its gut with my custom CSS content.