在真实的IDE中开发Tampermonkey脚本，并自动部署到OpenUserJs repo [英] Develop Tampermonkey scripts in a real IDE with automatic deployment to OpenUserJs repo

问题描述

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

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

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

扩展程序：

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

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

解决方案

没有副本&粘贴，即时更新，纯粹幸福：

1. 转到Chrome => 扩展程序并找到TamperMonkey'卡' 。点击详细信息。在打开的页面上，允许它访问文件URL：

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




3. 现在，转到TM的仪表板，在其编辑器中编辑脚本并删除所有内容 == UserScript == 标题




4. 在标题中添加 @require 属性指向到脚本的绝对路径。在我的例子中，TamperMonkey编辑器如下所示：

现在，每当该脚本匹配时，TamperMonkey将直接从您的磁盘加载代码，位于您在 @require 。

我使用

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 \ usersrs.user.js 
  

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

解决方案

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

这篇关于在真实的IDE中开发Tampermonkey脚本，并自动部署到OpenUserJs repo的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！