Version 1.3:

* Removed <all_urls> permission since activeTab permission
  is sufficient for this extension

* Set default grid size to 5 when installing extension

* Added new option to toggle preview image visibility

RELEASE-NOTES.md

@@ -1,3 +1,14 @@
+## Version 1.3
+
+* Removed <all_urls> permission since activeTab permission
+  is sufficient for this extension
+
+* Set default grid size to 5 when installing extension
+
+* Added new option to toggle preview image visibility
+
+------------------------------
+
 ## Version 1.2:
 
 * Allow users to customize the default NxN grid size

background/jigsaw_bg_common_functions.js

@@ -57,3 +57,45 @@ function loadLinkAndRunJigSaw(thisURL) {
         loadJigSaw(active_tab.id, thisURL);
     });
 }
+
+function initializeOption(opt_name, opt_value) {
+
+    console.log(opt_name + ": " + opt_value);
+
+    let onGettingSuccess = function(result) {
+        if (browser.runtime.lastError) {
+            console.log(browser.runtime.lastError);
+        }
+        else {
+            if (Object.keys(result).length == 0) {
+                let onSetting = function() {
+                    if (browser.runtime.lastError) {
+                        console.log(browser.runtime.lastError);
+                    }
+                }
+                console.log({[opt_name] : opt_value});
+                let setting = browser.storage.local.set({ [opt_name] : opt_value }, onSetting);
+            }
+        }
+    }
+
+    // Try to get an option; if it has not been set ever,
+    // then try setting the option in the onGettingSuccess function
+    let getting = browser.storage.local.get(opt_name, onGettingSuccess);
+}
+
+function handleInstalled(details) {
+
+    let options_list = {jigsaw_default_size: "5",
+                        jigsaw_show_preview_image: true};
+
+    let option_keys = Object.keys(options_list);
+
+    for (let opt=0; opt < option_keys.length; opt++) {
+        let opt_name = option_keys[opt];
+        let opt_value = options_list[opt_name];
+        initializeOption(opt_name, opt_value);
+    }
+}
+
+browser.runtime.onInstalled.addListener(handleInstalled);

content_scripts/jigsaw.js

@@ -38,6 +38,7 @@ var JigSaw = {
     offset: 50,
     frameDiv: null,
     previewWidth: 100,
+    showPreviewImage: true,
     maxZIndex: 100,
     numBlink: 8,
     loading: false,
@@ -162,8 +163,12 @@ var JigSaw = {
         previewImage.style.setProperty("height", Math.round(JigSaw.previewWidth * JigSaw.height/JigSaw.width) + "px");
         previewImage.style.setProperty("top", JigSaw.offset + "px");
         previewImage.style.setProperty("left", JigSaw.offset + "px");
+        previewImage.style.setProperty("visibility", 'visible');
         JigSaw.base_div.appendChild(previewImage);
-
+        if (!JigSaw.showPreviewImage) {
+            previewImage.style.setProperty("visibility",'hidden');
+        }
+
     },
 
     // Create a piece; scale it to fit the frameDiv if it is larger than the frameDiv
@@ -293,6 +298,20 @@ var JigSaw = {
             }
         }
         return solved;
+    },
+
+
+    toggle_preview_image: function() {
+        let jigsaw_preview_image = document.getElementById('jigsaw_previewImage');
+        if (jigsaw_preview_image != undefined) {
+            JigSaw.showPreviewImage = !JigSaw.showPreviewImage;
+            if (jigsaw_preview_image.style.visibility == 'hidden') {
+                jigsaw_preview_image.style.visibility = 'visible';
+            }
+            else if (jigsaw_preview_image.style.visibility == 'visible') {
+                jigsaw_preview_image.style.visibility = 'hidden';
+            }
+        }
     }
 
 };
