overall qol changes, added workflows, manifest control and linting

.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  overrides: [
+    {
+      files: ['.eslintrc.{js,cjs}'],
+      parserOptions: {
+        sourceType: 'script',
+      },
+    },
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2021,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint'],
+  ignorePatterns: ['node_modules/', 'github-repo-size-extension/'],
+  rules: {},
+};

.gitattributes

@@ -1,2 +1,3 @@
 # Auto detect text files and perform LF normalization
+*.lockb binary diff=lockb
 * text=auto

.github/dependabot.yml

@@ -0,0 +1,6 @@
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'weekly'

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Extension Build CI
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: |
+          bun install
+
+      - name: Build extension
+        run: |
+          bun run build

.github/workflows/format.yml

@@ -0,0 +1,27 @@
+name: Extension Format CI
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: |
+          bun install
+
+      - name: Check code formatting
+        run: bun run check

.github/workflows/lint.yml

@@ -0,0 +1,26 @@
+name: Extension Lint CI
+
+on:
+  push:
+    branches: ['**']
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Use bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Check code linting
+        run: bun run lint

.prettierignore

@@ -0,0 +1,5 @@
+dist
+node_modules/
+package-lock.json
+pnpm-lock.yaml
+bun.lockb

README.md

@@ -50,10 +50,10 @@ For more information, refer to [create-catonaut](https://github.com/AminoffZ/cre
 
 ![image](https://github.com/AminoffZ/catonaut/assets/55880031/261b38a7-09d5-417a-a908-807c29bf37fb)
 
-Use the template or clone the project, navigate into the project folder and run:
+Use the template, clone the project or use the create-catonaut command, navigate into the project folder and run:
 
 ```bash
-bun i
+bun install
 ```
 
 ### The manifest
@@ -107,7 +107,7 @@ Example:
 
 ### JavaScript
 
-To add JavaScript to modify the page, edit the src/scripts/content.ts. It will be compiled to JavaScript when you build the extension. Look at **Build** for more information.
+To add JavaScript to modify the page, edit the `src/scripts/content.ts`. It will be compiled to JavaScript when you build the extension. Look at **Build** for more information.
 
 ### What is a content.ts?
 
@@ -127,21 +127,21 @@ For additional information visit the [background script](https://developer.chrom
 
 ### CSS
 
-To add CSS to the DOM, you need to create a CSS file in the public folder and reference it in the manifest.json. The above manifest example assumes there is a file called content.css in the public/assets/styles/ folder.
+To add CSS to the DOM, you need to create a CSS file in the public folder and reference it in the `manifest.json`. The above manifest example assumes there is a file called `content.css` in the `public/assets/styles/` folder.
 
 ### HTML
 
 For manipulating the DOM, HTML can be added or changed [programmatically](https://developer.mozilla.org/en-US/docs/Web/API/Document) using JavaScript. Your best friends for achieving this are most likely going to be [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), [document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) and [Node.insertBefore()](https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore).
 
 ## The Popup
 
-You can modify the popup just like you would modify an Astro app. You can start by modifying the src/pages/index.astro file. When starting, there is a Placeholder component inside the body that you can modify at src/components/Placeholder.astro or remove.
+You can modify the popup just like you would modify an Astro app. You can start by modifying the `src/pages/index.astro` file. When starting, there is a Placeholder component inside the body that you can modify at `src/components/Placeholder.astro` or remove.
 
 ### Changing the icon
 
 You can generate the icons from an image.
 
-1. Replace the public/assets/images/example.png
+1. Replace the `public/assets/images/example.png`
 2. Run the following command in the terminal:
 
 ```bash
@@ -172,18 +172,36 @@ To build the extension, run:
 bun run build
 ```
 
+Or
+
+```bash
+bun run build:firefox
+```
+
+This will build the extension in the dist folder.
+
 ## 🏗️ Project structure
 
-<pre>
+```bash
 root
+├── 📁 .github
+    └── 📁 workflows
 ├── 📁 build-tools
 ├── 📁 dist
 ├── 📁 public
 └── 📁 src
     ├── 📁 pages
     └── 📁 scripts
         └── 📁 internal
-</pre>
+```
+
+### .github
+
+Contains a `dependabot.yml`, you only need to change the schedule interval to your liking and enable dependabot on github.
+
+### .github/workflows
+
+Contains workflows to verify the formatting, linting and building of your project.
 
 ### build-tools
 
@@ -192,6 +210,7 @@ Contains tools used for building the extension. You should not need to modify an
 ### dist
 
 Contains the built extension. This folder can be loaded as an unpacked extension.
+Can be changed by setting outDir in `astro.config.ts`d and changing any reference to `dist`.
 
 ### public
 
@@ -203,25 +222,34 @@ Contains the source files. This is where you will be doing most of your work.
 
 ### src/pages
 
-Contains the index.astro. This is compiled to HTML when building the extension and functions as the popup. I find adding a folder src/components/ and importing them in the index.astro to be a good way to structure the popup.
+Contains the `index.astro`. This is compiled to HTML when building the extension and functions as the popup. I find adding a folder src/components/ and importing them in the `index.astro` to be a good way to structure the popup.
 
 ### src/scripts
 
-Contains the content.ts and background.ts. These are compiled to JavaScript when building the extension. The content.ts is injected into the DOM of the page.
+Contains the `content.ts` and `background.ts`. These are compiled to JavaScript when building the extension. The content.ts is injected into the DOM of the page.
 
 ### src/scripts/internal
 
-Not necessary although I find that a useful way to structure the scripts is to add files in this folder and import their functionality in the content.ts and background.ts.
+Not necessary although I find that a useful way to structure the scripts is to add files in this folder and import their functionality in the `content.ts` and `background.ts`.
 
 ## 💅 Formatting
 
-I added a .prettierrc for contributing. If building for your own purposes, feel free to remove it.
+I added a `.prettierrc` for contributing. If building for your own purposes, feel free to remove it.
 To format with the provided configuration, run:
 
 ```bash
 bun run format
 ```
 
+## 👕 Linting
+
+There's an `.eslintrc.cjs` for the linting configuration.
+To lint with the provided configuration, run:
+
+```bash
+bun run lint
+```
+
 ## LICENSE
 
 Catonaut is under [MIT License](https://github.com/AminoffZ/catonaut/blob/main/LICENSE).

build-tools/create-icons.ts

@@ -14,15 +14,15 @@ const filename = 'example.png';
  * Sizes: 16, 32, 48, 128
  */
 function createIcons() {
-  for (let size of [16, 32, 48, 128]) {
+  for (const size of [16, 32, 48, 128]) {
     imagemagick.resize(
       {
         srcPath: `${root}${filename}`,
         dstPath: `${root}icon${size}.png`,
         width: size,
         height: size,
       },
-      (err, res) => {
+      (err /* ,res */) => {
         if (err) throw err;
       }
     );

package.json

@@ -2,28 +2,36 @@
   "name": "catonaut",
   "module": "bundler.ts",
   "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "bun run manifest && bun run astro build && cd build-tools && bun run csp && bun bundler.ts",
+    "build:firefox": "bun run manifest firefox && bun run astro build && cd build-tools && bun run csp && bun bundler.ts firefox",
+    "preview": "astro preview",
+    "astro": "astro",
+    "csp": "bun -b extract-inline.ts",
+    "icons": "cd build-tools && bun create-icons.ts",
+    "manifest": "bun -b updateManifest.ts",
+    "format": "prettier --write .",
+    "check": "prettier --check .",
+    "lint": "eslint ."
+  },
   "dependencies": {
     "astro": "^3.2.1"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.246",
     "@types/imagemagick": "^0.0.33",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
     "bun-types": "latest",
+    "chalk": "4.1.2",
+    "eslint": "^8.57.0",
     "imagemagick": "^0.1.3",
     "prettier": "^3.0.3"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
-  },
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build && cd build-tools && bun run csp && bun bundler.ts",
-    "preview": "astro preview",
-    "astro": "astro",
-    "format": "prettier --write '**/*.{js,jsx,ts,tsx,json,md}' '!build/**' '!node_modules/**'",
-    "csp": "bun extract-inline.ts",
-    "icons": "cd build-tools && bun create-icons.ts"
-  },
-  "type": "module"
+  }
 }

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Catonaut",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "content_scripts": [
     {
       "matches": ["http://*/*"],
@@ -15,12 +15,6 @@
   "action": {
     "default_popup": "index.html"
   },
-  "browser_specific_settings": {
-    "gecko": {
-      "id": "[email protected]",
-      "strict_min_version": "42.0"
-    }
-  },
   "icons": {
     "16": "assets/images/icon16.png",
     "32": "assets/images/icon32.png",