feat: add support for firefox

.nycrc

@@ -6,7 +6,7 @@
   "report-dir": "tests/coverage",
   "include": ["src/modules/*.ts"],
   "exclude": [
-    "src/modules/ChromeSettingsStorage.ts",
+    "src/modules/BrowserSettingsStorage.ts",
     "src/modules/BrowserUiWindow.ts"
   ],
   "branches": 80,

manifest.json

@@ -17,6 +17,7 @@
   },
   "background": {
     "service_worker": "src/scripts/sw.ts",
+    "scripts": ["src/scripts/sw.ts"],
     "type": "module"
   },
   "content_scripts": [

package.json

@@ -20,20 +20,20 @@
     "@mdi/font": "7.4.47",
     "luxon": "^3.5.0",
     "vue": "^3.5.12",
-    "vuetify": "^3.7.3"
+    "vuetify": "^3.7.3",
+    "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
-    "@crxjs/vite-plugin": "2.0.0-beta.26",
     "@eslint/js": "^9.13.0",
     "@types/chai": "^5.0.0",
-    "@types/chrome": "^0.0.279",
     "@types/eslint__js": "^8.42.3",
     "@types/jsdom": "^21.1.7",
     "@types/jsdom-global": "^3.0.7",
     "@types/luxon": "^3.4.2",
     "@types/mocha": "^10.0.9",
     "@types/node": "^22.7.8",
     "@types/sinon": "^17.0.3",
+    "@types/webextension-polyfill": "^0.12.1",
     "@types/webfontloader": "^1.6.38",
     "@typescript-eslint/eslint-plugin": "^8.11.0",
     "@vitejs/plugin-vue": "^5.1.4",
@@ -52,6 +52,7 @@
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.1",
     "vite-plugin-vuetify": "^2.0.4",
+    "vite-plugin-web-extension": "^4.3.1",
     "vue-tsc": "^2.1.6"
   }
 }

src/components/Options.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import browser from "webextension-polyfill"
 import { ref, onMounted, watch } from "vue"
 import { useTheme } from "vuetify"
 
@@ -10,7 +11,7 @@ import {
 } from "../types/settings"
 
 import { SettingsManager } from "../modules/SettingsManager"
-import { ChromeSettingsStorage } from "../modules/ChromeSettingsStorage"
+import { BrowserSettingsStorage } from "../modules/BrowserSettingsStorage"
 
 import package_json from "../../package.json"
 import settings_json from "../../settings.json"
@@ -30,7 +31,7 @@ const {
 } = settings_json
 
 const settingsManager: SettingsManager = new SettingsManager(
-  new ChromeSettingsStorage(),
+  new BrowserSettingsStorage(),
   settings_json as SettingsJSON
 )
 
