如何以编程方式将tampermonkey脚本更新为本地文件? [英] How to update tampermonkey script to a local file programmatically?

问题描述

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

但是，我宁愿使用IDE及其所有功能.我还想使用webpack从多个文件中打包脚本.

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

那么如何以编程方式更改Tampermonkey的脚本源代码?

解决方案

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

设置

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

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

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

3. 现在，转到浏览器中TM的仪表板，在其TM编辑器中打开有问题的脚本，并删除所有除外的所有内容除了>标头

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

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

可能的陷阱:使用

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

现在，此特定编辑器将自动保存代码中的所有更改.如果您的文件没有自动保存，请记住保存，然后再使用浏览器进行测试.

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

如果您不使用

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

TM将按照配置的频率检查更新.在设置"标签中:

外部，设置检查从脚本的 @require 调用的脚本进行更新的频率(例如jQuery).

您还可以强制"执行更新检查:

使用外部库(如jQuery)

它必须至少存在于TM编辑器中，至少 才能供Chrome加载.但是，我建议保持两个头(TM头和磁盘头上的文件)相同，以免造成混淆.然后，您像这样 @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 live is to use Tampermonkey's integrated editor.

However, I'd rather use IDE, with all it's 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.

So how to programmatically change Tampermonkey's script sourcecode?

解决方案

I've answered this in another question. I think someone should merge them, but in the meantime, since it's very similar and frustrating, I'll put it here for the next person looking for help.

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, we'll 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 @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 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 (arguably the best multiplatform code editor ever. 100% free and open-source), 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!

And please share all your creations :)

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

这篇关于如何以编程方式将tampermonkey脚本更新为本地文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！