Using an external code editor with Tampermonkey - WazeDev/WazeDev.github.io GitHub Wiki

When you use Tampermonkey's built-in code editor, you're able to make a code change, save it, refresh WME, and immediately see the effects of the code change. If you use an external editor (e.g. Notepad++ or VS Code), it may seem that you need to add an extra step: copy/paste the code into the Tampermonkey editor. However, there is a way to set things up so you don't have to do this.

The first requirement is to allow Tampermonkey to access local files on your PC. These steps only need to be performed once. Note: this assumes you're using a Chromium-based browser (e.g. Chrome, Brave, Edge, etc). Procedures may be slightly different in other browsers.

1. Open your browser's extensions manager (e.g. type chrome://extensions into the address bar).
2. Find the Tampermonkey extension and click the Details button.
   
3. Enable the Allow access to file URLs option.
   

The next steps must be repeated for each script you plan to develop in the external code editor.

1. Create a new Tampermonkey script.
   
2. Delete the auto-generated header and code that Tampermonkey fills in the new script. (should be an empty code page)
3. Copy the entire header from your script and paste it in the new script.
4. Add a line to the header: // @require file://<path>
   Where path is the entire file path, e.g. // @require file://C:\users\myname\scripts\My Script\wme-my-script.js
   Note: if you use VS Code, you can find the file in the left panel browser, right click, and select Copy Path.
5. Edit the script name in the header so that it's obvious this is a development version of your script, and not one that was installed from Greasy Fork, GitHub, etc. For instance, you could add "(DEV)" at the end of the name. You may also wish to change the version # to "dev" or something similar, to indicate the version # in this header does not correspond to the script's real version # (you will see what that means later).
6. Save the new script.
7. If you have an installed version of your script enabled already, you should disable it. Otherwise, you will have two copies of the script running.

At this point, this new copy of your script should be enabled and you can refresh WME to make sure it works. If so, huzzah!

So how does this work? When Tampermonkey reads the header in the "script" you just created, it gets to the line that requires the local file. It reads in the entire file and processes the script code from the file. Since the header in the new Tampermonkey script is the one that Tampermonkey is reading, it ignores the header in the file (including script name, version #, etc). Therefore, it's important to note that any functional changes to the header in your external file must be copied to the Tampermonkey script header. If you forget to do that, your script will not work correctly. While it can be a nuisance to remember to do this in the rare occasions that you need to update the header, the benefit of not having to constantly copy and paste your code into Tampermonkey far outweighs it.