Merge pull request #50 from penge/context-menu

Add context menu to block site

Author: penge

manifest.json

@@ -14,7 +14,7 @@
     }
   },
   "options_page": "options.html",
-  "permissions": ["storage", "webNavigation"],
+  "permissions": ["storage", "webNavigation", "contextMenus"],
   "background": {
     "service_worker": "background.mjs",
     "type": "module"

src/background.ts

@@ -1,12 +1,8 @@
 import initStorage from "./storage/init";
-import storage from "./storage";
-import findRule from "./helpers/find-rule";
-import * as counterHelper from "./helpers/counter";
-import getBlockedUrl from "./helpers/get-blocked-url";
+import blockSite from "./helpers/block-site";
+import createContextMenu from "./helpers/create-context-menu";
 
-chrome.runtime.onInstalled.addListener(() => {
-  initStorage();
-});
+initStorage(createContextMenu);
 
 chrome.action.onClicked.addListener(() => {
   chrome.runtime.openOptionsPage();
@@ -18,42 +14,5 @@ chrome.webNavigation.onBeforeNavigate.addListener((details) => {
     return;
   }
 
-  storage.get(["enabled", "blocked"], ({ enabled, blocked }) => {
-    if (!enabled || blocked.length === 0) {
-      return;
-    }
-
-    const foundRule = findRule(url, blocked);
-    if (!foundRule || foundRule.type === "allow") {
-      storage.get(["counter"], ({ counter }) => {
-        counterHelper.flushObsoleteEntries({ blocked, counter });
-        storage.set({ counter });
-      });
-      return;
-    }
-
-    storage.get(["counter", "counterShow", "counterPeriod", "resolution"], ({ counter, counterShow, counterPeriod, resolution }) => {
-      counterHelper.flushObsoleteEntries({ blocked, counter });
-      const count = counterHelper.add(foundRule.path, timeStamp, {
-        counter,
-        countFromTimeStamp: counterHelper.counterPeriodToTimeStamp(counterPeriod, new Date().getTime()),
-      });
-      storage.set({ counter });
-
-      switch (resolution) {
-      case "CLOSE_TAB":
-        chrome.tabs.remove(tabId);
-        break;
-      case "SHOW_BLOCKED_INFO_PAGE": {
-        chrome.tabs.update(tabId, {
-          url: getBlockedUrl({
-            url,
-            rule: foundRule.path,
-            countParams: counterShow ? { count, period: counterPeriod } : undefined },
-          )},
-        );
-        break;
-      }}
-    });
-  });
+  blockSite({ tabId, url, timeStamp });
 });

src/helpers/block-site.ts

@@ -0,0 +1,53 @@
+import storage from "../storage";
+import findRule from "./find-rule";
+import * as counterHelper from "./counter";
+import getBlockedUrl from "./get-blocked-url";
+
+interface BlockSiteOptions {
+  tabId: number
+  url: string
+  timeStamp: number
+}
+
+export default (options: BlockSiteOptions) => {
+  const { tabId, url, timeStamp } = options;
+
+  storage.get(["enabled", "blocked"], ({ enabled, blocked }) => {
+    if (!enabled || blocked.length === 0) {
+      return;
+    }
+
+    const foundRule = findRule(url, blocked);
+    if (!foundRule || foundRule.type === "allow") {
+      storage.get(["counter"], ({ counter }) => {
+        counterHelper.flushObsoleteEntries({ blocked, counter });
+        storage.set({ counter });
+      });
+      return;
+    }
+
+    storage.get(["counter", "counterShow", "counterPeriod", "resolution"], ({ counter, counterShow, counterPeriod, resolution }) => {
+      counterHelper.flushObsoleteEntries({ blocked, counter });
+      const count = counterHelper.add(foundRule.path, timeStamp, {
+        counter,
+        countFromTimeStamp: counterHelper.counterPeriodToTimeStamp(counterPeriod, new Date().getTime()),
+      });
+      storage.set({ counter });
+
+      switch (resolution) {
+      case "CLOSE_TAB":
+        chrome.tabs.remove(tabId);
+        break;
+      case "SHOW_BLOCKED_INFO_PAGE": {
+        chrome.tabs.update(tabId, {
+          url: getBlockedUrl({
+            url,
+            rule: foundRule.path,
+            countParams: counterShow ? { count, period: counterPeriod } : undefined },
+          )},
+        );
+        break;
+      }}
+    });
+  });
+};

src/helpers/create-context-menu.ts

@@ -0,0 +1,56 @@
+import storage from "../storage";
+import blockSite from "./block-site";
+import normalizeUrl from "./normalize-url";
+
+const createContextMenu = () => {
+  const parentId = chrome.contextMenus.create({
+    id: "block_site",
+    title: "Block Site",
+    documentUrlPatterns: ["https://*/*", "http://*/*"],
+  });
+
+  const blockThisSiteId = "block_this_site";
+  chrome.contextMenus.create({
+    parentId,
+    id: blockThisSiteId,
+    title: "Block this site",
+  });
+
+  chrome.contextMenus.onClicked.addListener((info, tab) => {
+    const tabId = tab?.id;
+    if (!tabId || info.menuItemId !== blockThisSiteId) {
+      return;
+    }
+
+    storage.get(["blocked"], ({ blocked }) => {
+      const url = info.pageUrl;
+      const normalizedUrl = normalizeUrl(url);
+      const updatedBlocked = [...blocked, normalizedUrl];
+
+      storage.set({ blocked: updatedBlocked }, () => {
+        const timeStamp = Date.now();
+        blockSite({ tabId, url, timeStamp });
+      });
+    });
+  });
+};
+
+export default () => {
+  storage.get(["enabled"], ({ enabled }) => {
+    chrome.contextMenus.removeAll(() => {
+      if (enabled) {
+        createContextMenu();
+      }
+    });
+
+    chrome.storage.local.onChanged.addListener((changes) => {
+      if (changes["enabled"]) {
+        chrome.contextMenus.removeAll(() => {
+          if (changes["enabled"].newValue) {
+            createContextMenu();
+          }
+        });
+      }
+    });
+  });
+};

src/options.ts

@@ -81,13 +81,11 @@ window.addEventListener("DOMContentLoaded", () => {
     document.body.classList.add("ready");
   });
 
-  chrome.storage.onChanged.addListener((changes, namespace) => {
-    if (namespace === "local") {
-      keys.forEach((key) => {
-        if (changes[key]) {
-          UI.init({ [key]: changes[key].newValue });
-        }
-      });
-    }
+  chrome.storage.local.onChanged.addListener((changes) => {
+    keys.forEach((key) => {
+      if (changes[key]) {
+        UI.init({ [key]: changes[key].newValue });
+      }
+    });
   });
 });

src/storage/index.ts

@@ -2,8 +2,8 @@ import { Schema } from "./schema";
 
 export * from "./schema";
 
-const set = <T extends Partial<Schema>>(items: T) => {
-  chrome.storage.local.set(items);
+const set = <T extends Partial<Schema>>(items: T, callback?: () => void) => {
+  chrome.storage.local.set(items, callback);
 };
 
 const get = <T extends keyof Schema>(keys: T[], callback: (items: Pick<Schema, T>) => void) => {

src/storage/init.ts

@@ -15,11 +15,13 @@ export const getRevisitedSchema = (local: Partial<Schema> | Record<string, unkno
   return revisitedSchema;
 };
 
-export default () => {
+export default (callback: () => void) => {
   storage.getAll((local) => {
     const revisitedSchema = getRevisitedSchema(local);
     if (Object.keys(revisitedSchema).length) {
-      storage.set(revisitedSchema);
+      storage.set(revisitedSchema, callback);
+      return;
     }
+    callback();
   });
 };