@@ -74,14 +75,14 @@ async function saveSettings(): Promise<void> {
   await settingsManager.saveSettingsToStorage(settings)
 
   // send update message to content script
-  const [activeTab] = await chrome.tabs.query({
+  const [activeTab] = await browser.tabs.query({
     active: true,
     lastFocusedWindow: true
   })
 
   if (!activeTab) return console.log("Could not find active Tab")
 
-  chrome.tabs.sendMessage(activeTab.id!, {
+  browser.tabs.sendMessage(activeTab.id!, {
     action: "updated-settings"
   })
 
@@ -92,10 +93,10 @@ async function saveSettings(): Promise<void> {
 }
 
 function updateUI() {
-  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+  browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
     const activeTab = tabs[0]
     if (activeTab) {
-      chrome.tabs.sendMessage(activeTab.id!, {
+      browser.tabs.sendMessage(activeTab.id!, {
         action: "updateStats"
       })
     }
@@ -114,7 +115,7 @@ function savePressed() {
 // }
 
 function openGihtub() {
-  chrome.tabs.create({
+  browser.tabs.create({
     url: package_json.repository.url
   })
 }

src/modules/ChromeSettingsStorage.ts → src/modules/BrowserSettingsStorage.ts

@@ -1,30 +1,30 @@
-/// <reference types="chrome" />
+import browser from "webextension-polyfill"
 
 import { Settings } from "../types/settings"
 import { SettingsStorage } from "../types/wrapper"
 
 /**
- * A SettingsStorage implementation that uses Chrome's local storage.
+ * A SettingsStorage implementation that uses Browser's local storage.
  */
-export class ChromeSettingsStorage implements SettingsStorage {
+export class BrowserSettingsStorage implements SettingsStorage {
   /**
-   * Retrieves the stored settings from Chrome's local storage.
+   * Retrieves the stored settings from Browser's local storage.
    *
    * @returns {Promise<Settings>} A Promise that resolves to the stored settings.
    */
   async getStoredSettings(): Promise<Settings> {
-    return chrome.storage.local
+    return browser.storage.local
       .get(["settings"])
-      .then((result) => result.settings)
+      .then((result) => result.settings) as Promise<Settings>
   }
 
   /**
-   * Saves the given settings to Chrome's local storage.
+   * Saves the given settings to Browser's local storage.
    *
    * @param settings - The settings to save.
    * @returns {Promise<void>} A Promise that resolves once the settings are saved.
    */
   async saveSettings(settings: Settings): Promise<void> {
-    return chrome.storage.local.set({ settings })
+    return browser.storage.local.set({ settings })
   }
 }

src/modules/StatsUpdater.ts

@@ -228,13 +228,14 @@ export class StatsUpdater {
    * Attach settings update listener.
    */
   private attachSettingsUpdateListener(): void {
-    chrome.runtime.onMessage.addListener(
-      async (request: { action: string }) => {
+    import("webextension-polyfill").then((browser) => {
+      browser.runtime.onMessage.addListener(async (message) => {
+        const request = message as { action: string }
         if (request.action !== "updated-settings") return
         this.updateStatsForBothPlayers(true)
         this.updateTitleForBothPlayers()
-      }
-    )
+      })
+    })
   }
 
   getUiUpdater(): UiUpdater {

src/modules/StatsUpdaterFactory.ts

@@ -5,7 +5,6 @@ import { SettingsManager } from "./SettingsManager"
 import { APIHandler } from "./APIHandler"
 import { UiUpdater } from "./UiUpdater"
 import { UrlObserver } from "./UrlObserver"
-import { ChromeSettingsStorage } from "./ChromeSettingsStorage"
 import { StatsUpdater } from "./StatsUpdater"
 import { StatsCalculator } from "./StatsCalculator"
 import { BrowserUiWindow } from "./BrowserUiWindow"
@@ -28,7 +27,7 @@ export class StatsUpdaterFactory {
    * @returns {StatsUpdater} A new StatsUpdater instance.
    */
   static createStatsUpdater(
-    storageManager: SettingsStorage = new ChromeSettingsStorage(),
+    storageManager: SettingsStorage,
     uiWindow: UiWindow = new BrowserUiWindow()
   ): StatsUpdater {
     return new StatsUpdater({

src/scripts/insights.ts

@@ -5,11 +5,14 @@
 
 import { version, repository } from "../../package.json"
 import { StatsUpdaterFactory } from "../modules/StatsUpdaterFactory"
+import { BrowserSettingsStorage } from "../modules/BrowserSettingsStorage"
 
 console.log(`⚡ Chess.com Insights v${version} injected`)
 console.log(`🚀 View source code at ${repository.url}`)
 
 /**
  * Initialize the stats updater and start updating stats.
  */
-StatsUpdaterFactory.createStatsUpdater().initialize()
+StatsUpdaterFactory.createStatsUpdater(
+  new BrowserSettingsStorage()
+).initialize()

src/scripts/sw.ts

@@ -1,26 +1,28 @@
+import browser from "webextension-polyfill"
+
 /**
  * This service worker injects the content scripts into all tabs that
  * match the content script's matches when the extension is installed/updated.
  *
  * This is necessary because content scripts are only injected into
  * tabs that are created after the extension is installed.
  */
-chrome.runtime.onInstalled.addListener(async () => {
+browser.runtime.onInstalled.addListener(async () => {
   console.log("Extension installed")
 
   // Get content scripts from manifest
-  const manifest = chrome.runtime.getManifest()
+  const manifest = browser.runtime.getManifest()
   if (!manifest.content_scripts) return
 
   // loop through all content scripts
   for (const cs of manifest.content_scripts) {
     // get all tabs that match the content script's matches
-    const tabs = await chrome.tabs.query({ url: cs.matches })
+    const tabs = await browser.tabs.query({ url: cs.matches })
 
     // inject content script into all found tabs
     for (const tab of tabs) {
       console.log(`Injecting content script '${cs.js}' into tab '${tab.title}'`)
-      chrome.scripting.executeScript({
+      browser.scripting.executeScript({
         target: { tabId: tab.id! },
         files: cs.js!
       })

vite.config.ts

@@ -1,13 +1,10 @@
 import vue from "@vitejs/plugin-vue"
 import vuetify, { transformAssetUrls } from "vite-plugin-vuetify"
 
-import { crx } from "@crxjs/vite-plugin"
+import webExtension from "vite-plugin-web-extension"
 import { defineConfig } from "vite"
 import { fileURLToPath, URL } from "node:url"
 
-// Node >=17
-import manifest from "./manifest.json" assert { type: "json" }
-
 export default defineConfig({
   plugins: [
     vue({
@@ -16,12 +13,7 @@ export default defineConfig({
     vuetify({
       autoImport: true
     }),
-    crx({
-      manifest: {
-        ...manifest,
-        background: { ...manifest.background, type: "module" }
-      }
-    })
+    webExtension()
   ],
   define: { "process.env": {} },
   resolve: {