Hot reload does not work for content_scripts

[Toumash]

First of all - great work man! This is the only simple repo containing all of the features without any b.s. in the world. I've got a problem where after the initial load, when i change something - there is an error in the console that the WDS has been disconnected, and the code is trying to connect by using SSL, but in the file webpack.js its clearly http not https!

line 17: 'webpack-dev-server/client?http://localhost:' + env.PORT,

[hirenchalodiya1]

@Toumash I had face this issue in one of my extension. I was able to fix using below webpack.js. I only needed popup in that extension so can't say for sure about content script

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

var WebpackDevServer = require('webpack-dev-server'),
    webpack = require('webpack'),
    config = require('../webpack.config'),
    env = require('./env'),
    path = require('path');

var options = config.chromeExtension || {};
var excludeEntriesToHotReload = options.notHotReload || [];

for (var entryName in config.entry) {
    if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
        config.entry[entryName] = [
            'webpack/hot/dev-server',
            'webpack-dev-server/client?hot=true&hostname=localhost&port=' + env.PORT
        ].concat(config.entry[entryName]);
    }
}

config.plugins = [new webpack.HotModuleReplacementPlugin()].concat(
    config.plugins || []
);

delete config.chromeExtensionBoilerplate;

var compiler = webpack(config);

var server = new WebpackDevServer({
    https: false,
    hot: false,
    client: false,
    port: env.PORT,
    host: 'localhost',
    static: {
        directory: path.join(__dirname, '../dist'),
        watch: false
    },
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
    devMiddleware: {
        publicPath: `http://localhost:${env.PORT}`,
        writeToDisk: true
    },
    allowedHosts: 'all'
}, compiler);

if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept();
}

(async () => {
    await server.start();
})();

I had updated some dependencies as well

"dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/material": "^5.0.3",
    "@types/react": "^17.0.27",
    "bootstrap": "^5.1.3",
    "react": "^16.14.0",
    "react-bootstrap": "^1.6.4",
    "react-dom": "^16.14.0",
    "react-hot-loader": "^4.13.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@types/chrome": "^0.0.159",
    "babel-loader": "^8.2.2",
    "babel-preset-react-app": "^10.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^9.0.1",
    "css-loader": "^6.4.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.3.0",
    "webpack": "^5.58.1",
    "webpack-cli": "^4.9.0",
    "webpack-dev-server": "^4.3.1",
    "write-file-webpack-plugin": "^4.5.1"
  }

[Toumash]

Looks like something more is happening, but still not working - Websocket errors. I've reproduced the error in this PR: https://github.com/Toumash/chrome-manifest-v3-webpack-hotreload-template-example/pull/1

[yellott]

@Toumash this happens because webpack tries to fetch hot update from the url opened in tab, you can change that by changing publicPath on devserver to be something like https://192.168.0.101:${port} but even then such requests will be blocked by CORS. I was able to make it work by embeding iframe that contains scprits that I need to hot reload.