@@ -659,7 +678,7 @@ function jigsawize(request, sender, sendResponse) {
         return Promise.resolve({response: "Completed Loading JigSaw"});
     }
     else {
-        console.log("Meassage not implemented: " + request.jigsaw_action);
+        console.log("Message not implemented: " + request.jigsaw_action);
     }
 }
 
@@ -672,11 +691,13 @@ function getJigSawSizeAndLoad() {
             console.log(browser.runtime.lastError);
         }
         else {
+            console.log(result);
             let jigsaw_default_size = parseInt(result.jigsaw_default_size);
+            JigSaw.showPreviewImage = result.jigsaw_show_preview_image;
             loadJigSaw(jigsaw_default_size);
         }
     };
-    let gettings = browser.storage.local.get("jigsaw_default_size", onGetting);
+    let gettings = browser.storage.local.get(["jigsaw_default_size", "jigsaw_show_preview_image"], onGetting);
 }
 
 function loadJigSaw(jigsaw_default_size) {
@@ -695,10 +716,19 @@ function loadJigSaw(jigsaw_default_size) {
         jigsaw_base.setAttribute('class', 'jigsaw_base');
         document.body.appendChild(jigsaw_base);
 
+        // Create a div to hold the controls
+        let jigsaw_controls = document.createElement('div');
+        jigsaw_controls.setAttribute('id', 'jigsaw_controls');
+        jigsaw_controls.setAttribute('class', 'jigsaw_controls');
+        jigsaw_base.appendChild(jigsaw_controls);
+
+
         // Create SELECT option for jigsaw size
         //
         let jigsaw_select = document.createElement('select');
         jigsaw_select.setAttribute('id', 'jigsaw_select');
+        jigsaw_select.setAttribute('class', 'jigsaw_control_item');
+        jigsaw_select.setAttribute('title', 'Select JigSaw Grid Size');
 
         let selectedIdx = 0;
         let idx = 0;
@@ -714,24 +744,38 @@ function loadJigSaw(jigsaw_default_size) {
         }
         jigsaw_select.selectedIndex = selectedIdx;
 
-        jigsaw_base.appendChild(jigsaw_select);
+        jigsaw_controls.appendChild(jigsaw_select);
 
         // Create text input for user to enter URL
         //
         let jigsaw_input = document.createElement('input');
         jigsaw_input.setAttribute('id', 'jigsaw_url');
+        jigsaw_input.setAttribute('class', 'jigsaw_control_item');
+        jigsaw_input.setAttribute('title', 'Enter URL of Image');
         jigsaw_input.setAttribute('type', 'text');
         jigsaw_input.setAttribute('size', '100');
         jigsaw_input.value = thisURL;
-        jigsaw_base.appendChild(jigsaw_input);
+        jigsaw_controls.appendChild(jigsaw_input);
 
         // Create button to enter/submit
         let jigsaw_submit = document.createElement('input');
         jigsaw_submit.setAttribute('id', 'jigsaw_submit');
+        jigsaw_submit.setAttribute('class', 'jigsaw_control_item');
+        jigsaw_submit.setAttribute('title', 'Load Image URL and Create JigSaw Puzzle');
         jigsaw_submit.setAttribute('type', 'submit');
         jigsaw_submit.setAttribute('value', 'Load Image');
         jigsaw_submit.addEventListener('click', JigSaw.init);
-        jigsaw_base.appendChild(jigsaw_submit);
+        jigsaw_controls.appendChild(jigsaw_submit);
+
+        // Create button to toggle preview image visibility
+        let jigsaw_toggle_preview = document.createElement('input');
+        jigsaw_toggle_preview.setAttribute('id', 'jigsaw_toggle_preview');
+        jigsaw_toggle_preview.setAttribute('class', 'jigsaw_control_item');
+        jigsaw_toggle_preview.setAttribute('title', 'Show/Hide JigSaw Image Preview');
+        jigsaw_toggle_preview.setAttribute('type', 'submit');
+        jigsaw_toggle_preview.setAttribute('value', 'Toggle Preview Image');
+        jigsaw_toggle_preview.addEventListener('click', JigSaw.toggle_preview_image);
+        jigsaw_controls.appendChild(jigsaw_toggle_preview);
 
         console.log("Created basic elements. Now initializing the JigSaw puzzle");
     }

css/jigsaw.css

@@ -31,3 +31,19 @@ div.jigsaw_base
   position:fixed;
 }
 
