Update: Supports firefox

package.json

@@ -30,6 +30,7 @@
         "@types/node": "^20.8.10",
         "@types/react": "^18.2.36",
         "@types/react-dom": "^18.2.14",
+        "@types/webextension-polyfill": "^0.10.6",
         "@types/webpack": "^5.28.4",
         "@typescript-eslint/eslint-plugin": "^6.9.1",
         "@typescript-eslint/parser": "^6.9.1",
@@ -71,6 +72,7 @@
         "ts-node": "^10.9.1",
         "tsconfig-paths-webpack-plugin": "^4.1.0",
         "typescript": "^5.2.2",
+        "webextension-polyfill": "^0.10.0",
         "webpack": "^5.89.0",
         "webpack-cli": "^5.1.4",
         "webpack-remove-empty-scripts": "^1.0.4"

src/class/Moodle/common.ts

@@ -1,3 +1,5 @@
+import Browser from "webextension-polyfill";
+
 import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML";
 
 export const injectLink = () => {
@@ -10,7 +12,7 @@ export const injectLink = () => {
 
 export const replaceLMSLogo = () => {
     document.querySelectorAll(".logo").forEach((e) => {
-        if (e.getAttribute("src")) e.setAttribute("src", chrome.runtime.getURL("assets/GULMS.png"));
+        if (e.getAttribute("src")) e.setAttribute("src", Browser.runtime.getURL("assets/GULMS.png"));
     });
 };
 

src/class/Moodle/enableRainbow.ts

@@ -1,3 +1,5 @@
+import Browser from "webextension-polyfill";
+
 import changeQueryInnerHTML from "../../utils/changeQueryInnerHTML";
 import { RainbowApplicator } from "../ClassApplicator";
 import { GundaiWebSite } from "../UnivWebsite";
@@ -26,7 +28,7 @@ const textAndBg = (rainbow: RainbowApplicator) => {
 };
 const replaceIconToGamimg = () => {
     document.querySelectorAll("img.userpicture").forEach((e) => {
-        if (e.getAttribute("src")) e.setAttribute("src", chrome.runtime.getURL("assets/partyparrot.gif"));
+        if (e.getAttribute("src")) e.setAttribute("src", Browser.runtime.getURL("assets/partyparrot.gif"));
     });
 };
 const replaceTextToGaimg = (moodle: GundaiWebSite<MoodleAdditionalInfo>) => {

src/class/StorageTool/index.ts

@@ -1,6 +1,8 @@
 // 最近が物忘れが激しい。どうしてだろうか。
 // 人間は嫌なことやつらいこと、思い出さないようなことはすぐに忘れるようにできているらしい。
-// となると、最近はつらいことが多いのかもしれない。例えばchrome.storage.sync.get()の返り値がany型であることとか。
+// なんか非同期処理が動かないとき闇雲にasync awaitをつけるのがつらい。
+
+import Browser from "webextension-polyfill";
 
 import IsTrue from "../../utils/isTrue";
 
@@ -13,7 +15,7 @@ export default class StorageTool {
     }
 
     static getChromeStorage() {
-        return chrome.storage ? chrome.storage.sync : null;
+        return Browser.storage ? Browser.storage.sync : null;
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/popup/components/Main.tsx

@@ -2,6 +2,7 @@ import { DetailedHTMLProps, useEffect, useState } from "react";
 import { Tooltip } from "react-daisyui";
 import { ComponentColor } from "react-daisyui/dist/types";
 import { FaGamepad, FaMoon } from "react-icons/fa";
+import browser from "webextension-polyfill";
 
 import { SwitchItem } from "../../components/SwitchItem";
 import { WebsiteConfig, Websites } from "../../data/websites";
@@ -13,8 +14,8 @@ export default function Main(props: MainProps) {
 
     useEffect(() => {
         try {
-            if (chrome.tabs === undefined) return;
-            chrome.tabs.query({ active: true, currentWindow: true }, (e) => {
+            if (browser.tabs === undefined) return;
+            browser.tabs.query({ active: true, currentWindow: true }).then((e) => {
                 const url = e[0].url;
                 if (url?.startsWith(`chrome-extension://${chrome.runtime.id}/options.html`)) {
                     setShowSwitchClass(false);

src/scripts/background.ts

@@ -1,8 +1,10 @@
+import browser from "webextension-polyfill";
+
 import StorageTool from "@/class/StorageTool";
 import isTrue from "@/utils/isTrue";
 import OpenOptions from "@/utils/openOptions";
 
-chrome.runtime.onInstalled.addListener(async () => {
+browser.runtime.onInstalled.addListener(async () => {
     const storage = new StorageTool("other");
     const isInstalled = await storage.get("installed");
     //console.log(isInstalled);

src/scripts/content_common.ts

@@ -1,7 +1,9 @@
 import "@/styles/gaming.scss";
 import "@/styles/darkmode.scss";
 
-chrome.runtime.onMessage.addListener((message) => {
+import browser from "webextension-polyfill";
+
+browser.runtime.onMessage.addListener((message) => {
     if (message === "reload") {
         location.reload();
     }

src/utils/openOptions.ts

@@ -1,12 +1,13 @@
+import browser from "webextension-polyfill";
 type OpenOptionsArgs = "home" | "about" | "thanks" | undefined;
 
 export default function openOptions(args: OpenOptionsArgs) {
-    if (!chrome || !chrome.tabs) {
+    if (!browser || !browser.tabs) {
         console.error("chrome.tabs is not defined");
         return;
     }
 
-    if (!args || args === "home") return chrome.tabs.create({ url: "options.html" });
+    if (!args || args === "home") return browser.tabs.create({ url: "options.html" });
 
-    return chrome.tabs.create({ url: `options.html#/${args}` });
+    return browser.tabs.create({ url: `options.html#/${args}` });
 }

src/utils/sendMsgToAllTab.ts

@@ -1,28 +1,28 @@
+import browser from "webextension-polyfill";
 export const sendMsgToAllTab = <T>(msg: T) => {
     if (!isServiceWorkerScript()) return;
     const urls = getUrlsFromManifest();
-    chrome.tabs.query(
-        {
+    browser.tabs
+        .query({
             url: urls,
-        },
-        (tabs) => {
+        })
+        .then((tabs) => {
             tabs.forEach((tab) => {
                 try {
-                    chrome.tabs.sendMessage(tab.id!, msg);
+                    browser.tabs.sendMessage(tab.id!, msg);
                 } catch (e) {
                     console.error(e);
                 }
             });
-        },
-    );
+        });
 };
 
 export const isServiceWorkerScript = () => {
     return location.protocol === "chrome-extension:";
 };
 
 export const getUrlsFromManifest = () => {
-    const manifest = chrome.runtime.getManifest();
+    const manifest = browser.runtime.getManifest();
     const content_scripts = manifest.content_scripts;
     if (!content_scripts) return [];