Added ability to load images on demand and block remote fonts

chrome-extension/html/options.html

@@ -27,6 +27,10 @@ <h2>B&W Mode</h2>
               <input id="whiteBg" type="checkbox" name="box_all">
               <label for="whiteBg">White background pages</label>
             </li>
+            <li>
+              <input id="blockRemoteFonts" type="checkbox" name="box_all">
+              <label for="blockRemoteFonts">Block remote fonts</label>
+            </li>
           </ul>
         </div>
 
@@ -56,4 +60,4 @@ <h2>Image Replacement</h2>
     <script src="../js/options.js"></script>
 
   </body>
-</html>
+</html>

chrome-extension/js/background.js

@@ -87,6 +87,10 @@ function getUseWhiteBg() {
 	return !(localStorage['use_white_bg'] === "false");
 }
 
+function isBlockRemoteFonts () {
+	return localStorage['block_remote_fonts'] === 'true';
+}
+
 //------------------------------------------------
 // Replacement Image
 //------------------------------------------------
@@ -140,6 +144,9 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 
 	onBeforeRequestImage = function(info)
 	{
+		if (info.url.includes('reloadedAt=')) {
+		  return {};
+		}
 		// Redirect the image request to blank.
 		return {redirectUrl: getBlankReplacementImage()};
 	};
@@ -150,6 +157,10 @@ chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
 		// Redirect the asset request to ////
 		return {redirectUrl: getReplacementImage()};
 	};
+	onBeforeRequestFont = function(info)
+	{
+		return {cancel: true};
+	};
 
 //------------------------------------------------
 // Setup
@@ -202,12 +213,31 @@ function setListeners() {
 			// extraInfoSpec
 			["blocking"]
 		);
+		chrome.webRequest.onBeforeRequest.addListener(
+			// listener
+			onBeforeRequestFont,
+			// filters
+			{
+				urls: [
+					"http://*/*",
+					"https://*/*"
+				],
+
+				// Possible values:
+				// "main_frame", "sub_frame", "stylesheet", "script",
+				// "image", "object", "xmlhttprequest", "other"
+				types: ["font"]
+			},
+			// extraInfoSpec
+			["blocking"]
+		);
 	}
 	else
 	{
 		// Remove listeners
 		chrome.webRequest.onBeforeRequest.removeListener( onBeforeRequestImage );
 		chrome.webRequest.onBeforeRequest.removeListener( onBeforeRequestObject );
+		chrome.webRequest.onBeforeRequest.removeListener( onBeforeRequestFont );
 	}
 }
 

chrome-extension/js/options.js

@@ -90,6 +90,26 @@ $("#whiteBg").click(function() {
     }
 });
 
+function getBlockRemoteFonts() {
+	return !(localStorage['block_remote_fonts'] === "false");
+}
+function setBlockRemoteFonts(value) {
+	localStorage['block_remote_fonts'] = value;
+}
+
+$("#blockRemoteFonts").prop('checked', getBlockRemoteFonts());
+$("#blockRemoteFonts").click(function() {
+	var $this = $(this);
+	// $this will contain a reference to the checkbox   
+	if ($this.is(':checked')) {
+		// the checkbox was checked 
+		setBlockRemoteFonts(true);
+	} else {
+		// the checkbox was unchecked
+		setBlockRemoteFonts(false);
+	}
+});
+
 
 
 //-----------------------------------------------------------------------------

chrome-extension/js/tab.js

@@ -52,7 +52,7 @@ function getBgImg(){
 		this.setBodyType();
 		this.setFavicon();
 		this.replaceHolderImgs();
-
+		this.setupLoadability()
 	}
 	window.addEventListener('DOMContentLoaded', onReady, false);
 
@@ -113,6 +113,56 @@ function setBodyType() {
 	}
 }
 
+const reloadedAtQueryPattern = /reloadedAt=\d+/
+const startQueryPattern = /\?.+/
+function setupLoadability () {
+	var forEach = Array.prototype.forEach;
+	var imgs = document.getElementsByTagName('img');
+	forEach.call(imgs, function (img) {
+		img.onclick = function (event) {
+			event.preventDefault()
+			event.stopPropagation()
+
+			const parser = document.createElement('a');
+			parser.href = event.currentTarget.src
+
+			if (reloadedAtQueryPattern.test(parser.search)) {
+				event.currentTarget.src = event.currentTarget.src.replace(reloadedAtQueryPattern, `reloadedAt=${Date.now()}`)
+			} else if (startQueryPattern.test(parser.search)) {
+				event.currentTarget.src = event.currentTarget.src + `&reloadedAt=${Date.now()}`
+			} else {
+				event.currentTarget.src = event.currentTarget.src + `?reloadedAt=${Date.now()}`
+			}
+		}
+	});
+
+	var links = document.getElementsByTagName('a');
+	forEach.call(links, function (link) {
+		link.onclick = function (event) {
+			const children = event.currentTarget.getElementsByTagName('*')
+			const length = children.length
+			for (let i = 0; i < length; ++ i) {
+				const child = children[i]
+				if (child.tagName === 'IMG') {
+					const parser = document.createElement('a');
+					parser.href = child.src
+
+					if (reloadedAtQueryPattern.test(parser.search)) {
+						return
+					} else if (startQueryPattern.test(parser.search)) {
+						child.src = child.src + `&reloadedAt=${Date.now()}`
+						event.preventDefault()
+						event.stopPropagation()
+					} else {
+						child.src = child.src + `?reloadedAt=${Date.now()}`
+						event.preventDefault()
+						event.stopPropagation()
+					}
+				}
+			}
+		}
+	});
+}
 
 //------------------------------------------------
 // Holder.js