如何在我最喜欢的 IDE 中开发我的用户脚本并避免每次都将其复制粘贴到 Tampermonkey 的编辑器中? [英] How can I develop my userscript in my favourite IDE and avoid copy-pasting it to the Tampermonkey's editor every time?

问题描述

出于安全原因，Tampermonkey 脚本不保存在可访问的文件中，而是保存在插件数据中.编辑它们的唯一方法是使用 Tampermonkey 的集成编辑器.

但是，我更愿意使用具有所有功能的 IDE.我也想用webpack从多个文件中打包脚本.

为此，我需要一种方法来以编程方式将 Tampermonkey 中的脚本更改为新版本.到目前为止，我所做的是手动复制 &将新脚本粘贴到 Tampermonkey 的编辑器中，这真的很累.

如何自动执行此操作?

解决方案

设置

我们将只配置几个项目，以便您可以在编辑器中编写代码并在浏览器中看到反映的更改而不会造成麻烦.

1. 转到 Chrome ->扩展程序(或将chrome://extensions"粘贴到您的 URL 栏中)并找到 TamperMonkey 的卡片".点击详细信息.在打开的页面上，允许它访问文件 URL:

2. 将脚本文件保存在文件系统中的任何位置.保存整个内容，包括 ==UserScript== 标头.我使用的是 macOS，所以我的路径是:/Users/me/Scripts/SameWindowHref.user.js

3. 现在，在浏览器中转到 TM 的仪表板，在其 TM 编辑器中打开相关脚本并删除所有内容除了整个 ==UserScript== 标题

4. 在标题中添加一个 @require 属性，指向脚本的绝对路径.

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

可能的问题:使用

注意 TM 的编辑器和您的 IDE/编辑器如何具有相同的标题.您现在可以关闭 TM 的编辑器.如果一切正常，您将不再需要打开它.

现在，此特定编辑器会自动保存代码中的每个更改.如果您的未自动保存，请记得保存，然后再前往浏览器进行测试.

最后，您必须重新加载网站才能看到更改.

如果您不使用

请注意，需要 @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

For security reasons, Tampermonkey scripts are not saved in accessible files, but in a plugin data. The only way to edit them is to use Tampermonkey's integrated editor.

However, I'd rather use IDE, with all its features. I also want to use webpack to pack the script from multiple files.

To do that, I need a way to programmatically change the script in Tampermonkey to a new version. So far, what I did was manually copy & paste the new script into Tampermonkey's editor and that's really exhausting.

How can I do this automatically?

解决方案

Set up

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

1. Go to Chrome -> Extensions (or paste 'chrome://extensions' to your URL bar) and find the TamperMonkey 'card'. Click details. On the page that opens, allow it access to file URLs:

2. Save your script file wherever you want in your filesystem. Save the entire thing, including the ==UserScript== header. I'm using macOS, so my path is: /Users/me/Scripts/SameWindowHref.user.js

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

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

Possible gotcha: Using the file:// URI scheme at the beginning of your @require path is now required. On Windows systems would be:

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

For macOS and *nix, you need three slashes in a row:

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

Execution Contexts

If you have multiple JavaScript files, each specified with a @require key, it is important to understand how and when each script is executed. This is important when using external libraries (like jQuery), or when segmenting your scripts as good coding practice.

The @require paths can reference *.user.js or simply *.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 is then executed as one large script. Note that this means any function or variable declared in the outermost scope of any file behaves as if it was declared in the outermost scope of every file, and certain syntactic errors in one file may influence how subsequent files are interpreted. 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 the @require files are run, the primary UserScript (the one accessed by TamperMonkey's editor) is run in a separate context. If Strict mode is desired, it must also be enabled here.

Given such opportunity for confusion, it is good practice for each file to wrap all code within an IIFE (and a function-level 'use strict';) in order to limit the scope to individual files.

Workflow

Now every time that script matches (@match), TamperMonkey will directly load and run the code straight from the file on disk, whichever path is in @require.

I use VSCode, so that's where I work on the script, but any text editor will do. It should look like this:

Notice how TM's editor and your IDE/Editor have the same header. You can now close the TM's editor. If everything is correct, you won't need it open anymore.

Now, every change in the code is saved automatically by this particular editor. If yours doesn't autosave, remember to save before going to the browser to test it.

Lastly, you'll have to reload the website to see the changes.

If you're not using git, you should consider using it with your userscripts, beneficial tool for a sane development process, and GitHub to release new updates to your users for free automatically!

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:

Note that a @version tag is required to make update checks work. The vast majority of users won't need the @downloadURL tag, so unless your script has a massive follower base, use @updateURL.

TM will check for updates as often as it's configured; from the settings tab:

Externals sets how often the scripts called from your script's @require are checked to update (e.g., jQuery).

You can also "force" an update check:

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. Then, you just @require it like this:

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

这篇关于如何在我最喜欢的 IDE 中开发我的用户脚本并避免每次都将其复制粘贴到 Tampermonkey 的编辑器中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！