Add customizable and randomized background through option

js/background.js

@@ -5,6 +5,7 @@ var unblockTimes = {};
 
 // Default URL for the background image. Should always load.
 DEFAULT_IMAGE_URL = 'https://source.unsplash.com/collection/323879/1440x900/daily';
+
 // Cached URL or the last displayed image.
 var imageUrl = DEFAULT_IMAGE_URL;
 
@@ -73,18 +74,33 @@ function blockingHtml() {
   return request.responseText.replace(/{{imageUrl}}/g, imageUrl);
 }
 
+function hasCustomBackground() {
+  var userBackgrounds = window.options.background.split(',');
+  return userBackgrounds.length > 0 && userBackgrounds[0] != "";
+}
+
+function randomUserBackground() {
+  var userBackgrounds = window.options.background.split(',');
+  var randomUserBackground = userBackgrounds[Math.floor(Math.random()*userBackgrounds.length)]
+  return randomUserBackground;
+}
+
 // The default image URL we are currently using, redirects to the actual URL
 // of the actual image. This is slow and destroys user experience. Therefore we
 // do cache the URL of the actual image in a global variable.
 function refreshImageUrl() {
-  var request = new XMLHttpRequest();
-  request.onreadystatechange = function() {
-    if (request.status === 200) {
-      imageUrl = request.responseURL;
-    }
-  };
-  request.open('GET', DEFAULT_IMAGE_URL)
-  request.send();
+  if (hasCustomBackground()) {
+    imageUrl = randomUserBackground();
+  } else {
+    var request = new XMLHttpRequest();
+    request.onreadystatechange = function() {
+      if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
+        imageUrl = request.responseURL;
+      }
+    };
+    request.open('GET', imageUrl)
+    request.send();
+  }
 }
 
 // Fetch image URL on startup to speed up the first image load.

js/options.js

@@ -3,7 +3,8 @@ function saveOptions() {
     waitTime: $('waitTime').value,
     blockTime: $('blockTime').value,
     blocklist: $('blocklist').value,
-    whitelist: $('whitelist').value
+    whitelist: $('whitelist').value,
+    background: $('background').value
   };
 
   chrome.storage.sync.set(options, function() {
@@ -18,6 +19,7 @@ function restoreOptions() {
     $('blockTime').value = items.blockTime;
     $('blocklist').value = items.blocklist;
     $('whitelist').value = items.whitelist;
+    $('background').value = items.background;
 
     // Setting value does not trigger click oninput event.
     $('waitTimeOutput').value = humanizeTime(items.waitTime);

js/waitblock.js

@@ -7,5 +7,7 @@ var defaultOptions = {
   // The list of domains to block. Covers subdomains as well.
   blocklist: 'facebook.com',
   // The list of subdomains to allow.
-  whitelist: 'l.facebook.com'
+  whitelist: 'l.facebook.com',
+  // The list of background URLs to randomize from.
+  background: ''
 };

options.html

@@ -91,6 +91,20 @@
       </div>
     </section>
 
+    <section>
+      <div>
+        <div><label for"background">Background</label></div>
+        <em class="note">
+          Comma separated list of background URLs to randomize from (e.g.
+          https://i.imgur.com/zu5Nno5.jpg)
+        </em>
+      </div>
+
+      <div>
+        <textarea id="background" rows="3"></textarea>
+      </div>
+    </section>
+
     <section>
       <div>
         <button id="saveOptions">Save</button>