diff --git a/README.md b/README.md index 5ea2d5b..b1ee892 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,11 @@ Start the development server with HMR: npm run dev ``` -This will create a `dist` folder with the extension build. To load it in Chrome: +The development server will start on `http://localhost:5173/`. You can: +- View the dev server dashboard at `http://localhost:5173/` +- Preview individual components like `http://localhost:5173/src/popup/popup.html` + +This will also create a `dist` folder with the extension build. To load it in Chrome: 1. Open Chrome and navigate to `chrome://extensions/` 2. Enable "Developer mode" (toggle in the top right) diff --git a/index.html b/index.html new file mode 100644 index 0000000..599eb6b --- /dev/null +++ b/index.html @@ -0,0 +1,111 @@ + + + + + + Modern Tools - Development Server + + + +
+

🛠️ Modern Tools Extension

+

Chrome Extension Development Server

+ +
+

✅ Dev Server Running

+

The Vite development server is running successfully! You can access the extension components below:

+
+ +
+ +

📱 Popup Page

+

View the extension popup interface

+ +
+ +
+

🔧 Loading the Extension

+

To use this extension in Chrome:

+
    +
  1. Open Chrome and navigate to chrome://extensions/
    2. +
  2. Enable "Developer mode" (toggle in the top right)
    3. +
  3. Click "Load unpacked"
    4. +
  4. Select the dist folder from this project
    5. +
+

Changes to your code will automatically update in the extension with Hot Module Replacement (HMR)!

+
+
+ + diff --git a/vite.config.js b/vite.config.js index 58d169d..25266a3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -6,6 +6,13 @@ export default defineConfig({ plugins: [ crx({ manifest }) ], + server: { + port: 5173, + strictPort: true, + hmr: { + port: 5173 + } + }, build: { rollupOptions: { input: {