Chrome support & manifest V3 support changes

+ Added support for chrome
+ Changes for manifest V3
= bgScript URLSearchParams was replaced with URL due to USP not working in Chrome MV3
= setBadgeText was separated into new function because browserAction was renamed to action in MV3
= Firefox remains on V2 because of the green dot permissions issue https://bugzilla.mozilla.org/show_bug.cgi?id=1851083
= Manifests have been given separate folder due to parcel issue parcel-bundler/parcel#8404
= Replaced @types/firefox-webext-browser with @types/webextension-polyfill as they both provide the same types & webextension-polyfill is in use for cross-browser compatibility of the Browser namespace

package.json

@@ -2,28 +2,40 @@
   "name": "omnisearch-companion",
   "version": "1.1.3",
   "scripts": {
-    "parcel-start": "parcel watch src/manifest.json --host localhost",
-    "build": "parcel build src/manifest.json",
-    "build-clean": "npm run clean && parcel build src/manifest.json",
-    "build-prod": "parcel build src/manifest.json --no-source-maps --dist-dir dist-prod",
-    "build-prod-clean": "npm run clean-prod && parcel build src/manifest.json --no-source-maps --dist-dir dist-prod",
-    "start": "web-ext run -s dist/ --devtools",
-    "export": "npm run build-prod-clean && web-ext build -s dist-prod",
     "clean": "rimraf dist",
-    "clean-prod": "rimraf dist-prod"
+    "clean-prod": "rimraf dist-prod",
+
+    "prebuild-ff": "npm run clean",
+    "prestart-ff": "npm run build-ff",
+    "preprod-ff": "npm run clean-prod",
+    "preexport-ff": "npm run clean-prod",
+    "prebuild-cr": "npm run clean",
+    "prestart-cr": "npm run build-cr",
+    "preprod-cr": "npm run clean-prod",
+    "preexport-cr": "npm run clean-prod",
+
+    "build-ff": "parcel build src/_firefox/manifest.json",
+    "start-ff": "web-ext run -s dist/ --devtools",
+    "prod-ff": "parcel build src/_firefox/manifest.json --no-source-maps --dist-dir dist-prod",
+    "export-ff": "web-ext build -s dist-prod",
+    "build-cr": "parcel build src/_chrome/manifest.json",
+    "start-cr": "web-ext run -s dist/ --devtools --target chromium",
+    "prod-cr": "parcel build src/_chrome/manifest.json --no-source-maps --dist-dir dist-prod",
+    "export-cr": "web-ext build -s dist-prod"
   },
   "devDependencies": {
     "@parcel/config-webextension": "^2.11.0",
     "@parcel/core": "^2.11.0",
-    "@types/firefox-webext-browser": "^120.0.0",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.11.20",
     "@types/sanitize-html": "^2.11.0",
     "@types/showdown": "^2.0.6",
+    "@types/webextension-polyfill": "^0.10.7",
     "buffer": "^6.0.3",
     "parcel": "^2.11.0",
     "rimraf": "^5.0.5",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "webextension-polyfill": "^0.10.0"
   },
   "dependencies": {
     "lodash": "^4.17.21",

src/_chrome/manifest.json

@@ -0,0 +1,28 @@
+{
+  "name": "Omnisearch Companion",
+  "version": "1.1.3",
+  "description": "Display relevant search results from the Obsidian Omnisearch plugin.",
+  "icons": {
+    "300": "../../icons/Icon.png"
+  },
+  "permissions": ["tabs", "storage"],
+  "manifest_version": 3,
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["../content_scripts/cScript.ts"]
+    }
+  ],
+  "action": {
+    "default_icon": "../../icons/Icon.png",
+    "default_title": "Omnisearch Companion",
+    "default_popup": "../popup/popup.html"
+  },
+  "options_ui": {
+    "page": "../options/options.html"
+  },
+  "background": {
+    "service_worker": "../background_scripts/bgScript.ts",
+    "type": "module"
+  }
+}

src/_firefox/manifest.json

@@ -0,0 +1,33 @@
+{
+  "name": "Omnisearch Companion",
+  "version": "1.1.3",
+  "description": "Display relevant search results from the Obsidian Omnisearch plugin.",
+  "icons": {
+    "300": "../../icons/Icon.png"
+  },
+  "permissions": ["tabs", "storage"],
+  "manifest_version": 2,
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["../content_scripts/cScript.ts"]
+    }
+  ],
+  "browser_action": {
+    "default_icon": "../../icons/Icon.png",
+    "default_title": "Omnisearch Companion",
+    "default_popup": "../popup/popup.html"
+  },
+  "options_ui": {
+    "page": "../options/options.html"
+  },
+  "browser_specific_settings": {
+    "gecko": {
+      "id": "{c60894d8-7110-42a7-aaa8-1a0b64464b42}"
+    }
+  },
+  "background": {
+    "scripts": ["../background_scripts/bgScript.ts"],
+    "persistent": false
+  }
+}

src/background_scripts/bgScript.ts

@@ -1,8 +1,10 @@
+import browser from 'webextension-polyfill';
 import Storage from "../utils/storage";
+import { isManifestV3 } from '../utils/helpers';
 
 const storage = new Storage();
 let query: string | null;
-let port: browser.runtime.Port;
+let port: browser.Runtime.Port;
 let notes: ResultNoteApi[];
 let loading = false;
 
@@ -21,13 +23,14 @@ const waitForLoading = () => new Promise(resolve => {
 browser.tabs.onActivated.addListener(async (tab) => {
     loading = true;
     browser.tabs.get(tab.tabId).then(async (tabDetails) => {
-        const params = new URLSearchParams(tabDetails.url);
-        const tabQuery = params.get('q');
+        // Return early if query isn't set
+        if(!tabDetails?.url) return;
+        const tabQuery = new URL(tabDetails.url).searchParams.get('q');
         console.info(`Received query: ${tabQuery} from tab change, loading suggestions`);
         query = tabQuery;
         notes = await getNotes();
-        loading = false;
     })
+    loading = false;
 })
 
 /**
@@ -43,9 +46,9 @@ browser.runtime.onMessage.addListener(async (message: {value: any, sender?: stri
             query = message.value;
             // Preload badge prior to popup initialization & load notes for query
             notes = await getNotes();
-            loading = false;
         }
     }
+    loading = false;
 })
 
 /**
@@ -60,7 +63,7 @@ browser.storage.onChanged.addListener(async (change) => {
     }
 })
 
-const portFn = async (popupPort: browser.runtime.Port) => {
+const portFn = async (popupPort: browser.Runtime.Port) => {
     port = popupPort;
     await waitForLoading();
     popupPort.postMessage({"query": query, "notes": notes});
@@ -79,12 +82,26 @@ async function getNotes() {
         .sort((a, b) => b.score - a.score)
         .slice(0, Number(settings.notesShown));
 
-        // Set badge number
-        browser.browserAction.setBadgeText({ text: notesFiltered.length !== 0 ? notesFiltered.length.toString() : '' });
+        setBadge({ text: notesFiltered.length !== 0 ? notesFiltered.length.toString() : '' });
 
         return notesFiltered;
     }
     // Reset badge number
-    else browser.browserAction.setBadgeText({ text: '' });
+    else setBadge({ text: '' });
     return [];
+}
+
+/**
+ * Use action or browserAction depending on manifest
+ * @param textDetails 
+ */
+function setBadge(textDetails: browser.Action.SetBadgeTextDetailsType) {
+    if(isManifestV3()){
+        // Set badge number
+        browser.action.setBadgeText(textDetails);
+    }
+    else {
+        // Set badge number
+        browser.browserAction.setBadgeText(textDetails);
+    }
 }

src/components/NoteItem/NoteItem.ts

@@ -1,3 +1,5 @@
+import browser from 'webextension-polyfill';
+
 const template = document.createElement('template');
 template.innerHTML = `<style>
     :host {

src/content_scripts/cScript.ts

@@ -1,3 +1,5 @@
+import browser from 'webextension-polyfill';
+
 const params = new URLSearchParams(window.location.search);
 const query = params.get('q');
 browser.runtime.sendMessage({ sender: 'cScript', value: query });

src/popup/popup.ts

@@ -1,3 +1,4 @@
+import browser from 'webextension-polyfill';
 import { NoteItem } from "../components/NoteItem/NoteItem";
 import { Settings } from "../components/Settings/Settings";
 import { Header } from "../components/Header";

src/utils/helpers.ts

@@ -0,0 +1,5 @@
+import browser from 'webextension-polyfill';
+
+export function isManifestV3(){
+    return browser.runtime.getManifest().manifest_version === 3;
+}

src/utils/storage.ts

@@ -1,3 +1,5 @@
+import browser from 'webextension-polyfill';
+
 export type SettingsType = {
     port: string
     notesShown: string