feat: add show all results right click menu item (#276) (#279)

public/manifests/chrome.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Highlight or Hide Search Engine Results",
   "short_name": "HoHSER",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "Filter search engine results. Block unwanted results and highlight the favorite ones. For Google and other popular search engines.",
   "icons": {
     "16": "images/hohser-16.png",
@@ -26,8 +26,12 @@
   },
   "permissions": [
     "storage",
-    "tabs"
+    "tabs",
+    "contextMenus"
   ],
+  "background": {
+    "service_worker": "static/js/background.js"
+  },
   "content_scripts": [
     {
       "matches": [

public/manifests/firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Highlight or Hide Search Engine Results",
   "short_name": "HoHSER",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "developer": {
     "name": "Tomasz Pisarek",
     "url": "https://github.com/pistom"
@@ -29,8 +29,13 @@
   },
   "permissions": [
     "storage",
-    "tabs"
+    "tabs",
+    "contextMenus"
   ],
+  "background": {
+    "scripts": ["static/js/background.js"],
+    "persistent": false
+  },
   "content_scripts": [
     {
       "matches": [

src/background.ts

@@ -0,0 +1,87 @@
+import { CHROME, FIREFOX } from "./constants";
+
+// Detect if the browser is Firefox or Chrome
+const isFirefox = typeof browser !== 'undefined';
+const isChrome = typeof chrome !== 'undefined' && !isFirefox;
+
+export const browserName = typeof browser === 'undefined' ? typeof chrome === 'undefined' ?
+  null : CHROME : FIREFOX;
+const root = browserName === FIREFOX ? browser : chrome;
+
+function createContextMenu() {
+  const contextMenuId = "show-hidden-results";
+
+  if (isFirefox) {
+    root.contextMenus.create({
+      id: contextMenuId,
+      title: "Show all results",
+      checked: false,
+      type: "checkbox",
+      contexts: ["browser_action"]
+    });
+  } else if (isChrome) {
+    root.contextMenus.create({
+      id: contextMenuId,
+      title: "Show all results",
+      type: "checkbox",
+      checked: false,
+      contexts: ["action"]
+    });
+  }
+}
+
+if (isFirefox) {
+  browser.runtime.onInstalled.addListener(createContextMenu);
+  browser.contextMenus.onClicked.addListener(contextMenuClicked);
+} else if (isChrome) {
+  chrome.runtime.onInstalled.addListener(createContextMenu);
+  chrome.contextMenus.onClicked.addListener(contextMenuClicked);
+}
+
+function contextMenuClicked(info, tab) {
+  if (info.menuItemId === "show-hidden-results") {
+      root.storage.sync.get("options").then((data) => {
+        let options = data.options || {
+          showAll: false,
+          showCounter: false,
+          useLocalStorage: false,
+          highlightColors: [],
+          forceColors: true,
+          partialHideOpacity: 25,
+        };
+        if (options.showAll) {
+          options.showAll = false;
+        } else {
+          options.showAll = true;
+        }
+        root.contextMenus.update("show-hidden-results", { checked: !!options.showAll });
+        root.storage.sync.set({ options });
+      }
+    );
+  }
+}
+
+const setBadge = (state) => {
+  if (isChrome)
+    chrome.action.setBadgeText({ text: state ? "X" : "" });
+  if (isFirefox)
+    browser.browserAction.setBadgeText({ text: state ? "X" : "" });
+}
+
+root.storage.sync.get("options").then((data) => {
+  let options = data.options;
+  if (options && options.showAll) {
+    root.contextMenus.update("show-hidden-results", { checked: !!options.showAll });
+    setBadge(options.showAll);
+  }
+});
+
+root.storage.sync.onChanged.addListener((changes) => {
+  if (changes.options) {
+    let options = changes.options.newValue;
+    if (options) {
+      root.contextMenus.update("show-hidden-results", { checked: !!options.showAll });
+      setBadge(options.showAll);
+    }
+  }
+});

webpack.config.js

@@ -6,7 +6,8 @@ const WebpackHookPlugin = require('webpack-hook-plugin');
 module.exports = {
   entry: {
     popup: './src/popup.tsx',
-    content: './src/content.tsx'
+    content: './src/content.tsx',
+    background: './src/background.ts',
   },
   module: {
     rules: [