diff --git a/public/manifests/chrome.json b/public/manifests/chrome.json index c8b5100..fe62ab0 100644 --- a/public/manifests/chrome.json +++ b/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": [ diff --git a/public/manifests/firefox.json b/public/manifests/firefox.json index df2c922..7b50112 100644 --- a/public/manifests/firefox.json +++ b/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": [ diff --git a/src/background.ts b/src/background.ts new file mode 100644 index 0000000..00b340a --- /dev/null +++ b/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); + } + } +}); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 8a4396e..c56436e 100644 --- a/webpack.config.js +++ b/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: [