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

Question

我最近开始开发基于Tampermonkey脚本的开发，该脚本托管在OpenUserJs上。似乎我将来会在此脚本上投入更多时间，以使其保持最新状态并在有时间时扩展其功能。我在Tampermonkey编辑器上编写的第一行代码已集成到chrome（脚本的编辑按钮）中。

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

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

扩展名：

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

我最好的选择是从git知道的某种分支。这样我就可以像生产用户一样从OpenUserJs安装脚本，但是我可以选择某个地方来获取例如分支开发而不是master。OpenUserJs似乎支持github作为源库，但是没有分支。我无法想象，没有针对此类问题的解决方案，至少每个拥有较大脚本的开发人员都应该拥有...

Answer 1

我已经在另一个问题中回答了这个问题。我认为应该将它们合并。同时，由于它非常相似且令人沮丧，因此我将其放在这里，供下一个寻求帮助的人使用。

编码即时更新

我们将仅配置几个项目，以便您可以在编辑器中进行编码，并在浏览器中轻松看到更改。

1. 转到Chrome => 扩展程序，然后找到TamperMonkey“卡”。单击详细信息。在打开的页面上，允许其访问文件URL：

2. 将脚本文件保存在文件系统中的任何位置。保存整个内容，包括==UserScript==标题。这适用于所有台式机操作系统，但是由于我使用的是macOS，因此我的路径将是：/Users/me/Scripts/SameWindowHref.user.js

3. 现在，转到TM的仪表板，在其编辑器中打开有问题的脚本，然后删除除整个==UserScript==标题以外的所有内容

4. 在头文件中添加一个@require指向脚本绝对路径的属性。

此时，TM的编辑器应如下所示：

更新：似乎现在需要在路径的开头使用file://URI方案。在Windows系统上将是：

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

对于macOS和* nix，我们需要连续三个斜杠：

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

工作流程

现在，每次脚本匹配（@match）时，TamperMonkey都将直接从磁盘中的文件直接加载并运行代码，该路径在中提供@require。

我使用VSCode（可以说是有史以来最好的多平台代码编辑器，而且是免费的），因此我可以在该脚本上工作，但是任何文本编辑器都可以。它看起来应该像这样：

注意TM的编辑器和您的IDE / Editor如何具有相同的标题。

代码中的每个更改都会由该特定的编辑器自动保存，因此请记住在浏览器进行测试之前将其保存。

最后，您必须重新加载网站才能查看更改，但是您可以使用浏览器同步的CLI中的单行代码轻松地自动执行此操作，仅提及一种工具。

如果您不使用git，则应考虑将其与用户脚本一起使用，这是开发过程的有益工具，并可以自动向用户发布新更新！

并请分享您所有的创作：）

奖金提示！

使用GitHub或其他SCM

您必须添加一个@updateURL标签，后跟URL，以及来自GitHub或您选择的任何提供程序的原始文件。GitHub的示例：

请注意，必须使用@version标签才能进行更新检查。绝大多数用户不需要@downloadURL标记，因此，除非您的脚本具有大量关注者，否则请使用@updateURL。

TM将检查通过“设置”标签配置的更新：

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

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

使用外部库（如jQuery）

它必须至少存在于TM的编辑器中，Chrome才能加载。但是，我建议保持两个头（TM头和磁盘头上的文件）相同，以免造成混淆。然后，@require就像这样：

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

Answer 2

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

您可以使用@updateURLuserscript 标签来指出 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 存储库，或来自您工作计算机的公司私有 Gitlab 实例

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