use crxjs/vite-plugin for Hot Module Replacement in Chrome extension …

…environment. Info in README
AdamNowotny · Aug 31, 2024 · 930b5e9 · 930b5e9
1 parent 33cd025
commit 930b5e9
Show file tree

Hide file tree

Showing 12 changed files with 1,030 additions and 468 deletions.
diff --git a/README.markdown b/README.markdown
@@ -62,22 +62,26 @@ This will open project with all needed dependencies.
 ## Installation (manual)
 
 1. Install [Node.js](http://nodejs.org/)
-2. Go to project directory and run:
+2. Install all VSCode extensions listed in `.devcontainer/devcontainer.json`.
+
+## Build
+
+Go to project directory and run:
 
 -   `npm install`
 -   `npm run dist`
 
-3. Open Chrome Extension manager and `Load unpacked extension..` from `dist/BuildReactor` folder.
+3. Open Chrome Extension manager and `Load unpacked extension..` from `dist/build` folder.
 
-## Testing
+## Development
 
 `npm test` - run unit tests
 
 `npm run test:watch` - use during development to run tests continuously
 
-`npm run dev` - opens web server at `http://localhost:5137/` for popup and dashboard testing.
+`npm run dev` - opens web server at `http://localhost:5137/` and also allows adding extension in Chrome pointing at `dist/` folder. Hot module Replacement is on. You need to later use `npm run dist` to build a package that does not require a running server.
 
-**Note** - Use `core.init({ test: true })` to get mocked responses as service worker is not available. Without it the pages will fail to load in Vite web server.
+`npm run dev:mock` - runs webserver at `http://localhost:5137/` for testing with mocked responses from service worker. useful to run browser inside VS for quick feedback.
 
 ## Contribute
 

diff --git a/src/dashboard/dashboard.html → dashboard.html b/src/dashboard/dashboard.html → dashboard.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-csp>
+<html lang="en">
     <head>
         <title>BuildReactor dashboard</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,6 +8,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <script type="module" src="dashboard.tsx"></script>
+        <script type="module" src="src/dashboard/dashboard.tsx"></script>
     </body>
 </html>
diff --git a/index.html b/index.html
@@ -8,13 +8,13 @@
     </head>
     <body>
         <div>
-            <a href="/src/dashboard/popup.html">Popup</a>
+            <a href="/popup.html">Popup</a>
         </div>
         <div>
-            <a href="/src/dashboard/dashboard.html">Dashboard</a>
+            <a href="/dashboard.html">Dashboard</a>
         </div>
         <div>
-            <a href="/src/options/options.html">Options</a>
+            <a href="/options.html">Options</a>
         </div>
     </body>
 </html>
diff --git a/manifest.json b/manifest.json
diff --git a/src/options/options.html → options.html b/src/options/options.html → options.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-csp>
+<html lang="en">
     <head>
         <title>BuildReactor options</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -8,6 +8,6 @@
     </head>
     <body>
         <div id="app"></div>
-        <script type="module" src="options.tsx"></script>
+        <script type="module" src="src/options/options.tsx"></script>
     </body>
 </html>