Skip to content

Instantly share code, notes, and snippets.

@vasilisvg
Last active September 24, 2019 21:32
Show Gist options
  • Save vasilisvg/985fd2172b4eb151eb4394b0b92356b1 to your computer and use it in GitHub Desktop.
Save vasilisvg/985fd2172b4eb151eb4394b0b92356b1 to your computer and use it in GitHub Desktop.
This Tampermonkey script enhances the ads on ecosia to look like coloured rectangles on coloured backgrounds. Ads do get shown, trees do get planted.
// ==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);
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment