feat: add firefox support

.gitignore

@@ -9,6 +9,8 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-firefox
+dist-chrome
 dist-ssr
 dist-zip
 *.local

README.md

@@ -1,3 +1,3 @@
-# Tolgee chrome plugin
+# Tolgee browser plugin
 
 This plugin enables tolgee-js to take screenshots automatically

manifest.json

@@ -10,6 +10,7 @@
     "default_popup": "index.html"
   },
   "background": {
+    "scripts": ["src/background/background.ts"],
     "service_worker": "src/background/background.ts",
     "type": "module"
   },

package.json

@@ -1,14 +1,14 @@
 {
   "name": "tolgee-chrome",
   "version": "0.0.2",
-  "description": "Tolgee framework Google Chrome plugin",
+  "description": "Tolgee framework browser plugin",
   "main": "index.js",
   "author": "Jan Cizmar",
   "license": "ISC",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --config vite.config.chrome.ts && vite build --config vite.config.firefox.ts",
     "eslint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettier": "prettier --write ./src",
     "prettier-ci": "prettier --check ./src",
@@ -23,16 +23,17 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.25",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/exec": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
-    "@types/chrome": "^0.0.254",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/webextension-polyfill": "^0.12.1",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^2.2.0",

src/background/ScreenshotMaker.ts

@@ -1,9 +1,7 @@
+import browser from 'webextension-polyfill';
+
 export class ScreenshotMaker {
-  static capture = async (tabId: number) => {
-    return new Promise((resolve) => {
-      chrome.tabs.captureVisibleTab(tabId, (data) => {
-        resolve(data);
-      });
-    });
+  static capture = (tabId: number) => {
+    return browser.tabs.captureVisibleTab(tabId);
   };
 }

src/background/background.ts

@@ -1,26 +1,28 @@
+import browser from 'webextension-polyfill';
 import { ScreenshotMaker } from './ScreenshotMaker';
+import { RuntimeMessage } from '../content/Messages';
 
 type State = 'present' | 'active' | 'inactive';
 
-chrome.runtime.onMessage.addListener(({ type, data }, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  const { type, data } = message as RuntimeMessage;
   switch (type) {
     case 'TOLGEE_TAKE_SCREENSHOT':
-      ScreenshotMaker.capture(sender.tab!.windowId).then((data) => {
+      ScreenshotMaker.capture(sender.tab!.windowId!).then((data) => {
         sendResponse(data);
       });
       return true;
     case 'TOLGEE_SET_STATE':
       setStateIcon(data, sender.tab!.id!);
-      sendResponse();
+      sendResponse({});
       break;
     default:
-      sendResponse();
+      sendResponse({});
   }
-  return false;
 });
 
 const setStateIcon = (state: State, tabId: number) => {
-  chrome.action.setIcon({
+  browser.action.setIcon({
     path: { 128: `/icons/${state}.png` },
     tabId,
   });

src/content/Messages.ts

@@ -1,3 +1,5 @@
+import browser from 'webextension-polyfill';
+
 type Listener = {
   type: string;
   callback: (data: any) => void;
@@ -40,17 +42,18 @@ export class Messages {
   };
 
   readonly startRuntimeListening = () => {
-    // noinspection JSDeprecatedSymbols
-    chrome.runtime.onMessage.addListener(
-      (request: RuntimeMessage, _, sendResponse) => {
-        this.listenersRuntime.forEach(async (listener) => {
-          if (listener.type == request.type) {
-            sendResponse(await listener.callback(request.data));
-          }
-        });
-        return true;
-      }
-    );
+    browser.runtime.onMessage.addListener((request, _, sendResponse) => {
+      const { type, data } = request as RuntimeMessage;
+
+      this.listenersRuntime.forEach(async (listener) => {
+        if (listener.type == type) {
+          const response = await listener.callback(data);
+
+          sendResponse(response);
+        }
+      });
+      return true;
+    });
   };
 
   readonly listenRuntime = (type: string, callback: RuntimeCallbackType) => {
@@ -66,8 +69,6 @@ export class Messages {
   };
 
   readonly sendToPlugin = (type: string, data?: any) => {
-    return new Promise((resolve) => {
-      chrome.runtime.sendMessage({ type, data }, (data) => resolve(data));
-    });
+    return browser.runtime.sendMessage({ type, data });
   };
 }

src/popup/sendMessage.ts

@@ -1,16 +1,15 @@
-export const sendMessage = (type: string, data?: any) => {
-  return new Promise((resolve, reject) => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      chrome.tabs.sendMessage(
-        tabs[0].id as number,
-        { type, data },
-        (response) => {
-          if (chrome.runtime.lastError) {
-            reject(chrome.runtime.lastError);
-          }
-          resolve(response);
-        }
-      );
-    });
+import browser from 'webextension-polyfill';
+
+export const sendMessage = async (type: string, data?: any) => {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+  const response = await browser.tabs.sendMessage(tabs[0].id as number, {
+    type,
+    data,
   });
+
+  if (browser.runtime.lastError) {
+    throw browser.runtime.lastError;
+  }
+
+  return response;
 };

src/popup/storage.ts

@@ -1,14 +1,14 @@
+import browser from 'webextension-polyfill';
+
 type Values = {
   apiUrl?: string;
   apiKey?: string;
 };
 
 const getCurrentTab = async () => {
-  return new Promise<chrome.tabs.Tab>((resolve) =>
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      resolve(tabs[0]);
-    })
-  );
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+
+  return tabs[0];
 };
 
 const getCurrentTabOrigin = async () => {
@@ -19,21 +19,17 @@ const getCurrentTabOrigin = async () => {
 export const storeValues = async (values: Values | null) => {
   try {
     const origin = await getCurrentTabOrigin();
-    await new Promise<void>((resolve) => {
-      if (values?.apiKey && values?.apiUrl) {
-        chrome.storage.local.set(
-          {
-            [origin]: {
-              apiUrl: values.apiUrl,
-              apiKey: values.apiKey,
-            },
-          },
-          resolve
-        );
-      } else {
-        chrome.storage.local.remove(origin, resolve);
-      }
-    });
+
+    if (values?.apiKey && values?.apiUrl) {
+      browser.storage.local.set({
+        [origin]: {
+          apiUrl: values.apiUrl,
+          apiKey: values.apiKey,
+        },
+      });
+    } else {
+      browser.storage.local.remove(origin);
+    }
   } catch (e) {
     console.error(e);
     return;
@@ -43,15 +39,13 @@ export const storeValues = async (values: Values | null) => {
 export const loadValues = async () => {
   try {
     const origin = await getCurrentTabOrigin();
-    return new Promise<Values>((resolve) =>
-      chrome.storage.local.get(origin, (keys) => {
-        const data = keys[origin];
-        resolve({
-          apiKey: data?.apiKey,
-          apiUrl: data?.apiUrl,
-        });
-      })
-    );
+    const keys = await browser.storage.local.get(origin);
+    const data = keys[origin] as Values;
+
+    return {
+      apiKey: data?.apiKey,
+      apiUrl: data?.apiUrl,
+    };
   } catch (e) {
     console.error(e);
     return {};

src/popup/useDetectorForm.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import browser, { type Runtime } from 'webextension-polyfill';
 import { useEffect, useReducer } from 'react';
 import { LibConfig } from '../types';
 import { loadAppliedValues } from './loadConfig';
 import { sendMessage } from './sendMessage';
 import { loadValues, storeValues } from './storage';
 import { compareValues, normalizeUrl, validateValues, Values } from './tools';
 import { useApplier } from './useApplier';
+import { RuntimeMessage } from '../content/Messages';
 
 type ProjectInfo = {
   projectName: string;
@@ -205,20 +207,21 @@ export const useDetectorForm = () => {
 
   // listen for Tolgee config change
   useEffect(() => {
-    const listener = (
-      { type, data }: any,
-      sender: chrome.runtime.MessageSender
-    ) => {
+    const listener = (message: unknown, sender: Runtime.MessageSender) => {
+      const { type, data } = message as RuntimeMessage;
+
       const frameId = sender.frameId;
       if (type === 'TOLGEE_CONFIG_LOADED') {
         dispatch({
           type: 'CHANGE_LIB_CONFIG',
           payload: { libData: data, frameId: frameId || null },
         });
       }
+
+      return undefined;
     };
-    chrome.runtime.onMessage.addListener(listener);
-    () => chrome.runtime.onMessage.removeListener(listener);
+    browser.runtime.onMessage.addListener(listener);
+    () => browser.runtime.onMessage.removeListener(listener);
   }, []);
 
   const setCredentialsCheck = (val: CredentialsCheck) => {

tsconfig.node.json

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.chrome.ts", "vite.config.firefox.ts"],
 }