Fix port configuration not working

README.md

@@ -44,13 +44,33 @@ Example:
 module.exports = {
   // Specify the port of hot reload server, defaults to 9012
   port: 9012,
-  // Specify the directory you want to watch, defaults to 'dist
+  // Specify the directory you want to watch, defaults to 'dist'
   directory: 'dist',
   // Specifies an array of filenames that should be excluded in watched directory
   exclude: [],
 }
 ```
 
+If you want to set the port, you also need to expose it with `process.env.MV3_HOT_RELOAD_PORT` to
+the client side.
+
+An example:
+
+```js
+// webpack.config.js
+
+const config = require('./mv3-hot-reload.config')
+
+module.exports = {
+  // ...
+  plugins: [
+    new webpack.EnvironmentPlugin({
+      MV3_HOT_RELOAD_PORT: config.port,
+    }),
+  ],
+}
+```
+
 ## Example
 
 [pacexy/chrome-extension-typescript-starter](https://github.com/pacexy/chrome-extension-typescript-starter)

src/content.ts

@@ -1,6 +1,6 @@
-import { isDev, Message } from './utils'
+import { isDev, Message, PORT } from './utils'
 
-const ws = new WebSocket('ws://localhost:9012')
+const ws = new WebSocket(`ws://localhost:${PORT}`)
 
 if (isDev) {
   ws.addEventListener('message', (event) => {

src/utils.ts

@@ -4,3 +4,5 @@ export enum Message {
 }
 
 export const isDev = process.env.NODE_ENV === 'development'
+
+export const PORT = process.env.MV3_HOT_RELOAD_PORT ?? 9012