webpack-dev-server: auto reload for tampermonkey script

Question

I am trying to get webpack-dev-server auto-reload a script I am writing to run as userscript in Tampermonkey with the webpack-userscript plugin. I suspect the problem is that the script does run in an external website and not on localhost, so I don't know if this is possible at all.

I observed that the script is trying to make requests to https://<external website host>:8080/sockjs-node/ instead of ws://localhost:8080/sockjs-node. I tried to use a proxy in the dev-server config, but it doesn't work and I'm not sure if this is actually the right approach.

devServer: {
   contentBase: path.join(__dirname, 'dist'),
   proxy: {
      '/sockjs-node': {
         target: 'ws://localhost:8080',
         secure: false,
         ws: true,
      },
   },
},

One thing I observed after setting up the proxy the request changed from https://<external website host>:8080/sockjs-node/ to https://localhost:8080/sockjs-node/ and now it continues to request https://localhost:8080/sockjs-node/ even when I remove the proxy.

score 0 · Accepted Answer · answered May 08 '20 at 18:07

After some more trial and error I found the solution. The problem was that the external site was served over https and browsers prevent unsecure socket connections for these sites.

So I had to configure the dev server to use https as well, but the default self-signed certificate isn't enough. Per this comment I created a root CA and a certificate for localhost with mkcert (on Windows I had to manually add the root CA into the browser's certificate store) and then the configuration was simply:

devServer: {
   contentBase: path.join(__dirname, 'dist'),
   disableHostCheck: true,
   https: {
      key: readFileSync(path.resolve('../../localhost-key.pem')),
      cert: readFileSync(path.resolve('../../localhost.pem')),
      ca: readFileSync(path.join(os.homedir(), 'AppData/Local/mkcert/rootCA.pem')),
   },
},

webpack-dev-server: auto reload for tampermonkey script

1 Answers1