vasilisvg/better-ads-on-ecosia.js

## better-ads-on-ecosia.js
// ==UserScript==
// @name         Improved art direction on ads in Ecosia
// @namespace    http://tampermonkey.net/
// @version      0.8
// @description  This script enhances the ads on ecosia to look like coloured rectangles on coloured backgrounds. Ads do get shown, trees do get planted.
// @author       Vasilis
// @match        https://www.ecosia.org/*
// @grant        none
// ==/UserScript==

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
function rminmax(min, max) {
  return Math.random() * (max - min) + min;
}

(function() {
    'use strict';
    // These are the classes ads seem to use on Ecosia.
    var theAds = document.querySelectorAll('.js-sidebar-ad,.card-desktop.card-ad.card-top-ad,.card-desktop.card-ad');
    var i = 0;
	var hideAds = '';
    while (i < theAds.length) {
        // Sidebar ads have this unique data-attribute, which we can use to style them.
        if(theAds[i].getAttribute('data-ad-rank')) {
            adsClass = '[data-ad-rank="'+theAds[i].getAttribute('data-ad-rank')+'"]';
        }
        // Other ads seem to have unique lists of classes
        else {
            var adsClasses = theAds[i].classList;
            var j = 0;
            var adsClass = '';
            while (j < adsClasses.length) {
                adsClass += '.'+adsClasses[j];
                j++;
            }
        }
        // We need some random numbers.
        var r = 'rgb('+ getRandomInt(256) +','+ getRandomInt(256) +','+ getRandomInt(256) +')'; // Random colour
        var r1 = 'rgb('+ getRandomInt(256) +','+ getRandomInt(256) +','+ getRandomInt(256) +')'; // Another random colour
        var w = rminmax(10,90); // Width between 10% and 90%
        var h = rminmax(2,138); // Height between 2px and 138px
        var ml = getRandomInt((100-w)); // Random margin left, calculated from leftover space
        var mt = getRandomInt(140-h); // Random margin top, calculated from leftover space
        var hue = rminmax(5,355); // Transform the hue of the second ad block
        hideAds += adsClass + '{background: '+r+' !important;height: 140px; overflow: hidden;}';
        hideAds += adsClass + ' > div, ' + adsClass + ' >  div * {background: '+r1+' !important; color: '+r1+' !important;overflow: hidden;pointer-events: none;}'
        hideAds += adsClass + ' > div {width: '+w+'%;height: '+h+'px;margin: '+mt+'px 0 0 '+ml+'% !important;}';
        hideAds += adsClass + ' > div + div {width: 1px; height: 1px; background: transparent; overflow: hidden;}';
        //hideAds += '.card-top-ad {filter:hue-rotate('+hue+'deg)}';

        i++;
    }

	// Add the styles to a styleblock in the <head>
    var st = document.createElement('style');
    st.innerHTML = hideAds;
    document.querySelector('head').appendChild(st);
})();
	// ==UserScript==
	// @name Improved art direction on ads in Ecosia
	// @namespace http://tampermonkey.net/
	// @version 0.8
	// @description This script enhances the ads on ecosia to look like coloured rectangles on coloured backgrounds. Ads do get shown, trees do get planted.
	// @author Vasilis
	// @match https://www.ecosia.org/*
	// @grant none
	// ==/UserScript==

	function getRandomInt(max) {
	return Math.floor(Math.random() * Math.floor(max));
	}
	function rminmax(min, max) {
	return Math.random() * (max - min) + min;
	}

	(function() {
	'use strict';
	// These are the classes ads seem to use on Ecosia.
	var theAds = document.querySelectorAll('.js-sidebar-ad,.card-desktop.card-ad.card-top-ad,.card-desktop.card-ad');
	var i = 0;
	var hideAds = '';
	while (i < theAds.length) {
	// Sidebar ads have this unique data-attribute, which we can use to style them.
	if(theAds[i].getAttribute('data-ad-rank')) {
	adsClass = '[data-ad-rank="'+theAds[i].getAttribute('data-ad-rank')+'"]';
	}
	// Other ads seem to have unique lists of classes
	else {
	var adsClasses = theAds[i].classList;
	var j = 0;
	var adsClass = '';
	while (j < adsClasses.length) {
	adsClass += '.'+adsClasses[j];
	j++;
	}
	}
	// We need some random numbers.
	var r = 'rgb('+ getRandomInt(256) +','+ getRandomInt(256) +','+ getRandomInt(256) +')'; // Random colour
	var r1 = 'rgb('+ getRandomInt(256) +','+ getRandomInt(256) +','+ getRandomInt(256) +')'; // Another random colour
	var w = rminmax(10,90); // Width between 10% and 90%
	var h = rminmax(2,138); // Height between 2px and 138px
	var ml = getRandomInt((100-w)); // Random margin left, calculated from leftover space
	var mt = getRandomInt(140-h); // Random margin top, calculated from leftover space
	var hue = rminmax(5,355); // Transform the hue of the second ad block
	hideAds += adsClass + '{background: '+r+' !important;height: 140px; overflow: hidden;}';
	hideAds += adsClass + ' > div, ' + adsClass + ' > div * {background: '+r1+' !important; color: '+r1+' !important;overflow: hidden;pointer-events: none;}'
	hideAds += adsClass + ' > div {width: '+w+'%;height: '+h+'px;margin: '+mt+'px 0 0 '+ml+'% !important;}';
	hideAds += adsClass + ' > div + div {width: 1px; height: 1px; background: transparent; overflow: hidden;}';
	//hideAds += '.card-top-ad {filter:hue-rotate('+hue+'deg)}';

	i++;
	}

	// Add the styles to a styleblock in the <head>
	var st = document.createElement('style');
	st.innerHTML = hideAds;
	document.querySelector('head').appendChild(st);
	})();