+div.jigsaw_controls
+{
+  font-size: 1em;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.jigsaw_control_item
+{
+    margin: 5px 5px 5px 5px;
+    padding: 5px 5px 5px 5px;
+}
+
+input[type="text"] {
+  font-size: 1em;
+}

manifest.json

@@ -2,7 +2,7 @@
 
     "manifest_version": 2,
     "name": "__MSG_extensionName__",
-    "version": "1.2",
+    "version": "1.3",
 
     "description": "__MSG_extensionDescription__",
     "homepage_url": "https://www.github.com/ushnisha/jigsaw/",
@@ -21,7 +21,6 @@
     },
 
     "permissions": [
-        "<all_urls>",
         "activeTab",
         "storage",
         "contextMenus"

options/jigsaw_options.html

@@ -35,11 +35,13 @@
   <body>
     <div class="jigsaw_options_panel"> 
 
-        <h2>Select Jigsaw Size:</h2>
+        <h2>Select Jigsaw Options:</h2>
         <div class="jigsaw_options_section">
             <div class="jigsaw_options_row">
                 <label for="jigsaw_default_size">Jigsaw Default Size:</label>
                 <select id="jigsaw_default_size" class="icon">
+                    <option value="3">3</option>
+                    <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
@@ -48,6 +50,10 @@ <h2>Select Jigsaw Size:</h2>
                     <option value="10">10</option>
                 </select>
             </div>
+            <div class="jigsaw_options_row">
+                <label for="jigsaw_show_preview_image">Show Preview Image:</label>
+                <input id="jigsaw_show_preview_image" type="checkbox">
+            </div>
         </div>
 
     </div>

options/jigsaw_options.js

@@ -33,7 +33,8 @@ function saveOptions(e) {
     e.preventDefault();
 
     let current_settings = {
-        jigsaw_default_size: document.getElementById("jigsaw_default_size").value
+        jigsaw_default_size: document.getElementById("jigsaw_default_size").value,
+        jigsaw_show_preview_image: document.getElementById("jigsaw_show_preview_image").checked
     };
 
     console.log(current_settings);
@@ -42,7 +43,7 @@ function saveOptions(e) {
 
 function restoreOptions() {
 
-    let options_list = ["jigsaw_default_size"];
+    let options_list = ["jigsaw_default_size", "jigsaw_show_preview_image"];
 
     for (let opt=0; opt < options_list.length; opt++) {
 
@@ -58,7 +59,18 @@ function restoreOptions() {
                     let opt_name = keys[k];
                     let elem_name = opt_name;
                     if (opt_name == "jigsaw_default_size") {
-                        document.getElementById(elem_name).value = result.jigsaw_default_size;
+                        let idx = 0;
+                        let selOpts = document.getElementById(elem_name);
+                        for (let opt = 0; opt < selOpts.length; opt++) {
+                            if (selOpts[opt].value == result.jigsaw_default_size) {
+                                idx = opt;
+                                break;
+                            }
+                        }
+                        selOpts.selectedIndex = idx;
+                    }
+                    else if (opt_name == "jigsaw_show_preview_image") {
+                        document.getElementById(elem_name).checked = result.jigsaw_show_preview_image;
                     }
                 }
             }
@@ -70,3 +82,4 @@ function restoreOptions() {
 
 document.addEventListener("DOMContentLoaded", restoreOptions);
 document.getElementById("jigsaw_default_size").addEventListener("change", saveOptions);
+document.getElementById("jigsaw_show_preview_image").addEventListener("change", saveOptions);