在真实的IDE中开发Tampermonkey脚本，并自动部署到OpenUserJs repo

Question

我最近开始开发Tampermonkey脚本，该脚本托管在OpenUserJs上。看来我将在这个脚本上投入更多的时间来保持它的最新状态，并在时间到来时扩展他的功能。我在Tampermonkey编辑器上编写的第一行，它集成在chrome（脚本的编辑按钮）中。

但是我不喜欢它，我最缺少的是某种自动完成/智能感知。 Visual Studio在这里要好得多，所以我切换到了VS.问题：在进行任何更改后，我必须复制孔代码并将其粘贴到Tampermonkey编辑器（Google Chrome）中。这很烦人，而且不是很灵活，因为当脚本增长时我无法在多个js文件中拆分我的代码。

那么有没有办法自动化这个？我的想象力是：我将js文件保存在VS（ctrl + s）中，然后将脚本加载到google chrome的本地开发实例中以进行测试。

延期：

我想在OpenUserJs上发布alpha / beta版本作为托管版本。所以我可以在不同的系统上轻松测试发布。而且我还有至少一个系统，在那里我通过OpenUserJs仓库进行真正的更新过程，就像我的最终用户一样。我认为这很重要，根据我的手动工作流程（OpenUserJs编辑器中的c＆p），我已经看到了一些差异。

我最喜欢的灵魂就是我从git中知道的某种分支。因此，我从OpenUserJs安装脚本，就像我的用户使用生产脚本一样，但我可以选择某个地方来获取分支发展而不是主人。 OpenUserJs似乎支持github作为源代码库，但没有任何类型的分支。我无法想象，对于这样的问题没有解决方案，至少每个拥有更大脚本的开发人员都应该拥有......

Answer 1

没有复制和粘贴，即时更新，纯粹的幸福：

1. 转到Chrome => Extensions并找到TamperMonkey'卡'。点击详情。在打开的页面上，允许它访问文件URL：

2. 将整个脚本保存在文件系统中的任何位置，包括==UserScript==标头。这适用于所有桌面操作系统，但由于我使用macOS，我的路径将是：/Users/me/Scripts/SameWindowHref.user.js
3. 现在，转到TM的仪表板，在编辑器中编辑脚本并删除除==UserScript==标题之外的所有内容
4. 添加到标题的@require属性指向脚本的绝对路径。在我的例子中，TamperMonkey编辑器如下所示：

现在每次该脚本匹配时，TamperMonkey将直接从您的磁盘加载代码，位于您在@require中提供的系统路径。

我使用VSCode（可以说是有史以来最好的多平台代码编辑器。而且是免费的），这就是我在脚本上工作的地方，但任何文本编辑器都可以。它应该如下所示：

（我很抱歉，在这张截图中，@require路径应该读取/Users/me/Scripts/SameWindowHref.user.js，就像我们在TM编辑器中设置的路径一样）

代码中的每个更改都由此编辑器自动保存，因此请记得在进入浏览器进行测试之前保存它。

您仍然需要在每次更改时重新加载网站，但您可以使用https://www.browsersync.io之类的内容轻松实现自动化。 Git也将在开发过程中提供帮助。当我编辑用户脚本时，我只需编写代码，并在浏览器中查看结果，无需重复操作！它很容易设置。

请分享你所有的创作:)

Bonus tips!

1）使用Git或其他SCM

您必须包含一个@updateURL标记，后跟包含原始文件的URL。请注意，需要使用@version标记才能进行更新检查。绝大多数用户不需要@downloadURL标签，所以除非你的脚本有大量的跟随者基础，否则只需使用@updateURL。像这样：

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

TM将根据设置选项卡中的配置检查更新：

Externals设置从脚本的@require调用的脚本检查更新的频率（例如jQuery）。

您还可以“强制”更新检查：

2）如果你想使用外部脚本（如jQuery）

它必须至少存在于TM的编辑器中才能加载Chrome，但我强烈建议您将两个标题（TM和磁盘标题上的文件）保持完全相同以避免混淆。像这样：

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

3）我从来没有需要这个（虽然我不使用Windows），但为了以防万一，如果它不适合你，请在路径的开头添加file:// URI scheme。例如：

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

Answer 2

我想发布alpha / beta版本[...]

您可以使用@updateURL userscript标记来指出Web URL [1]并将其与git一起使用以满足您的需求。

---

这是我实现它的方式：

• 在我的Gitlab实例上，https://foo.com/user/project/raw/develop/main.user.js指出了develop分支的原始用户脚本文件。
• 项目描述中提供了开发和其他重要功能分支的链接，以便人们可以选择遵循开发版本而不是主版本[2]。
• 我使用这个模板进行分享：

// ==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...
})();

• 然后在触发Greasemonkey或Tempermonkey上的“检查用户脚本更新”按钮时，他们将安装此URL提供的脚本。

---

[1]可从您要安装的地方访问，例如。来自您的个人计算机的公共Github repo，或来自您工作计算机的公司的私有Gitlab实例

[2]请注意，为了在点击链接时可以安装，文件名必须以.user.js结尾

Answer 3

扩展到Carles的答案

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

如果标题更改，则需要执行另一个脚本

Answer 4

Tampermonkey使用一种名为WebDAV的东西来使用外部编辑器来编辑用户脚本; TamperDAV。

我还没有尝试过，但看起来应该可以连接Visual Studio。