Share: My userscript for BlackHatWorld (custom colors and limited width for better readability)

// ==UserScript==
// @name        Blackhatworld - Narrow page and change background color
// @namespace   blackhatworld.com

// @include     https://www.blackhatworld.com/*
// @include     https://blackhatworld.com/*
// @include     http://www.blackhatworld.com/*
// @include     http://blackhatworld.com/*
// @include     www.blackhatworld.com/*
// @include     blackhatworld.com/*

// @version     1
// ==/UserScript==


// a function that loads jQuery and calls a callback function when jQuery has finished loading
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}


// the guts of this userscript
function main() {


    var mainElementsTargetColor = '#bbb'; // Any regular HTML code color
    var quotationsTargetColor = '#e3e3e3'; // Any regular HTML code color
    var targetWidth = '60%';


    // Note, jQ replaces $ to avoid conflicts, for example:
    // alert("There are " + jQ('a').length + " links on this page.");

    jQ('body').width(targetWidth);
    jQ('body').css('margin', '0 auto 0 auto');


    var mainElements = jQ('*').filter(function() {
        return (jQ(this).css('backgroundColor') == 'rgb(236, 236, 236)');
    })

    var quotations = jQ('*').filter(function() {
        return (jQ(this).css('backgroundColor') == 'rgb(255, 255, 255)');
    })

    jQ(mainElements).css('background-color', mainElementsTargetColor);
    jQ(quotations).css('background-color', quotationsTargetColor);

}


// load jQuery and execute the main function
addJQuery(main);