* Updated to support Manifest v3

* Added a masking image to hide the puzzle when timer is paused * Updated copyright information
ushnisha · May 31, 2024 · 78ee6b3 · 78ee6b3
1 parent 0f235c9
commit 78ee6b3
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ puzzle.
 ## License & Copyright:
 
 JigSaw is provided under AGPLv3 license.
-Copyright (C) 2017-2020 Arun Kunchithapatham
+Copyright (C) 2017-2024 Arun Kunchithapatham
 
 ## Feedback:
 

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,3 +1,13 @@
+## Version 1.5
+
+* Updated to support Manifest v3
+
+* Added a masking image to hide the puzzle when timer is paused
+
+* Updated copyright information
+
+------------------------------
+
 ## Version 1.4
 
 * Added timer to measure time taken to solve the puzzle

diff --git a/background/jigsaw_bg_common_functions.js b/background/jigsaw_bg_common_functions.js
@@ -2,7 +2,7 @@
 /*
  *  JigSaw is html/javascript code that creates a jigsaw from a link.
  *  It assumes that the user has provided a valid link to an image file.
- *  Copyright (C) 2017-2020 Arun Kunchithapatham
+ *  Copyright (C) 2017-2024 Arun Kunchithapatham
  *
  *  This file is part of JigSaw.
  *
@@ -29,9 +29,9 @@ function loadJigSaw(tabId, thisURL) {
 
     let success = true;
 
-    browser.tabs.insertCSS(tabId, { matchAboutBlank: false, file: "/css/jigsaw.css", runAt: "document_end"}, function() {
-        browser.tabs.executeScript(tabId, { matchAboutBlank: false, file: "/js-utils/timer/Timer.js", runAt: "document_end"}, function() {
-            browser.tabs.executeScript(tabId, { matchAboutBlank: false, file: "/content_scripts/jigsaw.js", runAt: "document_end"}, function() {
+    browser.scripting.insertCSS( {target: {tabId: tabId}, files: ["/css/jigsaw.css"] }, function() {
+        browser.scripting.executeScript( {target: {tabId: tabId}, files: ["/js-utils/timer/Timer.js"] }, function() {
+            browser.scripting.executeScript( {target: {tabId: tabId}, files: ["/content_scripts/jigsaw.js"] }, function() {
                 let onSendMessage = function(response) {
                     if (browser.runtime.lastError) {
                         console.log(browser.runtime.lastError);
@@ -98,6 +98,8 @@ function handleInstalled(details) {
         let opt_value = options_list[opt_name];
         initializeOption(opt_name, opt_value);
     }
+
+    createContextMenus();
 }
 
 browser.runtime.onInstalled.addListener(handleInstalled);
diff --git a/background/jigsaw_bg_context_menu.js b/background/jigsaw_bg_context_menu.js
@@ -2,7 +2,7 @@
 /*
  *  JigSaw is html/javascript code that creates a jigsaw from a link.
  *  It assumes that the user has provided a valid link to an image file.
- *  Copyright (C) 2017-2020 Arun Kunchithapatham
+ *  Copyright (C) 2017-2024 Arun Kunchithapatham
  *
  *  This file is part of JigSaw.
  *
@@ -27,21 +27,25 @@ var browser = browser || chrome;
 
 let runStr = browser.i18n.getMessage("extensionRunJigSawFromContextMenu");
 
-// browser.contextMenus API not supported on AndroidOS
-//
-let gettingInfoPOS = browser.runtime.getPlatformInfo(function (info) {
-    if (info.os != "android") {
-        browser.contextMenus.create({
-          id: "run_jigsaw",
-          title: runStr,
-          type: "normal",
-          contexts: ["image"]
-        });
+function createContextMenus() { // called from runtime.onInstalled handler
+	                        // in jigsaw_bg_common_functions.js
 
-        browser.contextMenus.onClicked.addListener(function(info, tab) {
-            if (info.menuItemId == "run_jigsaw") {
-                loadLinkAndRunJigSaw(info.srcUrl);
-            }
-        });
-    }
-});
+    // browser.contextMenus API not supported on AndroidOS
+    //
+    let gettingInfoPOS = browser.runtime.getPlatformInfo(function (info) {
+        if (info.os != "android") {
+            browser.contextMenus.create({
+              id: "run_jigsaw",
+              title: runStr,
+              type: "normal",
+              contexts: ["image"]
+            });
+
+            browser.contextMenus.onClicked.addListener(function(info, tab) {
+                if (info.menuItemId == "run_jigsaw") {
+                    loadLinkAndRunJigSaw(info.srcUrl);
+                }
+            });
+        }
+    });
+}
diff --git a/content_scripts/jigsaw.js b/content_scripts/jigsaw.js
@@ -2,7 +2,7 @@
 /*
  *  JigSaw is html/javascript code that creates a jigsaw from a link.
  *  It assumes that the user has provided a valid link to an image file.
- *  Copyright (C) 2015-2020 Arun Kunchithapatham
+ *  Copyright (C) 2015-2024 Arun Kunchithapatham
  *
  *  This file is part of JigSaw.
  *
@@ -43,6 +43,7 @@ var JigSaw = {
     numBlink: 8,
     loading: false,
     timer: null,
+    jigsaw_mask: null,
     base_div: null,
 
     init: function() {
@@ -115,9 +116,15 @@ var JigSaw = {
             canvas.parentNode.removeChild(canvas);
         }
         if (document.getElementById('jigsaw_previewImage') != undefined) {
-            previewImage = document.getElementById('jigsaw_previewImage');
+            let previewImage = document.getElementById('jigsaw_previewImage');
             previewImage.parentNode.removeChild(previewImage);
         }
+
+        if (document.getElementById('jigsaw_mask') != undefined) {
+            let jigsaw_mask = document.getElementById('jigsaw_mask');
+            jigsaw_mask.parentNode.removeChild(jigsaw_mask);
+        }
+
         JigSaw.pieces = new Array();
     },
 
@@ -178,6 +185,16 @@ var JigSaw = {
             previewImage.style.setProperty("visibility",'hidden');
         }
 
+        // Create the mask div to hide the puzzle when the timer is paused
+        let jigsaw_mask = document.createElement('div');
+        jigsaw_mask.setAttribute('id', 'jigsaw_mask');
+        jigsaw_mask.setAttribute('class', 'jigsaw_mask');
+        jigsaw_mask.style.setProperty('top', JigSaw.offset + "px");
+        jigsaw_mask.style.setProperty('height', (window.innerHeight - JigSaw.offset) + "px");
+        jigsaw_mask.style.setProperty('width', window.innerWidth + "px");
+        JigSaw.jigsaw_mask = jigsaw_mask;
+        JigSaw.base_div.appendChild(jigsaw_mask);
+
     },
 
     // Create a piece; scale it to fit the frameDiv if it is larger than the frameDiv
@@ -325,6 +342,12 @@ var JigSaw = {
 
     pause_resume_timer: function() {
         JigSaw.timer.pause_resume();
+        if (JigSaw.timer.paused) {
+            JigSaw.jigsaw_mask.style.setProperty('visibility', 'visible');
+        }
+        else {
+            JigSaw.jigsaw_mask.style.setProperty('visibility', 'hidden');
+        }
     }
 
 };
@@ -606,7 +629,7 @@ Piece.prototype.flash = function(borderStyle) {
                 up = false;
             }
             else {
-                canvas.style.zIndex = 9999999;
+                canvas.style.zIndex = 9999998;
                 canvas.style.setProperty('border', borderStyle);
                 up = true; 
             }

diff --git a/css/jigsaw.css b/css/jigsaw.css
@@ -2,7 +2,7 @@
 /*
  *  JigSaw is html/javascript code that creates a jigsaw from a link.
  *  It assumes that the user has provided a valid link to an image file.
- *  Copyright (C) 2017-2020 Arun Kunchithapatham
+ *  Copyright (C) 2017-2024 Arun Kunchithapatham
  *
  *  This file is part of JigSaw.
  *
@@ -53,6 +53,15 @@ div.jigsaw_control_item
     text-align:center;
 }
 
+div.jigsaw_mask
+{
+    position: fixed;
+    background-color: silver;
+    opacity: 0.9;
+    z-index: 9999999;
+    visibility: hidden;
+}
+
 input[type="text"] {
   font-size: 1em;
 }
diff --git a/js-utils b/js-utils
diff --git a/manifest.json b/manifest.json
@@ -1,16 +1,16 @@
 {
 
-    "manifest_version": 2,
+    "manifest_version": 3,
     "name": "__MSG_extensionName__",
-    "version": "1.4",
+    "version": "1.5",
 
     "description": "__MSG_extensionDescription__",
     "homepage_url": "https://www.github.com/ushnisha/jigsaw/",
 
-    "applications": {
+    "browser_specific_settings": {
         "gecko": {
           "id": "[email protected]",
-          "strict_min_version": "57.0"
+          "strict_min_version": "109.0"
         }
     },
 
@@ -23,12 +23,18 @@
     "permissions": [
         "activeTab",
         "storage",
+	"scripting",
         "contextMenus"
     ],
 
     "web_accessible_resources": [
-        "css/jigsaw.css",
-        "icons/*.png"
+        {
+            "resources": [
+                "css/jigsaw.css",
+                "icons/*.png"
+            ],
+            "matches": ["<all_urls>"]
+        }
     ],
 
     "options_ui": {

diff --git a/options/jigsaw_options.css b/options/jigsaw_options.css
@@ -4,7 +4,7 @@
  * an image link
  **********************************************************************
 
-   Copyright (c) 2017-2020 Arun Kunchithapatham
+   Copyright (c) 2017-2024 Arun Kunchithapatham
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by

diff --git a/options/jigsaw_options.html b/options/jigsaw_options.html
@@ -4,7 +4,7 @@
  * an image link
  **********************************************************************
 
-   Copyright (c) 2017-2020 Arun Kunchithapatham
+   Copyright (c) 2017-2024 Arun Kunchithapatham
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by

diff --git a/options/jigsaw_options.js b/options/jigsaw_options.js
@@ -4,7 +4,7 @@
  * an image link
  **********************************************************************
 
-   Copyright (c) 2017-2020 Arun Kunchithapatham
+   Copyright (c) 2017-2024 Arun Kunchithapatham
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by