A better google experience
In the old days google was ‘just’ a very good search engine. Nowadays it is moving away from it’s initial goal to provide the best search experience. On an average query you will get ads, newsreports, videos, maps, related queries all making it harder to look at what you were actually trying to find.
Using tampermonkey (a browser plugin to manage your userscripts) I made a script to better manage which items are shown on a SERP ( Search Engine Results Page) on Google.
// ==UserScript==
// @name Google
// @namespace http://tampermonkey.net/
// @version 0.1
// @description A better google experience
// @author Master Nebu
// @include https://www.google.*
// @icon https://www.google.com/s2/favicons?domain=google.com
// @grant GM.setValue
// @grant GM.getValue
// ==/UserScript==
/* Variable initialization */
var gSettings = await GM.getValue("gSettings",{"ads":true,"fullUrl":true,"maps":false,"news":false,"related":true,"boldify":true,"carousels":false});
/* Place searched keywords in tags initialization and store full and partial url */
(function() {
let url_string = (window.location.href).toLowerCase();
let url = new URL(url_string);
let qs = url.searchParams.get("q").split(" ");
qs.forEach((name, index) => qs[index] = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
let gLinks = document.querySelectorAll(".g>div>div>div>a");
for (let el of gLinks) {
let cite = el.querySelector('cite');
let href = el.href;
let RE = new RegExp('\\b('+qs.join("|")+')\\b', "gi");
cite.setAttribute("smartUrl",cite.innerHTML.replace(RE, '<gcHeavy class='+ gSettings.boldify+ '>$1</gcHeavy>'));
cite.setAttribute("fullUrl",href.replace(RE, '<gcHeavy class='+ gSettings.boldify+ '>$1</gcHeavy>'));
}
let h3s = document.querySelectorAll("a>h3");
for (let h3 of h3s) {
let RE = new RegExp('\\b('+qs.join("|")+')\\b', "gi");
h3.innerHTML = h3.innerHTML.replace(RE, '<gcSuperHeavy class='+ gSettings.boldify+ '>$1</gcSuperHeavy>');
}
let adHeaders = document.querySelectorAll("[role=heading]");
for (let adHeader of adHeaders) {
let RE = new RegExp('\\b('+qs.join("|")+')\\b', "gi");
adHeader.innerHTML = adHeader.innerHTML.replace(RE, '<gcSuperHeavy class='+ gSettings.boldify+ '>$1</gcSuperHeavy>');
}
})();
/* hide translate option */
let translates = document.querySelectorAll('a[href*="translate"]');
for (let translate of translates) {
translate.parentElement.removeChild(translate);
}
/* Append Stylesheet */
(function(){
let style = document.createElement('style');
style.id = 'gCustomStyleSheet';
style.innerHTML = `
cite {display:inline-block;line-height:24px !important;max-height:24px!important;overflow:hidden;}
div.action-menu {top:-6px!important;}
gAdSwitcher {display:block;position:fixed;right:10px;bottom:10px;padding:10px;font-size:10px;line-height:17px;}
gciReset {position:absolute;cursor:pointer;text-decoration:underline;text-align:right;font-size:9px;color:gray;left:19px;bottom:22px;}
gciIcon {position:absolute;bottom:0px;right:0px;cursor:pointer;display:block;border:1px solid silver;border-radius:18px;width:32px;height:32px;-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.35);background-color:white;}
gciIcon svg {margin-left:6px;margin-top:6px;fill:black;}
gciIcon:hover {border:1px solid #4285F4;background-color:#333333;box-shadow:0px 0px 0px 0px !important;-webkit-box-shadow:0px 0px 0px 0px !important;}
gciIcon:hover svg {fill:white;}
gciIcon.true {border:1px solid #4285F4;box-shadow:0px 0px 0px 0px !important;-webkit-box-shadow:0px 0px 0px 0px !important;background-color:#333333 !important;}
gciIcon.true svg {fill:white !important;}
gciOptions {display:none;background-color:#efefef;padding:5px;margin-bottom:10px;padding:5px;padding-bottom:18px;margin-right:10px;
-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.35);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.35);
}
gcSuperHeavy.true {;font-weight:700}
gcHeavy.true {font-weight:bold!important;}
gciOptions div {margin:8px 4px;}
gciOptions span {display:inline-block;width:80px;font-size:11px;color:black;font-weight:bold;}
.gAdSwitch {position: relative;display: inline-block;width: 30px;height: 17px;margin-left:5px;}
.gAdSwitch input { opacity: 0;width: 0;height: 0;}
gAdSlider {border-radius: 17px;position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #E74A42;-webkit-transition: .4s;transition: .4s;}
gAdSlider:before {position: absolute;content: "";height: 11px;width: 11px;left: 3px;bottom: 3px;background-color: white;-webkit-transition: .4s;transition: .4s;border-radius: 50%;}
input:checked + gAdSlider {background-color: green;}
input:checked + gAdSlider:before {background-color: white;}
input:checked + gAdSlider:before {-webkit-transform: translateX(13px);-ms-transform: translateX(13px);transform: translateX(13px);}
`;
let ref = document.querySelector('script');
ref.parentNode.insertBefore(style, ref);
})();
/* Append popup */
async function paint(){
let newNode = document.createElement('gAdSwitcher');
newNode.id="gAdSwitcher";
newNode.innerHTML = `
<gciOptions>
<div><span>Ads</span><label class="gAdSwitch"><input id="gciAds" type="checkbox"` + (gSettings.ads ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<div><span>Maps</span><label class="gAdSwitch"><input id="gciMaps" type="checkbox"` + (gSettings.maps ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<div><span>News</span><label class="gAdSwitch"><input id="gciNews" type="checkbox"` + (gSettings.news ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<div><span>Carousels</span><label class="gAdSwitch"><input id="gciCarousels" type="checkbox"` + (gSettings.carousels ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<div><span>Related</span><label class="gAdSwitch"><input id="gciRelated" type="checkbox"` + (gSettings.related ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<div><span>Full url</span><label class="gAdSwitch"><input id="gcifullUrl" type="checkbox"` + (gSettings.fullUrl ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<div><span>Boldify</span><label class="gAdSwitch"><input id="gciBoldify" type="checkbox"` + (gSettings.boldify ? 'checked' : '') + ` ><gAdSlider></gAdSlider></label></div>
<gciReset>reset</gciReset>
</gciOptions>
<gciIcon><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/></svg></gciIcon>
`;
document.body.appendChild(newNode);
};
/* Append popup */
async function eventListeners(){
document.querySelector('#gciAds').addEventListener('change', event => {
gSettings.ads = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleAds(event.target.checked);
});
document.querySelectorAll('#gciBoldify')[0].addEventListener('change', event => {
gSettings.boldify = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleBoldify(event.target.checked);
});
document.querySelectorAll('#gcifullUrl')[0].addEventListener('change', event => {
gSettings.fullUrl = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleFullUrl(event.target.checked);
});
document.querySelectorAll('#gciMaps')[0].addEventListener('change', event => {
gSettings.maps = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleMaps(event.target.checked);
});
document.querySelectorAll('#gciCarousels')[0].addEventListener('change', event => {
gSettings.carousels = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleCarousels(event.target.checked);
});
document.querySelectorAll('#gciNews')[0].addEventListener('change', event => {
gSettings.news = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleNews(event.target.checked);
});
document.querySelectorAll('#gciRelated')[0].addEventListener('change', event => {
gSettings.related = event.target.checked;
GM.setValue("gSettings", gSettings);
toggleRelated(event.target.checked);
});
document.querySelector('gciReset').addEventListener('click', event => {
init(true);
});
document.querySelector('gciIcon').addEventListener('click', function(){
let opt = document.querySelector('gciOptions');
this.classList.remove(((opt.style.display=="block") ? "true" : "false" ));
this.classList.add(((opt.style.display=="block") ? "false" : "true" ));
opt.style.display= ((opt.style.display=="block") ? "none" : "block" );
});
}
/* TOGGLERS */
async function toggleAds(b)
{
let display = (b?'block':'none');
document.querySelector('#tvcap').style.display = display;
document.querySelector('#bottomads').style.display = display;
document.querySelector('.cu-container').style.display = display;
}
/* BOLDIFY */
async function toggleBoldify(b)
{
let bolds = document.querySelectorAll("gcSuperHeavy,gcHeavy");
for (let el of bolds) {
el.classList.remove('true');
el.classList.remove('false');
el.classList.add(''+b);
}
}
/* FULL URL */
async function toggleFullUrl(b)
{
let cites = document.querySelectorAll(".g>div>div>div>a cite");
for (let cite of cites) {
cite.innerHTML = (b ? cite.getAttribute("fullUrl") : cite.getAttribute("smartUrl") );
let menu = cite.closest(".g").querySelectorAll(".action-menu");
if(menu.length>0) {console.log('hide');menu[0].style.display = (b ? "none" : "block" );}
let translate= cite.closest(".g").querySelectorAll(".iUh30[ping]");
if(translate.length>0) {console.log('hide');translate[0].style.display = (b ? "none" : "inline" );}
}
}
async function toggleMaps(b)
{
let imgmaps = document.querySelectorAll('img[src*="data:image/png;base64"],img[src*="/maps/"]');
for (let imgmap of imgmaps) {
let dved = imgmap.closest("[data-ved]");
if(dved!==null) dved.style.display = (b ? "block" : "none" );
}
}
async function toggleCarousels(b)
{
let carousels = document.querySelectorAll("g-scrolling-carousel");
for (let carousel of carousels) {
carousel.closest("div").style.display = (b ? "block" : "none" );
}
}
async function toggleNews(b)
{
let sections = document.querySelectorAll("g-section-with-header");
for (let section of sections) {
section.style.display = (b ? "block" : "none" );
}
}
async function toggleRelated(b)
{
let relateds = document.querySelectorAll('.ULSxyf');
for (let related of relateds) {
related.style.display = (b ? "block" : "none" );
}
}
/* INITIALIZATIOn */
async function init(reset){
let elem = document.querySelector('#gAdSwitcher');
if(elem!==null) elem.parentNode.removeChild(elem);
if(reset) {
await GM.setValue("gSettings",{"ads":true,"fullUrl":true,"maps":false,"news":false,"related":true,"boldify":true,"carousels":false});
gSettings = await GM.getValue("gSettings");
}
await paint();
await eventListeners();
toggleAds(gSettings.ads);
toggleFullUrl(gSettings.fullUrl);
toggleMaps(gSettings.maps);
toggleBoldify(gSettings.boldify);
toggleNews(gSettings.news);
toggleRelated(gSettings.related);
toggleCarousels(gSettings.carousels);
}
init(false);
Below an example of this extension. In the bottom right corner you can choose the settings. Using this userscript you can completely manage Google.
2
Cheers.
Thanks!