Solution to userscript not refreshing on every page load

[testuser3158]

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.

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

2. 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

Related:

• https://github.com/Tampermonkey/tampermonkey/issues/723
• https://github.com/Tampermonkey/tampermonkey/issues/767

Lastly, thanks @momocow for this great plugin.

[momocow]

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]

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]

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]

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 💯