Merge pull request #58 from penge/optional-context-menu

Make context menu optional

Author: penge

public/options.html

@@ -24,6 +24,14 @@ <h1>
         <option value="NO">No</option>
       </select>
     </div>
+
+    <div id="context-menu-option" class="option">
+      <label>Context menu?</label>
+      <select id="context-menu">
+        <option value="YES">Yes</option>
+        <option value="NO">No</option>
+      </select>
+    </div>
   </div>
 
   <p>Sites to block (prepend <code>!</code> to exclude)</p>

src/background.ts

@@ -1,24 +1,34 @@
 import initStorage from "./storage/init";
 import storage from "./storage";
-import createContextMenu from "./helpers/create-context-menu";
+import recreateContextMenu from "./helpers/recreate-context-menu";
 import blockSite from "./helpers/block-site";
 
 let __enabled: boolean;
+let __contextMenu: boolean;
 let __blocked: string[];
 
 initStorage().then(() => {
-  createContextMenu();
-
-  storage.get(["enabled", "blocked"]).then(({ enabled, blocked }) => {
+  storage.get(["enabled", "contextMenu", "blocked"]).then(({ enabled, contextMenu, blocked }) => {
     __enabled = enabled;
+    __contextMenu = contextMenu;
     __blocked = blocked;
+
+    recreateContextMenu(__enabled && __contextMenu);
   });
 
   chrome.storage.local.onChanged.addListener((changes) => {
     if (changes["enabled"]) {
       __enabled = changes["enabled"].newValue as boolean;
     }
 
+    if (changes["contextMenu"]) {
+      __contextMenu = changes["contextMenu"].newValue as boolean;
+    }
+
+    if (changes["enabled"] || changes["contextMenu"]) {
+      recreateContextMenu(__enabled && __contextMenu);
+    }
+
     if (changes["blocked"]) {
       __blocked = changes["blocked"].newValue as string[];
     }

src/helpers/create-context-menu.ts src/helpers/recreate-context-menu.ts

@@ -33,22 +33,10 @@ const createContextMenu = () => {
   });
 };
 
-export default () => {
-  storage.get(["enabled"]).then(({ enabled }) => {
-    chrome.contextMenus.removeAll(() => {
-      if (enabled) {
-        createContextMenu();
-      }
-    });
-
-    chrome.storage.local.onChanged.addListener((changes) => {
-      if (changes["enabled"]) {
-        chrome.contextMenus.removeAll(() => {
-          if (changes["enabled"].newValue as boolean) {
-            createContextMenu();
-          }
-        });
-      }
-    });
+export default (meetsCreateCondition: boolean) => {
+  chrome.contextMenus.removeAll(() => {
+    if (meetsCreateCondition) {
+      createContextMenu();
+    }
   });
 };

src/options.ts

@@ -4,8 +4,9 @@ import storage, {
 
 const UI = (() => {
   const elements = {
-    blockedList: document.getElementById("blocked-list") as HTMLTextAreaElement,
     enabled: document.getElementById("enabled") as HTMLSelectElement,
+    contextMenu: document.getElementById("context-menu") as HTMLSelectElement,
+    blockedList: document.getElementById("blocked-list") as HTMLTextAreaElement,
     resolution: document.getElementById("resolution") as HTMLSelectElement,
     counterShow: document.getElementById("counter-show") as HTMLSelectElement,
     counterPeriod: document.getElementById("counter-period") as HTMLSelectElement,
@@ -19,16 +20,21 @@ const UI = (() => {
   const getEventTargetValue = (event: Event) => (event.target as HTMLTextAreaElement | HTMLSelectElement).value;
   const stringToBlocked = (string: string) => string.split("\n").map((s) => s.trim()).filter(Boolean);
 
-  elements.blockedList.addEventListener("input", (event) => {
-    const blocked = stringToBlocked(getEventTargetValue(event));
-    storage.set({ blocked });
-  });
-
   elements.enabled.addEventListener("change", (event) => {
     const enabled = stringToBoolean(getEventTargetValue(event));
     storage.set({ enabled });
   });
 
+  elements.contextMenu.addEventListener("change", (event) => {
+    const contextMenu = stringToBoolean(getEventTargetValue(event));
+    storage.set({ contextMenu });
+  });
+
+  elements.blockedList.addEventListener("input", (event) => {
+    const blocked = stringToBlocked(getEventTargetValue(event));
+    storage.set({ blocked });
+  });
+
   elements.resolution.addEventListener("change", (event) => {
     const resolution = getEventTargetValue(event) as Resolution;
     storage.set({ resolution });
@@ -45,17 +51,21 @@ const UI = (() => {
   });
 
   const init = <T extends Partial<Schema>>(items: T) => {
+    if (items.enabled !== undefined) {
+      elements.enabled.value = booleanToString(items.enabled);
+    }
+
+    if (items.contextMenu !== undefined) {
+      elements.contextMenu.value = booleanToString(items.contextMenu);
+    }
+
     if (items.blocked !== undefined) {
       const valueAsBlocked = stringToBlocked(elements.blockedList.value);
       if (JSON.stringify(valueAsBlocked) !== JSON.stringify(items.blocked)) {
         elements.blockedList.value = items.blocked.join("\r\n");
       }
     }
 
-    if (items.enabled !== undefined) {
-      elements.enabled.value = booleanToString(items.enabled);
-    }
-
     if (items.resolution !== undefined) {
       elements.resolution.value = items.resolution;
       RESOLUTIONS.forEach((oneResolution) => {
@@ -78,7 +88,14 @@ const UI = (() => {
 })();
 
 window.addEventListener("DOMContentLoaded", () => {
-  const keys: (keyof Schema)[] = ["blocked", "enabled", "resolution", "counterShow", "counterPeriod"];
+  const keys: (keyof Schema)[] = [
+    "enabled",
+    "contextMenu",
+    "blocked",
+    "resolution",
+    "counterShow",
+    "counterPeriod",
+  ];
 
   storage.get(keys).then((local) => {
     UI.init(local);

src/storage/__tests__/init.test.ts

@@ -10,6 +10,7 @@ test("getRevisitedSchema() returns defaults for any invalid attribute", () => {
     enabled: DEFAULTS.enabled,
     blocked: DEFAULTS.blocked,
   })).toEqual({
+    contextMenu: false,
     counter: DEFAULTS.counter,
     counterShow: DEFAULTS.counterShow,
     counterPeriod: DEFAULTS.counterPeriod,
@@ -19,8 +20,10 @@ test("getRevisitedSchema() returns defaults for any invalid attribute", () => {
   expect(getRevisitedSchema({
     ...DEFAULTS,
     enabled: "YES", // invalid
+    contextMenu: "YES" // invalid
   })).toEqual({
     enabled: DEFAULTS.enabled,
+    contextMenu: DEFAULTS.contextMenu,
   } as Partial<Schema>);
 
   expect(getRevisitedSchema({

src/storage/schema.ts

@@ -15,6 +15,7 @@ export type CounterPeriod = typeof COUNTER_PERIODS[number];
 
 export interface Schema {
   enabled: boolean
+  contextMenu: boolean
   blocked: string[]
   counter: Record<string, number[]>
   counterShow: boolean
@@ -24,6 +25,7 @@ export interface Schema {
 
 export const DEFAULTS: Readonly<Schema> = {
   enabled: false,
+  contextMenu: false,
   blocked: [],
   counter: {},
   counterShow: false,
@@ -33,6 +35,7 @@ export const DEFAULTS: Readonly<Schema> = {
 
 export const VALIDATORS: Readonly<Record<keyof Schema, (value: unknown) => boolean>> = {
   enabled: (value) => typeof value === "boolean",
+  contextMenu: (value) => typeof value === "boolean",
   blocked: (value) => Array.isArray(value),
   counter: (value) => typeof value === "object",
   counterShow: (value) => typeof value === "boolean",