如何以编程方式将tampermonkey脚本更新为本地文件？

Question

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

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

为此，我需要一种方法以编程方式将Tampermonkey中的脚本更改为新版本。到目前为止，我所做的是手动将新脚本复制并粘贴到Tampermonkey的编辑器中，这真的让人筋疲力尽。

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

Answer 1

我在另一个问题中given my answer对此进行了说明。但是，由于它非常相似且令人沮丧，我将其放在这里，供下一个寻求帮助的人使用。

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

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

2. 现在，转到扩展程序的仪表板，输入以在该原始编辑器中编辑脚本，并删除除==UserScript==标题之外的所有内容

3. 在头文件中添加一个指向脚本绝对路径的==/UserScript==属性。就我而言，TamperMonkey编辑器如下所示：

1. 利润！

现在，每次脚本匹配时，它将直接从磁盘直接加载代码。

我使用VSCode（可以说是最好的多平台代码编辑器，而且是免费的），所以我在这里编写脚本。每次更改后，VSCode都会自动保存它，但是您仍然必须重新加载网站才能查看更改。

幸运的是，使用https://www.browsersync.io/（和Git）之类的工具很容易实现自动化，并且应该编写用户脚本。

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

可能的陷阱

我从不需要它，但是以防万一，如果它对您不起作用，请在路径的开头添加@require。例如：

file://

Answer 2

我的确会使用@require，但是如果您进行了设计更改，还可以使用GM_addStyle

// @require     file:///
// @grant       GM_addStyle

Answer 3

Trim21可能是迄今为止最好的large-scale UserScript development solution，使用webpack来与LiveReloadPlugin协作可以实现模块化开发和自动化测试。

Here is the project。

它可以使用ES5 / ES6和TypeScript在IDE上开发模块化脚本。真的很容易使用！

集成了LiveReloadPlugin，您可以直接刷新任何@match URL。

比以前的方案更好，大大提高了UserScript的开发效率！

Answer 4

破解： 我需要引用一个静态图像文件，因此我将图像转换为 base64 字符串，然后将其直接添加到脚本中。我相信，类似的方法也适用于其他小文件。