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

Question

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

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

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

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

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如何具有相同的标题。现在，您可以关闭TM的编辑器。如果一切设置正确，则不再需要打开它。

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

最后，您必须重新加载网站才能查看更改，但是您可以使用浏览器同步的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

在 中server mode，您可以添加您的code entryasscript src

// ==UserScript==
// @name               dev:example
// @namespace          https://github.com/lisonge
// @version            1.0.1
// @author             lisonge
// @description        default description zh
// @icon               https://vitejs.dev/logo.svg
// @match              https://i.songe.li/
// @grant              GM.info
// @grant              GM.deleteValue
// @grant              GM.getValue
// @grant              GM.listValues
// @grant              GM.setValue
// @grant              GM.getResourceUrl
// @grant              GM.notification
// @grant              GM.openInTab
// @grant              GM.registerMenuCommand
// @grant              GM.setClipboard
// @grant              GM.xmlHttpRequest
// @grant              unsafeWindow
// @grant              window.close
// @grant              window.focus
// @grant              GM_info
// @grant              GM_getValue
// @grant              GM_setValue
// @grant              GM_deleteValue
// @grant              GM_listValues
// @grant              GM_addValueChangeListener
// @grant              GM_removeValueChangeListener
// @grant              GM_getResourceText
// @grant              GM_getResourceURL
// @grant              GM_addElement
// @grant              GM_addStyle
// @grant              GM_openInTab
// @grant              GM_registerMenuCommand
// @grant              GM_unregisterMenuCommand
// @grant              GM_notification
// @grant              GM_setClipboard
// @grant              GM_xmlhttpRequest
// @grant              GM_download
// @grant              GM.addStyle
// @grant              GM.addElement
// @grant              window.onurlchange
// @grant              GM_log
// @grant              GM_getTab
// @grant              GM_saveTab
// @grant              GM_getTabs
// @grant              GM_cookie
// ==/UserScript==

;(({
  entryList = [],
  mountGmApi = false
}) => {
  window.GM;
  const monkeyWindow = window;
  if (mountGmApi) {
    const _unsafeWindow = Reflect.get(monkeyWindow, "unsafeWindow");
    if (_unsafeWindow) {
      Reflect.set(_unsafeWindow, "unsafeWindow", _unsafeWindow);
      console.log(`[vite-plugin-monkey] mount unsafeWindow to unsafeWindow`);
      const mountedApiList = [];
      Object.entries(monkeyWindow).filter(([k]) => k.startsWith("GM")).forEach(([k, fn]) => {
        Reflect.set(_unsafeWindow, k, fn);
        mountedApiList.push(k);
      });
      console.log(
        `[vite-plugin-monkey] mount ${mountedApiList.length} GM_api to unsafeWindow`
      );
    }
  }
  (() => {
    Object.defineProperty(document, "__monkeyWindow", {
      value: monkeyWindow,
      writable: false,
      enumerable: false
    });
    console.log(`[vite-plugin-monkey] mount monkeyWindow to document`);
  })();
  const createScript = (src) => {
    const el = document.createElement("script");
    el.src = src;
    el.type = "module";
    el.dataset.source = "vite-plugin-monkey";
    el.dataset.entry = "";
    return el;
  };
  const { head } = document;
  entryList.reverse().forEach((s) => {
    head.insertBefore(createScript(s), head.firstChild);
  });
  console.log(
    `[vite-plugin-monkey] mount ${entryList.length} entry module to document.head`
  );
})({
  "entryList": [
    "http://127.0.0.1:5173/@vite/client",
    "http://127.0.0.1:5173/src/main.ts"
  ],
  "mountGmApi": false
});

现在你可以使用我的库vite-plugin-monkey，它与正常的 Web 应用程序开发体验一致，就像 vue/react 一样

模块热更换