Develop Tampermonkey scripts in a real IDE with automatic deployment to OpenUserJs repo Develop Tampermonkey scripts in a real IDE with automatic deployment to OpenUserJs repo google-chrome google-chrome

Develop Tampermonkey scripts in a real IDE with automatic deployment to OpenUserJs repo


I've answered this in another question; I think someone should merge them. In the meantime, since I haven't seen a lot of info on this, I'll put it here for the next person looking for help.

Coding to instant updates 👨‍💻

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

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

enter image description here

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

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

  3. 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:

enter image description here


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

Execution Contexts 💻

If you have multiple JavaScript files called with @require (like jQuery or when fragmenting a massive script into smaller pieces for a better experience), don't skip this part.

The @require paths can reference *.user.js or directly *.js files, and any UserScript-style comment headers in these files have no effect.

From the main script's ==UserScript== header, all @require files are text-concatenated in the order specified, with a single newline separating each file. This amalgamation runs as one large script. This means any global function or variable in any file will also be global in all your userscript's files, which isn't ideal.Errors in one file may influence how subsequent files run. Additionally, to enable strict mode on all of your files, 'use strict'; must be the first statement of the first file listed with @require.

After all @require files run, your main UserScript (the one accessed by TamperMonkey's editor) is run in a separate context. If you want strict mode, you must also enable it here.

Workflow 🕺

Now every time that script matches (@match) the website you are visiting, TamperMonkey will directly load and run the code straight from the file in disk, pointed by the @require field.

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:

enter image description here

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

Every change in the code is saved automatically in VSCode, so if yours doesn't remember to save. Then you'll have to reload the website to see the changes, but you can easily automate this as well using a one-liner from browser-sync's CLI, to mention one tool, and have a great experience

If you're not using git, you should consider using it with your userscripts, even if you are the sole developer. It will help keep track of your progress, sanely work on different features at the same time, roll back mistakes, and help you automatically release new updates to your users!

And please share all your creations here and here 😄



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:

enter image description here

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:

enter image description here

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:

enter image description here

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. Simply @require it like this to use it:

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

RTFM

Take a look at TM's documentation page; it doesn't bite!It's very concise, and with a quick read, you'll have a big picture of what you can do without much effort! 💪


I want to publish alpha/beta release [...]

You can use the @updateURL userscript tag to point out a web URL [1] and use it along with git to achieve your need.


Here's how I implement it:

  • On my Gitlab instance https://foo.com/user/project/raw/develop/main.user.js points out the raw userscript file of the develop branch.
  • Links to develop and other important feature branches are available on the description of the project so that people can choose to follow a development version instead of the master one[2].
  • and I use this template for sharing:
// ==UserScript==// @name         New Userscript// @namespace    foo.com// @version      0.3// @description  try to take over the world!// @author       user// @match        https://bar.org/*// @grant        none// @updateURL    https://foo.com/user/project/raw/develop/main.user.js// ==/UserScript==(function() {    'use strict';    // Your code here...})();
  • Then upon triggering Check for userscript updates button on Greasemonkey or Tempermonkey, they will install the script available at this URL.

[1] Accessible one from where you want to install eg. public Github repo from your personal computer, or your companie's private Gitlab instance from your work computer

[2] note that in order to be installable upon a click on the link, the name of the file must ends with .user.js


Extension to Carles's answer

from time import *  import pathlibfrom pyautogui import *from glob import *from pyperclip import *import reauthor='SmartManoj'repo='SmartUserScripts'namespace=f'https://github.com/{author}'def local():    return f'''// ==UserScript==// @name        {name}// @version     0.1// @description try to take over the world!// @author      {author}// @namespace   {namespace}// @match       {link}// @updateURL   https://raw.githubusercontent.com/{author}/{repo}/master/{fn}// ==/UserScript=='''def browser():    return f'''// ==UserScript==// @name        {name}// @version     0.1// @description try to take over the world!// @author      {author}// @namespace   {namespace}// @match       {link}// @require     {local_path}/{fn}// @grant       GM_setClipboard// ==/UserScript=='''hotkey('win','3') # chrome indexhotkey('ctrl','shift','h')fn=prompt('Enter File name')name=prompt('Enter Script name',default=fn)sleep(1)hotkey('ctrl','a')hotkey('ctrl','x')local_path=pathlib.Path(__file__).parents[0].as_uri()   ext='.user.js'l=len(glob(fn+ext))if l:fn+=f'_{l+1}'fn+=exta=paste()link=re.search('@match\s*(.*)',a)[1].strip()print(local(),file=open(fn,'w'))copy(browser())hotkey('ctrl','v')

Latest version

Need to do another script if header changes