pull in latest changes from template

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+name: Bug report
+about: Something doesn't work.
+title: "[BUG]"
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Steps/attempts taken to fix**
+I've tried X, Y, and Z...but it's not working. What should I do?
+NOTE: You should always try and look for a fix first.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. Windows, Linux, MacOS] including version
+ - Browser [e.g. chrome, firefox] including version

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 14
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 3
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: true

.github/workflows/ci.yml

@@ -0,0 +1,33 @@
+name: Build and Zip Chrome Extension
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    name: Build
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Build Chrome
+        run: yarn build:chrome
+
+      - name: Upload Chrome extension artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: vite-web-extension-chrome
+          path: dist_chrome

.gitignore

@@ -382,6 +382,8 @@ $RECYCLE.BIN/
 
 # build
 /dist
+/dist_chrome
+/dist_firefox
 
 # etc
 .idea

README.md

@@ -17,7 +17,7 @@ If you tend to have tons of tabs open, or are a OneTab user, make sure to check
 - [Intro](#intro)
 - [Features](#features)
 - [Usage](#usage)
-  - [Setup](#setup) 
+  - [Getting Started](#gettingStarted) 
   - [Customization](#customization)
   - [Publish](#publish)
 - [Tech Docs](#tech)
@@ -40,86 +40,108 @@ well with this template. [Check it out here](https://gist.github.com/JohnBra/c81
 - [React 18](https://reactjs.org/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
+- [i18n (optional)](https://developer.chrome.com/docs/extensions/reference/api/i18n)
 - [ESLint](https://eslint.org/)
 - [Chrome Extension Manifest Version 3](https://developer.chrome.com/docs/extensions/mv3/intro/)
 - [Github Action](https://github.com/JohnBra/vite-web-extension/actions/workflows/ci.yml) to build and zip your extension (manual trigger)
 
 ## Usage <a name="usage"></a>
 
-### Setup <a name="setup"></a>
+### Getting Started <a name="gettingStarted"></a>
 
-#### Chrome
+#### Developing and building
+This template comes with build configs for both Chrome and Firefox. Running
+`dev` or `build` commands without specifying the browser target will build
+for Chrome by default.
 
 1. Clone this repository or click "Use this template"
 2. Change `name` and `description` in `manifest.json`
 3. Run `yarn` or `npm i` (check your node version >= 16)
-4. Run `yarn dev` or `npm run dev`
-5. Load Extension in Chrome
-   1. Open - Chrome browser
-   2. Access - [chrome://extensions](chrome://extensions)
-   3. Tick - Developer mode
-   4. Find - Load unpacked extension
-   5. Select - `dist` folder in this project (after dev or build)
-6. To create an optimized production build, run `yarn build` or `npm run build`.
+4. Run `yarn dev[:chrome|:firefox]`, or `npm run dev[:chrome|:firefox]`
 
-#### Firefox
-By default this template generates a dist for Chrome, but you can also generate a dist for Firefox
-by simply changing a couple of things in the config files.
+Running a `dev` command will build your extension and watch for changes in the 
+source files. Changing the source files will refresh the corresponding 
+`dist_<chrome|firefox>` folder.
 
-This is the complete Firefox setup from a fresh project:
+To create an optimized production build, run `yarn build[:chrome|:firefox]`, or
+`npm run build[:chrome|:firefox]`.
 
-1. Clone this repository or click "Use this template"
-2. Change `name` and `description` in `manifest.json`
-3. Change the `browser` target in `vite.config.ts` to `'firefox'`
-4. Remove `service_worker` and `type` prop in `background` object of `manifest.json` and replace with `"scripts": [ "service-worker-loader.js" ]`
-5. Run `yarn` or `npm i` (check your node version >= 16)
-6. Run `yarn dev` or `npm run dev` (_Firefox does not support hot reloading_)
-7. Load Extension in Firefox
-   1. Open - Firefox browser
-   2. Access - [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox)
-   4. Click - Load temporary Add-on
-   5. Select - any file in `dist` folder (i.e. `manifest.json`) in this project (after dev or build)
-8. To create an optimized production build, run `yarn build` or `npm run build`.
+#### Load your extension
+For Chrome
+1. Open - Chrome browser
+2. Access - [chrome://extensions](chrome://extensions)
+3. Tick - Developer mode
+4. Find - Load unpacked extension
+5. Select - `dist_chrome` folder in this project (after dev or build)
+
+For Firefox
+1. Open - Firefox browser
+2. Access - [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox)
+3. Click - Load temporary Add-on
+4. Select - any file in `dist_firefox` folder (i.e. `manifest.json`) in this project (after dev or build)
 
 ### Customization <a name="customization"></a>
+
 #### Adding / removing pages
-The template includes **all** of the extension pages (i.e. New Tab, Dev Panel, Popup, etc.). You will likely have to customize it to fit your needs.
+The template includes **all** of the extension pages (i.e. New Tab, Dev Panel, Popup, etc.).
+You will likely have to customize it to fit your needs.
 
 E.g. you don't want the newtab page to activate whenever you open a new tab:
 1. remove the directory `newtab` and its contents in `src/pages`
 2. remove `chrome_url_overrides: { newtab: 'src/pages/newtab/index.html' },` in `manifest.json`
 
-If you need to declare extra HTML pages beyond those the manifest accommodates, place them in the Vite config under build.rollupOptions.input.
-
+If you need to declare pages in addition to the manifest pages, e.g. a custom `app` page, create a 
+new folder in the `pages` directory and add the corresponding `.html`, `.tsx` and `.css` 
+files (see `options/*` for an example to copy). Then include the root html in the `vite.config.base.ts` 
+file under `build.rollupOptions.input` like so:
+
+```typescript
+// ...
+build: {
+   rollupOptions: {
+      input: {
+         app: resolve(pagesDir, "app", "index.html"),
+      },
+      output: {
+         entryFileNames: (chunk) => `src/pages/${chunk.name}/index.js`,
+      },
+   },
+}
+// ...
+```
+
+#### Styling
 CSS files in the `src/pages/*` directories are not necessary. They are left in there in case you want 
 to use it in combination with Tailwind CSS. **Feel free to delete them**.
 
 Tailwind can be configured as usual in the `tailwind.config.cjs` file. See doc link below.
 
 #### Internationalization (i18n)
-To enable internationalization set the `localize` flag in the `vite.config.ts` to `true`.
+To enable internationalization set the `localize` flag in the `vite.config.base.ts` to `true`.
+
+The template includes a directory `locales` with a basic setup for english i18n. Enabling i18n
+will pull the name and description for your extension from the english translation files instead
+of the manifest.
 
-The template includes a directory `locales` with the basic setup for english i18n. Follow the
-instructions in the [official docs](https://developer.chrome.com/docs/extensions/reference/api/i18n#description) 
+Follow the instructions in the [official docs](https://developer.chrome.com/docs/extensions/reference/api/i18n#description) 
 to add other translations and retrieve them in the extension.
 
-If you don't need i18n you can ignore the `locales` directory for, as it won't
+If you don't need i18n you can ignore the `locales` directory until you need it, as it won't
 be copied into the build folder unless the `localize` flag is set to `true`.
 
-
-### Publish your extension <a name="publish"></a>
+### Publish your extension to the CWS<a name="publish"></a>
 To upload an extension to the Chrome store you have to pack (zip) it and then upload it to your item 
 in the Chrome Web Store.
 
 This repo includes a Github Action Workflow to create a 
-[optimized prod build and create the zip file](https://github.com/JohnBra/vite-web-extension/actions/workflows/ci.yml).
+[optimized prod build and the zip file](https://github.com/JohnBra/vite-web-extension/actions/workflows/ci.yml).
 
 To run the workflow do the following:
 1. Go to the **"Actions"** tab in your forked repository from this template
-2. In the left sidebar click on **"Build and Zip Extension"**
+2. In the left sidebar click on **"Build and Zip Chrome Extension"**
 3. Click on **"Run Workflow"** and select the main branch, then **"Run Workflow"**
 4. Refresh the page and click the most recent run
-5. In the summary page **"Artifacts"** section click on the generated **"vite-web-extension"**
+5. In the summary page **"Artifacts"** section click on the generated **"vite-web-extension-chrome"**
 6. Upload this file to the Chrome Web Store as described [here](https://developer.chrome.com/docs/webstore/publish/)
 
 # Tech Docs <a name="tech"></a>

custom-vite-plugins.ts

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import { resolve } from 'path';
-import type { PluginOption } from 'vite';
+// import type { PluginOption } from 'vite';
 
 // plugin to remove dev icons from prod build
 export function stripDevIcons (isDev: boolean) {
@@ -11,6 +11,7 @@ export function stripDevIcons (isDev: boolean) {
     resolveId (source: string) {
       return source === 'virtual-module' ? source : null
     },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
     renderStart (outputOptions: any, inputOptions: any) {
       const outDir = outputOptions.dir
       fs.rm(resolve(outDir, 'dev-icon-32.png'), () => console.log(`Deleted dev-icon-32.png from prod build`))
@@ -54,5 +55,4 @@ export function crxI18n (options: { localize: boolean, src: string }): PluginOpt
       }
     }
   }
-}
-  */
+}*/

nodemon.chrome.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "__DEV__": "true"
+  },
+  "watch": [
+    "src",
+    "utils",
+    "vite.config.base.ts",
+    "vite.config.chrome.ts",
+    "manifest.json.ts",
+    "manifest.dev.json"
+  ],
+  "ext": "tsx,css,html,ts,json",
+  "ignore": [
+    "src/**/*.spec.ts"
+  ],
+  "exec": "vite build --config vite.config.chrome.ts --mode development"
+}

nodemon.firefox.json

@@ -0,0 +1,18 @@
+{
+  "env": {
+    "__DEV__": "true"
+  },
+  "watch": [
+    "src",
+    "utils",
+    "vite.config.base.ts",
+    "vite.config.firefox.ts",
+    "manifest.json.ts",
+    "manifest.dev.json"
+  ],
+  "ext": "tsx,css,html,ts,json",
+  "ignore": [
+    "src/**/*.spec.ts"
+  ],
+  "exec": "vite build --config vite.config.firefox.ts --mode development"
+}

package.json

@@ -5,11 +5,15 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/JohnBra/web-extension.git"
+    "url": "https://github.com/JohnBra/vite-web-extension.git"
   },
   "scripts": {
-    "build": "vite build",
-    "dev": "nodemon"
+    "build": "vite build --config vite.config.chrome.ts",
+    "build:chrome": "vite build --config vite.config.chrome.ts",
+    "build:firefox": "vite build --config vite.config.firefox.ts",
+    "dev": "nodemon --config nodemon.chrome.json",
+    "dev:chrome": "nodemon --config nodemon.chrome.json",
+    "dev:firefox": "nodemon --config nodemon.firefox.json"
   },
   "type": "module",
   "dependencies": {
@@ -20,7 +24,7 @@
   },
   "devDependencies": {
     "@crxjs/vite-plugin": "2.0.0-beta.26",
-    "@types/chrome": "^0.0.281",
+    "@types/chrome": "^0.0.278",
     "@types/node": "^20.12.11",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
@@ -42,6 +46,7 @@
     "tailwindcss": "^3.4.14",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.2"
   }
 }