Develop Tampermonkey scripts in a real IDE with au

问题:

I recently started development on a Tampermonkey script, which is hosted on OpenUserJs. It seems that I'm going to invest a bit more time in the future on this script by keep it up to date and extend his features when time is there. The first lines I wrote on the Tampermonkey editor which is integrated in chrome (edit button of a script).

But I don't like it, the most thing I'm missing is some kind of autocomplete/intellisense. Visual Studio is much better here, so I switched to VS. The problem: After any changes, I have to copy the hole code and paste it in the Tampermonkey editor (Google Chrome). Thats annoying and not very flexible, since I can't really split my code in multiple js files when the script grows.

So is there a way to automate this? My imagination would be: I save the js file in VS (ctrl + s), then the script is loaded in my local development instance of google chrome for testing purpose.

Extension:

I want to publish alpha/beta releases as hosted version on OpenUserJs. So I can test the release easily on different systems. And I also have at least one system, where I do the real update process over the OpenUserJs repo like my end users will do. I think this is important, I already saw some differences according to my manual workflow (c&p in the OpenUserJs editor).

My preferable soultion would be some kind of branches like I know from git. So that I install the script from OpenUserJs like my users do with the production one, but I can choose somewhere to get e.g. the branch development instead of master. OpenUserJs seems to support github as source base, but no kind of branches. I can't imagine, that there is no solution for such issues, which at least every developer with bigger scripts should have...

回答1:

No copy & pasting, instant updates, pure bliss:

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 whole script wherever you want in your filesystem, 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, go to edit your script in its editor and delete everything except the ==UserScript== header

4. Add to the header a @require property pointing to the script's absolute path. In my case, the TamperMonkey editor looks like this:

Now every time that script matches, TamperMonkey will directly load the code straight from your disk, at the system's path you 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:

(My apologies, in this screenshot the @require path should read /Users/me/Scripts/SameWindowHref.user.js just like the path we set in TM's editor)

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

You'll still have to reload the website on every change, but you can easily automate that using something like https://www.browsersync.io. Git will also help in the development process. When I edit userscripts, I only have to code, and see the results in the browser, no repetitive actions! It's very easy to set up.

And please share all your creations :)

Bonus tips!

1) Working with Git or other SCM

You have to include a @updateURL tag followed by the URL with the raw file. Note that a @version tag is required to make update checks work. The great majority of users don't need the @downloadURL tag, so unless your script has a massive follower base, just use @updateURL. Like so:

// @updateURL   https://github.com/jerone/UserScripts/raw/master/Github_Comment_Enhancer/Github_Comment_Enhancer.user.js
// @version     2.9.0

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:

2) If you want to use an external script (like jQuery)

It must be present at least in TM's editor for Chrome to load it, but I strongly recommend you to keep both headers (the TM's and the file on disk's header) exactly the same to avoid confusion. Like so:

// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require      /Users/me/STUFF/Code/Scripts/SameWindowHref.user.js

3) I've never needed this (I don't use windows though), but just in case, if it's not working for you, add the file:// URI scheme at the beginning of your path. For example:

// @require      file://C:\Blah\bleh\userscript.user.js

回答2:

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

回答3:

Extension to Carles's answer

from time import *  
import pathlib
from pyautogui import *
from glob import *
from pyperclip import *
import re
author='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 index
hotkey('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+=ext
a=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

回答4:

Tampermonkey uses something called WebDAV to use an external editor to edit userscripts; TamperDAV.

I haven't tried it yet, but it looks like connecting with Visual Studio should be possible.