如何使用 Tampermonkey 在网页上加载外部脚本？答案

【问题标题】：How can i load an external script on a webpage using tampermonkey?如何使用 Tampermonkey 在网页上加载外部脚本？
【发布时间】：2019-02-03 04:34:58
【问题描述】：

Calling Script Directly (works)

// ==UserScript==
// @name         Example
// @version      0.1
// @description  Script from a website
// @author       You
// @match        *://*.example.com/*
// @grant        none
// @require      https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js
// @require      https://code.jquery.com/jquery-3.2.1.min.js
// ==/UserScript==

/* script here: */ 

Calling Script Externally (doesn't work)

// ==UserScript==
// @name         Example
// @version      0.1
// @description  Script from a website
// @author       You
// @match        *://*.example.com/*
// @grant        GM_xmlhttpRequest
// @require      https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js
// @require      https://code.jquery.com/jquery-3.2.1.min.js
// @run-at       document-start
// ==/UserScript==

GM_xmlhttpRequest({
    method : "GET",
    url : "http://example.com/script.js",
        onload : (e) => {
        eval(e.responseText);
    }
});

我需要使用 tampermonkey 将存储自单独站点的 JavaScript 文件直接加载到网站。将代码直接加载到 tampermonkey 文档中是可行的，除非您从站点调用它。

【问题讨论】：

您已被沙盒化。如果它应该能够使用脚本，您需要注入页面。
@Quasimodo'sclone - 你能举个例子吗？我发现最近（1 到 3 年？）有些事情发生了变化。
抱歉，我已经离线一段时间了。我刚刚提供了一个答案，希望我确实正确理解了您的问题。

标签： javascript html node.js userscripts tampermonkey

【解决方案1】：

直接在 tampermonkey 文档中加载代码是可行的，除非您从站点调用它。

我理解你的说法，你试图从页面脚本中调用一些 GM 加载的函数。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Userscript-Test</title>
  </head>
  <body>
    <button id="test-btn">injected script</button>
    <script>
      // invoke testFunction() which is loaded by the userscript.
      document.getElementById('test-btn').addEventListener('click', ev => testFunction());
    </script>
  </body>
  </html>

您的第二个用户脚本确实有效，但是，根据当前 TamperMonkey 版本的默认设置，如果该域与同源策略不匹配，用户将被要求允许跨域获取。如果允许，您可以在通过eval 执行后从用户脚本访问动态加载的脚本，就像您已经完成的那样。

当然，脚本是在 TamperMonkey 沙箱中评估的。因此，您无法从页面内访问。

您需要将脚本注入到页面中，以使其也可用于页面的脚本。例如。你可以动态创建一个<script> 标签。

// ==UserScript==
// @name         Example
// @version      0.1
// @description  Script from a website
// @author       You
// @match        *://*.example.com/*
// @grant        GM_xmlhttpRequest
// @run-at       document-start
// ==/UserScript==

GM_xmlhttpRequest({
  method : "GET",
  // from other domain than the @match one (.org / .com):
  url : "http://example.org/script.js",
  onload : (ev) =>
  {
    let e = document.createElement('script');
    e.innerText = ev.responseText;
    document.head.appendChild(e);
  }
});

为了与旧的用户脚本扩展兼容，您可能需要使用unsafeWindow.document.head 和@grant unsafeWindow。（但是，请注意安全问题。）

您可能还希望@run-at document-start 要求扩展程序在任何其他脚本之前尽快运行该脚本。在这个早期，DOM 可能还没有准备好。您可以确保 DOM 何时准备好接收注入。请注意，某些插件不能保证您的用户脚本实际启动的时间。

如果动态加载的脚本不经常更改，请考虑在安装时使用@resource 预取它并从本地存储加载它。另见GM.getResourceUrl。您可以使用该 URL 获取 GM_xmlhttpRequest。

【讨论】：