Use vite and typescript

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.github
+.vscode

.eslintrc.cjs

@@ -0,0 +1,30 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:import/recommended",
+        "plugin:jsx-a11y/recommended",
+        "plugin:@typescript-eslint/recommended-type-checked",
+        "eslint-config-prettier",
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        project: true,
+        tsconfigRootDir: __dirname,
+    },
+    settings: {
+        "react": {
+            version: "detect",
+        },
+        "import/resolver": {
+            typescript: {},
+        },
+    },
+    env: {
+        browser: true,
+    },
+    rules: {
+        "react/display-name": "off",
+    },
+};

.github/workflows/ci.yml

@@ -0,0 +1,75 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint
+        run: yarn lint
+
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Format
+        run: yarn format
+
+  build:
+    runs-on: ubuntu-latest
+    needs:
+      - lint
+      - format
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build for chrome
+        run: yarn build
+        env:
+          TARGET: chrome
+      - name: Zip chrome extension
+        run: zip -r ../chrome.zip *
+        working-directory: ./dist
+      - name: Build for firefox
+        run: yarn build
+        env:
+          TARGET: firefox
+      - name: Zip firefox extension
+        run: zip -r ../firefox.zip *
+        working-directory: ./dist
+      - name: Upload extension
+        uses: actions/upload-artifact@v2
+        with:
+          name: Extension
+          path: |
+            chrome.zip
+            firefox.zip

.gitignore

@@ -48,4 +48,4 @@ bundle/safari
 .vscode
 
 # Xcode project
-xcuserdata/
+xcuserdata/

.postcssrc.js

@@ -0,0 +1,6 @@
+import PostcssPresetEnv from "postcss-preset-env";
+import Tailwind from "tailwindcss";
+
+export default {
+    plugins: [PostcssPresetEnv, Tailwind],
+};

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.github
+.vscode

.prettierrc.js

@@ -0,0 +1,16 @@
+/** @type {import("prettier").Options} */
+export default {
+    plugins: ["prettier-plugin-tailwindcss"],
+    printWidth: 80,
+    tabWidth: 4,
+    useTabs: false,
+    semi: true,
+    singleQuote: false,
+    quoteProps: "consistent",
+    jsxSingleQuote: false,
+    trailingComma: "all",
+    bracketSpacing: true,
+    bracketSameLine: true,
+    arrowParens: "always",
+    endOfLine: "auto",
+};

PRIVACY.md

@@ -1,8 +1,9 @@
 TODO:
+
 # Privacy Policy
 
-Sigarra Extension does not store or collect any personal information. All user prefences are stored on the user's device in local storage.
+Sigarra Extension does not store or collect any personal information. All user preferences are stored on the user's device in local storage.
 
 ## Contact Information
 
-For any questions or concerns regarding the privacy policy, please send an email to [email protected]
+For any questions or concerns regarding the privacy policy, please send an email to <[email protected]>

README.md

@@ -1,65 +1,39 @@
-## Development / Building / Bundling the Extension
+# SIGARRA Extension
+
+## Building the extension
 
 First, you must have [yarn](https://classic.yarnpkg.com/lang/en/docs/install) installed.
 
-Run
-```sh
-yarn && yarn bundle [all | firefox | chrome | safari]
-```
-at the root directory and you'll get a bundle directory that looks like this:
+Then, you can run `yarn` to install the dependencies, and `yarn build` to build the extension, which will be placed in the `dist` folder.
+
+This will build the extension for chromium based browsers. To build for Firefox, run `yarn build:firefox`.
+
+## Development
 
-```
-📂 bundle
-└ 📁 chrome
-└ 📁 firefox
-└ 📁 safari
-└ 🗄️ chrome.zip
-└ 🗄️ firefox.zip
-└ 🗄️ safari.zip
-```
+Running `yarn dev` will start the development server, which will serve the extension files and reload the extension when changes are made.
+In addition, it will also start up a browser instance with the extension loaded and SIGARRA already opened.
 
-## Watch for changes
+If for some reason that command does not work, you can run `yarn watch`, but this command is generally slower and less reliable.
 
-```sh
-sudo yarn watch [firefox | chrome | safari]
-```
+Both commands accept the suffix `:firefox` to build the extension for Firefox instead of Chromium based browsers.
 
-The extension polls the watch webserver for changes, if the page doesn't reload automatically, reload the extension and if that doesn't work, see the service worker/background script console for errors.
+## Folder structure
 
-## Load Extension
+The `src` folder contains the source code for the extension, which follows the following structure:
 
-You can bundle the extension for `Chrome`, `Firefox`, and `Safari`:
+-   `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.
 
-<table>
-	<tr>
-		<th>Chrome or Edge</th>
-		<th>Firefox</th>
-		<th>Safari</th>
-	</tr>
-	<tr>
-		<td width="33.33%">
-			<ol>
-				<li>Open <code>chrome://extensions</code> or <code>edge://extensions</code></li>
-        <li>Turn on the <strong>Developer mode</strong> toggle</li>
-				<li>Click on the <strong>Load unpacked</strong> button</li>
-				<li>Select the folder <code>bundle/chrome</code></li>
-			</ol>
-		</td>
-		<td width="33.33%">
-			<ol>
-				<li>Open <code>about:debugging#/runtime/this-firefox</code></li>
-				<li>Click on the <strong>Load Temporary Add-on...</strong> button</li>
-				<li>Select the file <code>bundle/firefox/manifest.json</code></li>
-			</ol>
-		</td>
-      <td width="33.33%">
-			<ol>
-				<li>Open <code>bundle/safari/Sigarra Extension for Sigarra Extension.xcodeproj</code></li>
-				<li>Click the Play button in Xcode ("start the active scheme")</li>
-				<li><a href="https://developer.apple.com/documentation/safariservices/safari_web_extensions/running_your_safari_web_extension#3744467">Configure Safari in macOS to run unsigned extensions</a></li>
-			</ol>
-		</td>
-	</tr>
-</table>
+    -   `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.
 
-#### This respository was based on the [typefully/minimal-twitter](https://github.com/typefully/minimal-twitter) extension repository
+-   `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.