How to update tampermonkey script to a local file programatically?

Question

For security reasons, Tampermonkey scripts are not saved in accessible files, but in a plugin data. The only way to edit them live is to use Tampermonkey's integrated editor.

However, I'd rather use IDE, with all it's features. I also want to use webpack to pack the script from multiple files.

To do that, I need a way to programmatically change the script in Tampermonkey to a new version. So far, what I did was manually copy&paste the new script into Tampermonkey's editor and that's really exhausting.

So how to programmatically change Tampermonkey's script sourcecode?

Answer 1

I've answered this in another question. I think they should be merged. In the meantime, since it's very similar and frustrating, I'll put it here for the next person looking for help.

Coding to instant updates

We'll configure just a couple of items so that you can code in your editor and see the changes reflected in the browser without nuisance.

1. Go to Chrome => Extensions and find the TamperMonkey 'card'. Click details. On the page that opens, allow it access to file URLs:

2. Save your script file wherever you want in your filesystem. Save the entire thing, including the ==UserScript== header. This works in all desktop OS's, but since I'm using macOS, my path will be: /Users/me/Scripts/SameWindowHref.user.js

3. Now, go to the TM's dashboard, open the script in question in its editor and delete everything except the entire ==UserScript== header

4. Add to the header a @require property pointing to the script's absolute path.

At this point, TM's editor should look something like this:

---

Update: It seems that using the file:// URI scheme at the beginning of your path now required. On windows systems would be:

// @require      file://C:\path\to\userscript.user.js

For macOS and *nix, we'll need three slashes in a row:

// @require      file:///path/to/userscript.user.js

---

Workflow

Now every time that script matches (@match), TamperMonkey will directly load and run the code straight from the file in disk, which path is provided in @require.

I use VSCode (arguably the best multiplatform code editor ever. And free), so that's where I work on the script, but any text editor will do. It should look like this:

Notice how TM's editor and your IDE/Editor have the same header.

Every change in the code is saved automatically by this particular editor, so remember to save it before going to the browser to test it.

Lastly, you'll have to reload the website to see the changes, but you can easily automate this using a one-liner from browser-sync's CLI, to mention one tool.

If you're not using git, you should consider using it with your userscripts, beneficial tool for the development process and to automatically release new updates to your users!

And please share all your creations :)

---

Bonus tips!

Working with GitHub or other SCMs

You have to add an @updateURL tag followed by the URL with the raw file from GitHub or whatever provider you chose. GitHub's example:

Note that a @version tag is required to make update checks work. The vast majority of users don't need the @downloadURL tag, so unless your script has a massive follower base, use @updateURL.

TM will check for updates as it's configured from the settings tab:

Externals, sets how often the scripts called from your script's @require are checked to update (jQuery for example).

You can also "force" an update check:

Using external libraries (like jQuery)

It must be present at least in TM's editor for Chrome to load it. However, I recommend keeping both headers (the TM's and the file on disk's header) the same to avoid confusion. Then, you just @require it like this:

// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js