Rewrite post-install, use polyfill

.eslintrc.cjs

@@ -5,9 +5,14 @@ module.exports = {
         "plugin:react/recommended",
         "plugin:import/recommended",
         "plugin:jsx-a11y/recommended",
-        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
         "eslint-config-prettier",
     ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+    },
     settings: {
         "react": {
             version: "detect",
@@ -19,4 +24,7 @@ module.exports = {
     env: {
         browser: true,
     },
+    rules: {
+        "react/display-name": "off",
+    },
 };

.postcssrc.js

@@ -2,8 +2,5 @@ import PostcssPresetEnv from "postcss-preset-env";
 import Tailwind from "tailwindcss";
 
 export default {
-    plugins: [
-        PostcssPresetEnv,
-        // Tailwind
-    ],
+    plugins: [PostcssPresetEnv, Tailwind],
 };

.prettierrc.js

@@ -1,5 +1,6 @@
 /** @type {import("prettier").Options} */
 export default {
+    plugins: ["prettier-plugin-tailwindcss"],
     printWidth: 80,
     tabWidth: 4,
     useTabs: false,

README.md

@@ -21,18 +21,19 @@ Both commands accept the suffix `:firefox` to build the extension for Firefox in
 
 The `src` folder contains the source code for the extension, which follows the following structure:
 
-- `background`: Contains the background script, which runs in the background and can listen for events.
-- `common`: Contains code that is shared between all parts of the extension.
-- `components`: Contains the React components used in the extension.
-- `content-scripts`: Contains the content scripts, which run in the context of the page and can interact with the DOM.
-  - `components`: Contains scripts that modify a small part of the page.
-  - `options`: Contains scripts that modify the page in a configurable way.
-  - `pages`: Contains scripts that modify a singular page extensively.
-
-- `content-styles`: Contains the stylesheets for the content scripts.
-- `options`: Contains the options page, which is used to configure the extension.
-- `popup`: Contains the popup page, which is the page that opens when the extension icon is clicked.
-- `post-install`: Contains the post-install page, which is the page that opens after the extension is installed.
-- `script-overrides`: Contains the script overrides, which are used to override the default SIGARRA scripts and functions.
-- `styles`: Contains the stylesheets for the extension.
-- `manifest.ts`: Contains the manifest for the extension, which defines the extension's name, description, permissions, etc.
+-   `background`: Contains the background script, which runs in the background and can listen for events.
+-   `common`: Contains code that is shared between all parts of the extension.
+-   `components`: Contains the React components used in the extension.
+-   `content-scripts`: Contains the content scripts, which run in the context of the page and can interact with the DOM.
+
+    -   `components`: Contains scripts that modify a small part of the page.
+    -   `options`: Contains scripts that modify the page in a configurable way.
+    -   `pages`: Contains scripts that modify a singular page extensively.
+
+-   `content-styles`: Contains the stylesheets for the content scripts.
+-   `options`: Contains the options page, which is used to configure the extension.
+-   `popup`: Contains the popup page, which is the page that opens when the extension icon is clicked.
+-   `post-install`: Contains the post-install page, which is the page that opens after the extension is installed.
+-   `script-overrides`: Contains the script overrides, which are used to override the default SIGARRA scripts and functions.
+-   `styles`: Contains the stylesheets for the extension.
+-   `manifest.ts`: Contains the manifest for the extension, which defines the extension's name, description, permissions, etc.

package.json

@@ -22,33 +22,33 @@
         "format:fix": "prettier --log-level warn --write ."
     },
     "dependencies": {
+        "flowbite": "^1.7.0",
+        "flowbite-react": "^0.4.11",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@types/chrome": "^0.0.240",
         "@types/eslint": "^8.44.0",
-        "@types/react": "^18.2.14",
-        "@types/react-dom": "^18.2.6",
-        "@types/react-refresh": "^0.14.0",
+        "@types/react": "^18.2.15",
+        "@types/react-dom": "^18.2.7",
         "@types/webextension-polyfill": "^0.10.1",
-        "@typescript-eslint/eslint-plugin": "^5.61.0",
-        "@typescript-eslint/parser": "^5.61.0",
+        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/parser": "^6.0.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
-        "eslint": "^8.44.0",
+        "eslint": "^8.45.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-import-resolver-typescript": "^3.5.5",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-react": "^7.32.2",
         "postcss-preset-env": "^9.0.0",
         "prettier": "^3.0.0",
-        "ts-node": "^10.9.1",
+        "prettier-plugin-tailwindcss": "^0.4.1",
+        "remixicon": "^3.4.0",
+        "tailwindcss": "^3.3.3",
         "typescript": "^5.1.6",
-        "vite": "~4.4.2",
+        "vite": "^4.4.4",
         "vite-plugin-web-extension": "^3.1.2",
-        "webextension-polyfill": "^0.10.0",
-        "remixicon": "^3.4.0",
-        "tailwindcss": "^3.3.2"
+        "webextension-polyfill": "^0.10.0"
     }
 }

src/background/index.ts

@@ -1,39 +1,45 @@
-chrome.runtime.onInstalled.addListener((object) => {
+import Browser from "webextension-polyfill";
+
+Browser.runtime.onInstalled.addListener((object) => {
     if (object.reason === "install") {
-        chrome.tabs.query({ url: "*://sigarra.up.pt/feup/*" }, (tabs) => {
-            tabs.forEach(
-                (tab) => tab.id !== undefined && chrome.tabs.reload(tab.id),
-            );
-        });
+        Browser.tabs
+            .query({ url: "*://sigarra.up.pt/feup/*" })
+            .then((tabs) => {
+                tabs.forEach(
+                    (tab) =>
+                        tab.id !== undefined &&
+                        void Browser.tabs.reload(tab.id),
+                );
+            })
+            .catch(console.error);
 
-        chrome.tabs.create({
-            url: chrome.runtime.getURL("src/post-install/index.html"),
+        void Browser.tabs.create({
+            url: Browser.runtime.getURL("src/post-install/index.html"),
         });
     }
 });
 
-chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
+Browser.runtime.onMessage.addListener(async (message, sender) => {
     if (!sender.tab || !sender.tab.active) {
         console.log("tab not active skipping message...");
         return;
     }
 
     if (message.type == "login") {
-        const cookie = await chrome.cookies.get({
+        const cookie = await Browser.cookies.get({
             name: "SI_SESSION",
             url: sender.tab.url ?? "",
         });
-        console.log(cookie);
-        if (cookie == null || cookie.value === "0") {
-            sendResponse(false);
-            return;
-        }
+
+        if (cookie == null || cookie.value === "0") return false;
+
         message.auto_login.verifed = true;
-        await chrome.storage.local.set({ auto_login: message.auto_login });
-        if (sender.tab.id !== undefined) chrome.tabs.reload(sender.tab.id);
+        await Browser.storage.local.set({ auto_login: message.auto_login });
+        if (sender.tab.id !== undefined)
+            void Browser.tabs.reload(sender.tab.id);
     }
 });
 
-chrome.permissions.onRemoved.addListener((permissions) => {
+Browser.permissions.onRemoved.addListener((permissions) => {
     //TODO:
 });

src/common/options.ts

@@ -1,3 +1,4 @@
+import Browser from "webextension-polyfill";
 import { map } from "./objects";
 
 export type OptionTypeString = "boolean" | "string" | "number";
@@ -42,10 +43,10 @@ export type OptionValues = {
 export const getOption = async <T extends OptionName>(
     name: T,
 ): Promise<OptionType<T>> =>
-    (await chrome.storage.local.get(name))[name] ?? options[name].default;
+    (await Browser.storage.local.get(name))[name] ?? options[name].default;
 
 export const getOptions = async (): Promise<OptionValues> => {
-    const values = (await chrome.storage.local.get(null)) as OptionValues;
+    const values = (await Browser.storage.local.get(null)) as OptionValues;
 
     return map(options, (option, key) => values[key] ?? option.default);
 };

src/components/controls/CheckboxControl.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
+import Browser from "webextension-polyfill";
 // import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 // import { CheckIcon } from "@radix-ui/react-icons";
 // import { styled } from "@stitches/react";
 
-import { getStorage, setStorage } from "~/common/storage";
-
 interface Props {
     label: string;
     storageKey: string;
@@ -17,7 +16,9 @@ function CheckboxControl({ label, storageKey, defaultState = false }: Props) {
     useEffect(() => {
         const getDefaultState = async () => {
             try {
-                const userSetting = await getStorage(storageKey);
+                const userSetting = (
+                    await Browser.storage.local.get(storageKey)
+                )[storageKey];
                 userSetting &&
                     setLocalState(userSetting === "on" ? true : false);
             } catch (error) {
@@ -30,13 +31,13 @@ function CheckboxControl({ label, storageKey, defaultState = false }: Props) {
 
     return (
         <>
-            <div className="flex items-center justify-between w-full py-1">
+            <div className="flex w-full items-center justify-between py-1">
                 <label
                     htmlFor={storageKey}
                     className="text-base tracking-normal">
                     {label}
                 </label>
-                <div className="grid rounded-full cursor-pointer w-9 h-9 place-items-center hover:bg-accentFour">
+                <div className="hover:bg-accentFour grid h-9 w-9 cursor-pointer place-items-center rounded-full">
                     {/* <StyledCheckbox
                         onCheckedChange={async (checked) => {
                             setLocalState(checked);

src/components/controls/SwitchControl.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from "react";
+import Browser from "webextension-polyfill";
 // import * as SwitchPrimitive from "@radix-ui/react-switch";
 // import { styled } from "@stitches/react";
 
-import { getStorage, setStorage } from "~/common/storage";
-
 interface Props {
     label: string;
     storageKey: string;
@@ -16,7 +15,9 @@ function SwitchControl({ label, storageKey, defaultState = false }: Props) {
     useEffect(() => {
         const getDefaultState = async () => {
             try {
-                const userDefault = await getStorage(storageKey);
+                const userDefault = (
+                    await Browser.storage.local.get(storageKey)
+                )[storageKey];
                 userDefault &&
                     setLocalState(userDefault === "on" ? true : false);
             } catch (error) {
@@ -28,7 +29,7 @@ function SwitchControl({ label, storageKey, defaultState = false }: Props) {
     }, [storageKey]);
 
     return (
-        <div className="flex items-center justify-between w-full">
+        <div className="flex w-full items-center justify-between">
             <label htmlFor={storageKey} className="text-[15px] font-bold">
                 {label}
             </label>

src/components/layout/Container.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 
 const Container = ({ children }: PropsWithChildren) => (
-    <div className="relative flex flex-col p-1 font-sans dark:text-white text-black font-normal max-w-full w-[350px]">
+    <div className="relative flex w-[350px] max-w-full flex-col p-1 font-sans font-normal text-black dark:text-white">
         {children}
     </div>
 );

src/components/layout/Footer.tsx

@@ -2,11 +2,11 @@ import React from "react";
 
 const Footer = () => {
     return (
-        <footer className="flex flex-col items-center w-full px-2 pt-4 pb-8">
+        <footer className="flex w-full flex-col items-center px-2 pb-8 pt-4">
             <button
                 onClick={() => window.close()}
                 type="button"
-                className="inline-flex items-center px-4 py-2 text-[15px] font-bold text-white border border-transparent rounded-full shadow-sm bg-accentThree hover:bg-accentFive focus:outline-none w-fit">
+                className="bg-accentThree hover:bg-accentFive inline-flex w-fit items-center rounded-full border border-transparent px-4 py-2 text-[15px] font-bold text-white shadow-sm focus:outline-none">
                 Feito
             </button>
         </footer>

src/components/layout/Header.tsx

@@ -7,13 +7,13 @@ const Header = () => (
                 <span>Sigarra Extension</span>
             </h1>
         </div>
-        <p className="pt-3 pb-3 text-sm font-medium leading-5 dark:text-accentOneDark text-accentOne">
+        <p className="dark:text-accentOneDark text-accentOne pb-3 pt-3 text-sm font-medium leading-5">
             Made by{" "}
             <a
                 href="https://ni.fe.up.pt"
                 target="_blank"
                 rel="noreferrer"
-                className="text-red hover:underline font-bold cursor-pointer">
+                className="text-red cursor-pointer font-bold hover:underline">
                 niaefeup
             </a>
         </p>

src/components/layout/Main.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Layout from "../sections/Layout";
 
 const Main = () => (
-    <main className="flex flex-col p-2 gap-y-4">
+    <main className="flex flex-col gap-y-4 p-2">
         <Layout />
     </main>
 );

src/components/sections/Layout.tsx

@@ -5,7 +5,7 @@ const Layout = () => (
     <section className="flex flex-col gap-y-2">
         <label
             htmlFor="user-control-interface"
-            className="text-sm font-bold dark:text-accentOneDark text-accentOne">
+            className="dark:text-accentOneDark text-accentOne text-sm font-bold">
             Layout
         </label>
         <div id="user-control-interface">

src/components/sections/LayoutContent.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import SwitchControl from "../controls/SwitchControl";
 
 const LayoutContent = () => (
-    <form className="flex flex-col items-center justify-between px-4 dark:bg-bgTwoDark bg-bgTwo rounded-2xl">
+    <form className="dark:bg-bgTwoDark bg-bgTwo flex flex-col items-center justify-between rounded-2xl px-4">
         <div className="w-full py-4">
             <div className="flex flex-col gap-y-4">
                 <SwitchControl

src/content-scripts/index.ts

@@ -4,7 +4,8 @@ import pages from "./pages";
 import modules from "./modules";
 import { OptionValues, getOptions } from "~/common/options";
 import options from "./options";
-import { entries } from "~/common/objects";
+import { entries, map } from "~/common/objects";
+import Browser from "webextension-polyfill";
 
 const loadPage = () =>
     pages.forEach(
@@ -25,9 +26,11 @@ const main = async () => {
         attributes: true,
     });
 
-    loadOptions(await getOptions());
+    Browser.storage.onChanged.addListener((changes) =>
+        loadOptions(map(changes, (change) => change.newValue) as OptionValues),
+    );
 
-    console.log(await getOptions());
+    loadOptions(await getOptions());
 };
 
-main();
+void main();

src/content-scripts/modules/base/selector.ts

@@ -13,11 +13,13 @@ export const selectorModule =
     ): Module =>
     (mutation) => {
         (mutation.addedNodes ?? [mutation.target]).forEach((node) => {
-            (selector instanceof Array ? selector : [selector]).forEach((s) => {
-                if (!(node instanceof HTMLElement)) return;
+            (selector instanceof Array ? selector : [selector]).forEach(
+                (s: S extends string[] ? S[number] : S) => {
+                    if (!(node instanceof HTMLElement)) return;
 
-                if (node.matches(s)) module(node as T, s);
-                node.querySelectorAll<T>(s).forEach((e) => module(e, s));
-            });
+                    if (node.matches(s)) module(node as T, s);
+                    node.querySelectorAll<T>(s).forEach((e) => module(e, s));
+                },
+            );
         });
     };

src/content-scripts/modules/overrideFunctions.ts

@@ -1,8 +1,9 @@
+import Browser from "webextension-polyfill";
 import { onceModule } from "./base/once";
 
 export default onceModule(() => {
     const scriptElement = document.createElement("script");
-    const scriptURL = chrome.runtime.getURL("src/script-overrides/index.ts");
+    const scriptURL = Browser.runtime.getURL("src/script-overrides/index.ts");
     scriptElement.src = scriptURL;
     scriptElement.id = "se-script-overrides";
     document.head.appendChild(scriptElement);