Solution to userscript not refreshing on every page load

testuser3158 commented 3 years ago

Hi,

Even with the use of proxy script and setting Tampermonkey's externals update interval to always, I noticed the old version of script would remain active for one or two page reloads. It seems like common problem so I'll leave my solution here, in case it's of use for someone.

In Tampermonkey's extension details page over at chrome://extensions/?id=dhdgffkkebhmkfjojejmpbldmpobfkfo, enable "Allow access to file URLs"

Use this webpack configuration:

devServer: {
  static: path.resolve(__dirname, 'dist'),
  devMiddleware: { writeToDisk: true }
},
plugins: [
  new WebpackUserscript({
    proxyScript: {
      baseUrl: `file://${path.resolve(__dirname, dist)}`,
      filename: '[basename].proxy.user.js',
      enable: !isProductionBuild
    }
  })
]

The important bits are that we make webpack dev server write updated script to disk, so that Tampermonkey can access it with the @require header that now points to file:// instead of the webpack dev server.

Full configuration example here: https://github.com/testuser3158/ylis-suodatin/blob/master/webpack.config.js

momocow commented 3 years ago

Thanks for providing the information!

Maybe I should put this into the README for anyone who has been bothered in this caching and refreshing issues.

Trinovantes commented 3 years ago

I found after upgrading to webpack-dev-server@4, I also need to set hot: false

    devServer: {
        hot: false,
        devMiddleware: {
            writeToDisk: true,
        },
    },
    plugins: [
        new WebpackUserscript({
            proxyScript: {
                enable: isDev,
                baseUrl: url.pathToFileURL(path.resolve(__dirname, 'dist')).href,
                // filename doesn't need to be set since it already defaults to '[basename].proxy.user.js'
            },
        }),
    ],

mjpieters commented 1 year ago

For what it's worth, ViolentMonkey has a far better reload story. I just open the .user.js file from page served by the webpack devserver, and VM then auto-reloads the script for me. I've not touched the .proxy.js version since switching.

takanuva15 commented 1 month ago

lol I spent about an hour trying to get the hot reload working with the proxy script via Tampermonkey. After that didn't work, I finally bit the bullet and installed the ViolentMonkey extension too. Ohhh boy it worked in about 2 minutes flat with the default user.js file! Thank you @mjpieters for sharing that gold nugget with the internet 💯

momocow / webpack-userscript

Solution to userscript not refreshing on every page load #63