From 78ee6b3abdb7ade0267524e0f77526783d58ebe4 Mon Sep 17 00:00:00 2001 From: Arun Kunchithapatham Date: Fri, 31 May 2024 02:28:26 -0500 Subject: [PATCH] * Updated to support Manifest v3 * Added a masking image to hide the puzzle when timer is paused * Updated copyright information --- README.md | 2 +- RELEASE-NOTES.md | 10 ++++++ background/jigsaw_bg_common_functions.js | 10 +++--- background/jigsaw_bg_context_menu.js | 40 +++++++++++++----------- content_scripts/jigsaw.js | 29 +++++++++++++++-- css/jigsaw.css | 11 ++++++- js-utils | 2 +- manifest.json | 18 +++++++---- options/jigsaw_options.css | 2 +- options/jigsaw_options.html | 2 +- options/jigsaw_options.js | 2 +- 11 files changed, 91 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 2cefe88..5c0d904 100644 --- 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 index 3afa2c0..d083aba 100644 --- 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 index d92eb1c..d0afb26 100644 --- 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 index ac90e8a..da60b3a 100644 --- 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 index a35fd7a..44d97b1 100644 --- 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 index e47e85d..5529ff8 100644 --- 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 index 7a9329c..44a0cae 160000 --- a/js-utils +++ b/js-utils @@ -1 +1 @@ -Subproject commit 7a9329c16370f074b17166d7828cde0c6c2010e9 +Subproject commit 44a0caef608e928057968bca4b76780e0293642a diff --git a/manifest.json b/manifest.json index 492bec7..6cc2f3f 100644 --- 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": "jigsaw@ushnisha.com", - "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": [""] + } ], "options_ui": { diff --git a/options/jigsaw_options.css b/options/jigsaw_options.css index 72b561b..631a2d3 100644 --- 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 index 3cdbdec..59ee5b0 100644 --- 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 index c23e2f9..01901a2 100644 --- 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