Google Images Results Limiter Greasemonkey/Tampermonkey Script for Firefox/Chrome

This doesn’t exist on the Interwebs, so I decided to code it myself.

I’ll likely be coding other scripts as well and releasing it here.

(Chances are, Google other site bots will sniff this post and index it, but that’s totally fine by me.)

A lot of people have always wanted to limit the Google Images results,

since Google unfortunately forces all browsers (including phones) to load at least 400 images.

A makeshift fix is to force Google Images to load in Basic Mode, but that’s really undesirable.

So here’s a full-fledged script that you can just pop into Greasemonkey/Tampermonkey, and start using immediately.

Note: Cookies must be enabled for this script, as that’s how it stores your settings.

Currently, it has only three features (since I can’t think of anything else to add):

1) You can limit your image results anywhere from 1-200. If you want to disable, just turn the script off.

(Sorry, I’m not coding in a disable feature; that would kill the point of the script.)

2) You can toggle Related Images on/off with a simple click.

3) Both of the above are handled by a GUI that I built into Google Images;

it shows as a pink triangle in the bottom-left of your screen.

Anyways, feel free to copy the code below and share it. Suggestions? Feel free to post.

// ==UserScript==
// @name Google Images Results Limiter
// @author Nitori
// @description “Limits” the number of Google Image results
// @include *google.*/search*&tbm=isch*
// @require http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @require http://kireicake.com/temp/mutation-summary.js
// @require http://kireicake.com/temp/jquery.mutation-summary.js
// @version 2.1
// ==/UserScript==
//———————————————————–
/* To Do List
Add blacklisting feature:
Add external database with JSON and an external API
Have first-time user specify database name with letters and numbers only
inside of a popup dialogue box on first Google Image search or load
Store this database name in a cookie and use it from now on
Add a reset function in case things don’t work out
*/
//———————————————————–
this.$ = this.jQuery = jQuery.noConflict(true); // Avoid duplicate jQuery conflict
//———————————————————–
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//———————————————————–
$(function() {
//———————————————————–
/* Storing of Limit Setting */
if (readCookie(“KC_Google_IMG_Limit”) == null) // If cookie does not exist, limit to 20
setCookie(“KC_Google_IMG_Limit”, “14”, 99999);

var maxResults = readCookie(“KC_Google_IMG_Limit”); // If you have cookies disabled, edit this
//———————————————————–
/* Side Bar UI */
// Insert the CSS styles of the UI into the header
$(“<style type=’text/css’>.arrow_box { background: #FDF7EA; border: 5px solid #F2C8CA; border-radius: 3px; padding: 10px; } .arrow_box:after, .arrow_box:before { left: 101.5%; top: 51.5%; border: solid transparent; border-radius: 3px; content: ‘ ‘; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: white; border-width: 21px; margin-top: -21px; left: 103.5%; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #F2C8CA; border-width:32px; margin-top: -32px; } .kc-cpanel { width: 140px; height: auto; position: fixed; line-height: 200%; left:-170px; bottom: 0px; font-size: 100%; font-family: ‘Segoe UI’; z-index: 20; } .kc-limit-num { width:40px; text-align: right; margin-left: 4px; } .kc-related-toggle { position: relative; left: 8px; top: 3px; width: 18px; height: 18px; } .kc-update { background-color:rgb(244, 84, 115); position:relative; color: white; padding-left: 20px; padding-right: 20px; padding-top: 3px; padding-bottom: 4px; border: none; margin-left: 14px; margin-top: 10px; margin-bottom: 9px; font-size: 140%; } .kc-update:hover { background-color: rgb(247, 118, 143); -webkit-transition: background-color .4s; -moz-transition: background-color .4s; -ms-transition: background-color .4s; -o-transition: background-color .4s; transition: background-color .4s; } .kc-cpanel-open { width: 30px; height: 60px; position: fixed; bottom: 40px; left: 0px; opacity: 0; background-color:blue; z-index: 20; }</style>”).appendTo(“head”);

// Add the UI to Google Images
$(‘body’).append($(‘<div class=”kc-cpanel arrow_box”> Hide Related: <input type=”checkbox” class=”kc-related-toggle”><br> Max Results: <input type=”number” class=”kc-limit-num” title=”Max 200 items” value=”20″ min=”1″ max=”200″><br> <button type=”button” class=”kc-update”>Update</button> </div> <div class=”kc-cpanel-open”></div>’));

$(‘.kc-limit-num’).val(maxResults); // Fetch the saved limit amount from the cookie

$(‘.kc-limit-num’).on(‘keyup’, function() { // Set min/max limit to 1-200
if ($(this).val() > 200) {
$(this).val(200);
} else if ($(this).val() < 1) {
$(this).val(1); }
});

if (readCookie(“KC_Google_Hide_Related”) == “Yes”) { // Check if Related Items are disabled
$(“<style type=’text/css’>.irc_ris { display: none; } .irc_land .irc_infosep { display: none; }</style>”).appendTo(“head”);
$(‘.kc-related-toggle’).prop(‘checked’, true);
} else {
$(“<style type=’text/css’>.irc_ris { display: block; } .irc_land .irc_infosep { display: block; }</style>”).appendTo(“head”); }

var cPanelOpen = false;

$(‘.kc-cpanel-open’).click(function() { // Handle the UI open/close
if (cPanelOpen != true) {
$(“.kc-cpanel”).animate({ ‘left’: ‘0px’ }, 500);
$(“.kc-cpanel-open”).animate({ ‘left’: ‘170px’ }, 500);
cPanelOpen = true;
} else {
$(“.kc-cpanel”).animate({ ‘left’: ‘-170px’ }, 300);
$(“.kc-cpanel-open”).animate({ ‘left’: ‘0px’ }, 300);
cPanelOpen = false;
}
});

$(‘.kc-related-toggle’).change(function() { // Toggle Related Items on/off
if (this.checked) {
$(‘.irc_ris’).css({ ‘display’:’none’ });
$(‘.irc_land .irc_infosep’).css({ ‘display’:’none’ });
setCookie(“KC_Google_Hide_Related”, “Yes”, 99999);
} else {
$(‘.irc_ris’).css({ ‘display’:’block’ });
$(‘.irc_land .irc_infosep’).css({ ‘display’:’block’ });
setCookie(“KC_Google_Hide_Related”, “No”, 99999);
}
});

$(‘.kc-update’).click(function() { // Update the limit
setCookie(“KC_Google_IMG_Limit”, $(‘.kc-limit-num’).val(), 99999);
location.reload(); // Reload the page to reflect the changes
});
// direct links

// http://jsfiddle.net/830fqce9/21/
//———————————————————–
/* CSS Hacks */
// Hide the Footer gutter and Load More button
$(“<style type=’text/css’>#foot { display:none !important; }</style>”).appendTo(“head”);
// Force the Image Specs to Always Show
$(“<style type=’text/css’>.rg_di .rg_ilm { display: block !important; opacity: 0.9; } .rg_anbg, .rg_ilmbg { background-color: rgb(18, 128, 195) !important; }</style>”).appendTo(“head”);
// Add Opacity Selection effect
$(“<style type=’text/css’>div.rg_di { opacity: 0.7; } div.rg_di:hover { opacity: 1; -webkit-transition: opacity .4s; -moz-transition: opacity .4s; -ms-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s; }</style>”).appendTo(“head”);
// Opened Overlay Colour Change
$(“<style type=’text/css’>#irc_cc { background-color: rgb(25, 63, 95); }</style>”).appendTo(“head”);
// Remove Copyright Disclaimer
$(“<style type=’text/css’>.irc_land .irc_ft { display: none; }</style>”).appendTo(“head”);

// $(“<style type=’text/css’></style>”).appendTo(“head”);
//———————————————————–
/* Limiting of Results */
// This is placed at the very end, due to precedence issues in Firefox
$(document).mutationSummary(“connect”, updateResults, [{element: ‘.rg_di’}]); // Hook AJAX updates
setTimeout(updateResults(), 2000); // Run once in case of delay

function updateResults() {
var shownResults = maxResults-1; // Since indexes start at zero
$(‘*[data-ri=”‘+ shownResults +'”]’).nextAll().detach(); // Limit results
//$(‘#rg’).css({ ‘height’:’auto !important’ }); // Recalculate the height of the div
}
//———————————————————–
});