scripts and readme updates

Author: refact0r

README.md

@@ -23,20 +23,9 @@ features:
 
 ### chrome/edge
 
-1. clone/download this repo.
-2. run `npm i` (you must have node.js).
-3. run `npm run build:chrome`. you should see it create a `dist` folder.
-6. go to the chrome extensions manager (`chrome://extensions`).
-7. turn on developer mode in the top right.
-8. click "Load unpacked" in the top left.
-9. select the `dist` folder.
-
-### development / building from source
-
-1. clone/download this repo.
-2. run `npm i` (you must have node.js).
-3. run `npm run dev` to start in development mode. the page will run at `http://localhost:5173`.
-4. run `npm run build` to build for production.
+1. go to <https://chromewebstore.google.com/detail/re-start/fdodcmjeojbmcgmhcgcelffcekhicnop>.
+2. click "Add to [Browser]".
+3. make sure to click "Add extension" and "Keep it" when prompted.
 
 ## usage tips
 
@@ -46,3 +35,11 @@ features:
 - you can force a refresh of the weather and todoist widgets by clicking the top left panel labels.
 - the ping stat is based on how long a request to <https://www.google.com/generate_204> takes. don't take it too seriously.
 - here's a matching [firefox color theme](https://color.firefox.com/?theme=XQAAAAK3BAAAAAAAAABBqYhm849SCicxcUhA3DJozHnOMuotJJDtxcajvY2nrbwtWf53IW6FuMhmsQBmHjQtYV0LyoGIJnESUiSA8WGCMfXU1SYqmE_CaU8iA8bQXAYc2jrXIT6bjoi8T-cSTCi2_9o7kcESfauVKnMZKEKJIeeuT9qsP4Z_T2ya4LBqvZWjm1-pHOmWMq1OU0wrgs4bkzHQWozn4dcm22eBmWyWR55FkcmEsPvvHzhHCZ2ZMQrPXQqrOBLr79GTkJUGa5oslhWTp2LYqdD2gNQ1a8_c5-F91bPVmQerXZWpp-OZ11D1Ai6t1ydqjbVKD3RrGXYJwhcQaAxCKa_ft4VoGrVBq8AXYeJOZdXuOxnYXGhOXXSK_NybBfJLm-2W28qSSdoiW0pTL-iFan3xQQeC0WlSrnRYrRjh7HkgLuI-Ft8Fq5kNC7nVXoo8j9Ml_q2AO_RhE116j_MECbspxaJP58juayX_wNty3V2g5zUsf0gSqpEWGT02oZAF2z6LABKRWTO28wIoMUDvj9WAQGsup95WAmNW7g4WMEIgaiJhmBz9koq0wV7gHQtJB_0x2lJ7WQ488bJi8LvqnW-VT3kZ3GJtyv-yXmRJ)!
+
+## development / build from source
+
+1. clone this repo.
+2. run `npm i` (you must have node.js).
+3. run `npm run dev` to run the page in dev mode at `http://localhost:5173`.
+4. run `npm run watch` to build the extension and watch for changes. this can be used with `web-ext run` to test in firefox.
+5. run `npm run build:firefox` or `npm run build:chrome` to build for production. the built extension will output to `dist/firefox` or `dist/chrome` respectively.

package.json

@@ -5,9 +5,10 @@
     "type": "module",
     "scripts": {
         "dev": "vite",
-        "build": "npm run build:firefox",
-        "build:firefox": "vite build && node scripts/build-manifest.js firefox",
-        "build:chrome": "vite build && node scripts/build-manifest.js chrome",
+        "build": "vite build --outDir dist/firefox",
+        "build:firefox": "vite build --outDir dist/firefox",
+        "build:chrome": "vite build --outDir dist/chrome && node scripts/build-manifest.js chrome dist/chrome",
+        "watch": "vite build --outDir dist/firefox --watch",
         "preview": "vite preview"
     },
     "devDependencies": {

scripts/build-manifest.js

@@ -2,8 +2,8 @@ import fs from 'fs'
 import path from 'path'
 
 const browser = process.argv[2] || 'firefox'
+const distPath = process.argv[3] || './dist'
 const manifestPath = './public/manifest.json'
-const distPath = './dist'
 
 // Read the source manifest
 const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))