feat: setting option to disable custom context menus

Author: arnav-kr

extension/js/content.js

@@ -71,7 +71,7 @@ SOFTWARE.
     }
     else {
       // legacy support
-      if (!data[bucket].hasOwnProperty("themes") || !data[bucket].hasOwnProperty("colorScheme") || !data[bucket].hasOwnProperty("wordWrap") || !data[bucket].hasOwnProperty("sortingOrder") || !data[bucket].hasOwnProperty("rawUnicodeEscapes")) {
+      if (!data[bucket].hasOwnProperty("themes") || !data[bucket].hasOwnProperty("colorScheme") || !data[bucket].hasOwnProperty("wordWrap") || !data[bucket].hasOwnProperty("sortingOrder") || !data[bucket].hasOwnProperty("rawUnicodeEscapes") || !data[bucket].hasOwnProperty("contextMenus")) {
         // still has old data format, update it to new format
         let newDataFormat = Object.assign({}, globalThis.sharedData.defaultOptions);
         if (data[bucket].themeMode == "auto") {
@@ -134,6 +134,7 @@ SOFTWARE.
   }
 
   function setupContextMenu() {
+    if(!options.contextMenus) return;
     window.addEventListener("contextmenu", function (e) {
       if (window.getComputedStyle(contextMenu).visibility === "visible") return false;
       e.preventDefault();

extension/js/globals.js

@@ -11,6 +11,7 @@ const defaultOptions = {
   "colorScheme": "auto",
   "wordWrap": false,
   "rawUnicodeEscapes": false,
+  "contextMenus": false,
   "sortingOrder": "unchanged",
   "hotkeys": {
     "parsed": "p",

extension/js/options.js

@@ -5,6 +5,7 @@ var tabEl,
   wordWrapEl,
   sortingOrderEl,
   rawUnicodeEscapesEl,
+  contextMenusEl,
   options = {},
   bucket = "JSON_FORMATTER_OPTIONS";
 
@@ -16,7 +17,8 @@ window.addEventListener("load", async () => {
   darkThemeEl = document.getElementById("dark_theme");
   wordWrapEl = document.getElementById("word_wrap");
   sortingOrderEl = document.getElementById("sorting_order");
-  rawUnicodeEscapesEl = document.getElementById("raw_unicode_escapes");
+  rawUnicodeEscapesEl = document.getElementById("raw_unicode_escapes")
+  contextMenusEl = document.getElementById("context_menus");
 
   await fetchExtensionSettings();
   console.log(options);
@@ -46,6 +48,7 @@ window.addEventListener("load", async () => {
     wordWrapEl.value = options.wordWrap;
     sortingOrderEl.value = options.sortingOrder;
     rawUnicodeEscapesEl.value = options.rawUnicodeEscapes;
+    contextMenusEl.value = options.contextMenus;
   }
   async function fetchExtensionSettings() {
     // Get Options
@@ -57,9 +60,10 @@ window.addEventListener("load", async () => {
       Object.assign(options, globalThis.sharedData.defaultOptions);
     }
     else {
-      if (!data[bucket].hasOwnProperty("themes") || !data[bucket].hasOwnProperty("colorScheme") || !data[bucket].hasOwnProperty("wordWrap") || !data[bucket].hasOwnProperty("sortingOrder")) {
+      if (!data[bucket].hasOwnProperty("themes") || !data[bucket].hasOwnProperty("colorScheme") || !data[bucket].hasOwnProperty("wordWrap") || !data[bucket].hasOwnProperty("sortingOrder") || !data[bucket].hasOwnProperty("rawUnicodeEscapes") || !data[bucket].hasOwnProperty("contextMenus")) {
         // still has old data format, update it to new format
         let newDataFormat = Object.assign({}, globalThis.sharedData.defaultOptions);
+        console.log(newDataFormat);
         if (data[bucket].themeMode == "auto") {
           newDataFormat.colorScheme = "auto";
         }
@@ -71,8 +75,16 @@ window.addEventListener("load", async () => {
             newDataFormat.colorScheme = "light";
           }
         }
-        newDataFormat.tab = data[bucket].defaultTab;
+        if (data[bucket].defaultTab) {
+          newDataFormat.tab = data[bucket].defaultTab;
+        }
+
+        delete data[bucket].themeMode;
+        delete data[bucket].currentTheme;
+        delete data[bucket].defaultTab;
 
+        newDataFormat = { ...newDataFormat, ...data[bucket] };
+        console.log(newDataFormat);
         Object.assign(options, newDataFormat);
         await chrome.storage.local.set({ [bucket]: newDataFormat });
       }
@@ -146,4 +158,10 @@ window.addEventListener("load", async () => {
     options.rawUnicodeEscapes = e.target.value == "true" ? true : false;
     await chrome.storage.local.set({ [bucket]: options });
   });
+
+  contextMenusEl.addEventListener("input", async (e) => {
+    if (options.contextMenus == e.target.value) return;
+    options.contextMenus = e.target.value == "true" ? true : false;
+    await chrome.storage.local.set({ [bucket]: options });
+  });
 });

extension/options.html

@@ -154,6 +154,20 @@ <h2 id="header" class="title">Settings</h2>
           </select>
         </div>
       </div>
+
+      <!-- Context Menus -->
+      <div class="item" title="Enable/Disable Right-Click Context Menus">
+        <div class="item-inner">
+          <div class="label">
+            <span>Context Menus</span>
+          </div>
+          <select class="md-select" id="context_menus" aria-label="Enable/Disable Right-Click Context Menus"
+            title="Enable/Disable Right-Click Context Menus">
+            <option value="true">Enabled</option>
+            <option value="false" selected>Disabled</option>
+          </select>
+        </div>
+      </div>
       <div class="hr"></div>
     </div>
   </div>