Add options toggle for search by image context menu item

bijij · Jan 1, 2022 · 0c512d0 · 0c512d0
1 parent 98e3a4a
commit 0c512d0
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 12 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -39,6 +39,14 @@
         "message": "Manually set button text:",
         "description": "Settings toggle enables manually set text for buttons rather than locale."
     },
+    "settingsToggle_contextMenu_searchByImage": {
+        "message": "Show \"Search by image\" context menu item:",
+        "description": "Setting toggles whether the \"Search by image\" context menu item should appear."
+    },
+    "settingsToggle_contextMenu_searchByImageNewTab": {
+        "message": "Open \"Search by Image\" context menu item results in a new tab:",
+        "description": "Setting toggles whether the \"Search by image\" context menu should open results in a new tab."
+    },
     "resetButton": {
         "message": "Reset",
         "description": "Text displayed on reset button."

diff --git a/css/options.css b/css/options.css
@@ -115,7 +115,8 @@ input[type="text"] {
 }
 
 .disabled {
-	display: none;
+	opacity: 50%;
+	pointer-events: none;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/html/options.html b/html/options.html
@@ -27,6 +27,18 @@
         <label for="show-globe-icon"></label>
     </div>
 
+    <div class="toggle">
+        <span data-localise="__MSG_settingsToggle_contextMenu_searchByImage__">Show "Search by Image" context menu item:</span>
+        <input type="checkbox" id="context-menu-search-by-image" />
+        <label for="context-menu-search-by-image"></label>
+    </div>
+
+    <div class="toggle" id="context-menu-search-by-image-new-tab-toggle">
+        <span data-localise="__MSG_settingsToggle_contextMenu_searchByImageNewTab__">Open "Search by Image" context menu item results in a new tab:</span>
+        <input type="checkbox" id="context-menu-search-by-image-new-tab" />
+        <label for="context-menu-search-by-image-new-tab"></label>
+    </div>
+
     <!-- Depercated for now.
     <div class="toggle">
         <span data-localise="__MSG_settingsToggle_subjectCopyright__">Hide "Images may be subject to Copyright" warning:</span>

diff --git a/html/popup.html b/html/popup.html
@@ -31,7 +31,7 @@
 
     <div id="about" class="center">
 
-        <a href="https://github.com/bijij" target="_blank"><span>© 2018 Joshua Butt</span></a>
+        <a href="https://github.com/bijij" target="_blank"><span>© 2018-present Joshua Butt</span></a>
         <br>
 
         <br>

diff --git a/js/background.js b/js/background.js
@@ -16,21 +16,30 @@ const defaultOptions = {
     'no-referrer': false,
     'button-text-view-image': '',
     'button-text-search-by-image': '',
+    'context-menu-search-by-image': true,
+    'context-menu-search-by-image-new-tab': false,
 };
 
 // Save default options to storage
 chrome.storage.sync.get('defaultOptions', function () {
     chrome.storage.sync.set({ defaultOptions });
 });
 
-// Setup "Search by image" context menu item
-chrome.contextMenus.create(
-    {
-        'id': 'ViewImage-SearchByImage',
-        'title': toI18n('__MSG_searchImage__'),
-        'contexts': ['image'],
+
+chrome.storage.sync.get(['options', 'defaultOptions'], function (storage) {
+    const options = Object.assign(storage.defaultOptions, storage.options);
+
+    // Setup "Search by image" context menu item
+    if (options['context-menu-search-by-image']) {
+        chrome.contextMenus.create(
+            {
+                'id': 'ViewImage-SearchByImage',
+                'title': toI18n('__MSG_searchImage__'),
+                'contexts': ['image'],
+            }
+        );
     }
-);
+});
 
 chrome.contextMenus.onClicked.addListener(
     (info, tab) => {
@@ -44,8 +53,18 @@ chrome.contextMenus.onClicked.addListener(
                 origins: [tab.url],
             }, (granted) => {
                 if (granted) {
-                    chrome.tabs.executeScript(tab.id, {
-                        code: `window.location.href = 'http://www.google.com/searchbyimage?image_url=${encodeURIComponent(info.srcUrl)}'`
+                    chrome.storage.sync.get(['options', 'defaultOptions'], function (storage) {
+                        const options = Object.assign(storage.defaultOptions, storage.options);
+
+                        if (options['context-menu-search-by-image-new-tab']) {
+                            chrome.tabs.executeScript(tab.id, {
+                                code: `window.open('http://www.google.com/searchbyimage?image_url=${encodeURIComponent(info.srcUrl)}', '_blank').focus();`
+                            });
+                        } else {
+                            chrome.tabs.executeScript(tab.id, {
+                                code: `window.location.href = 'http://www.google.com/searchbyimage?image_url=${encodeURIComponent(info.srcUrl)}';`
+                            });
+                        }
                     });
                 }
             });

diff --git a/js/options.js b/js/options.js
@@ -30,6 +30,15 @@ const save = function (object) {
 // Update visibility of page elements;
 const update_page = function () {
 
+    var showContextMenuToggle = document.getElementById('context-menu-search-by-image');
+    var openNewTabToggle = document.getElementById('context-menu-search-by-image-new-tab-toggle');
+
+    if (showContextMenuToggle.checked) {
+        openNewTabToggle.classList.remove('disabled');
+    } else {
+        openNewTabToggle.classList.add('disabled');
+    }
+
     var manualButtonToggle = document.getElementById('manually-set-button-text');
     var manualButtonText = document.getElementById('manual-toggle');
 
@@ -75,8 +84,28 @@ chrome.storage.sync.get('defaultOptions', function (storage) {
     load();
 });
 
+const update_context_menu = function (enabled) {
+    if (enabled) {
+        chrome.contextMenus.create(
+            {
+                'id': 'ViewImage-SearchByImage',
+                'title': toI18n('__MSG_searchImage__'),
+                'contexts': ['image'],
+            }
+        );
+    } else {
+        chrome.contextMenus.remove('ViewImage-SearchByImage');
+    }
+}
+
 // On change, save
 document.addEventListener('change', event => {
+
+    // Update the visibility of the context menu
+    if (event.target.id === 'context-menu-search-by-image') {
+        update_context_menu(event.target.checked);
+    }
+
     switch (event.target.type) {
         case ('checkbox'):
             options[event.target.id] = event.target.checked;

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "__MSG_appName__",
-    "version": "3.6.0",
+    "version": "3.6.1",
     "description": "__MSG_appDesc__",
     "default_locale": "en",
     "icons": {