在 Tampermonkey 中使用 @require 和 jQuery 不起作用

如何解决在 Tampermonkey 中使用 @require 和 jQuery 不起作用

对于我的生活，我无法让它发挥作用。

我正在尝试使用 tampermonkey 编写用户脚本，该脚本是 @require'ing 两个 jQuery 资源 - jQuery 和 jQuery UI。

每次，chrome 的控制台都会给我两到四个错误，它们看起来都是这样的：

core-c30de8a3f5468380db0b.js:1 GET about:blank net::ERR_UNKNowN_URL_SCHEME

当我删除两个@requires 时，这些错误就会消失。我已经尝试过使用和不使用 window.jQ、http 和 https，直接从 jQuery 和 Google ajax 版本中提取，我试过在文档启动和文档空闲时运行，我已经尝试了一切。脚本的所有其余部分都可以工作，但需要没有，显然 jQuery 位没有。

这是我目前所拥有的一切：

// ==UserScript==
// @name         score Graph
// @namespace    https://github.com/storjak
// @version      0.1
// @description  score Graph
// @author       storjak
// @match        https://www.twitch.tv/*
// @grant        none
// @run-at       @run-at document-start
// @require      http://code.jquery.com/jquery-3.6.0.min.js
// @require      http://code.jquery.com/ui/1.12.1/jquery-ui.min.js

// ==/UserScript==

window.jQ = $;

(function() {
    $(document).ready(function() {
        $(function() {
            $("#container")
                .draggable({
                    handle: "#grab",iframeFix: true,containment: "document"
                });
        });
        appendButton();
    });

})();

// \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/ \/  All this stuff works and can be ignored

function appendButton() {
    let chartStatus = false;
    let removedElement;
    let root = document.getElementById("root");
    const newButton = document.createElement("div");
    newButton.innerHTML = '<button style="padding-left: 10px; padding-right: 10px; margin-right: 10px" class="ScCoreButton-sc-1qn4ixc-0 ScCoreButtonSecondary-sc-1qn4ixc-2 kMLrvA tw-core-button">score Chart</button>';
    newButton.id = "score-graph-button";
    newButton.onclick = function scoreGraph() {
        if (chartStatus === false) {
            if (removedElement === undefined) {
                const src = "http://localhost:3000/userscript/" + location.pathname.slice(1);
                let newElement = document.createElement("div");
                newElement.style.csstext = "position: absolute; z-index: 9999; top: 100px; right: 10px; border: solid 1px black; border-radius: 8px; resize: both; overflow: hidden; width: 300px; height: 300px; display: flex; flex-direction: column;";
                newElement.id = "score-graph-container";
                newElement.innerHTML = '<div id="grab" style="background-color: #6441a5; border-bottom: solid 1px black; text-align: center; width: 100%; font-family: Arial,Helvetica,sans-serif; padding: 4px; cursor: move;">Drag Me!</div><div id="iframe-wrapper" style="height: 100%; width: 100%;"><iframe id="embed" style="height: 100%; width: 100%; border: none;" title="score Graph" src=' + src + '></iframe></div>';
                root.append(newElement);
            } else {
                root.append(removedElement);
            }
            chartStatus = true;
        } else if (chartStatus === true) {
            removedElement = document.getElementById("score-graph-container").remove();
            chartStatus = false;
        }
    }
    const navBar = document.getElementsByClassName("tw-align-items-center tw-flex tw-flex-grow-1 tw-flex-shrink-1 tw-full-width tw-justify-content-end");
    navBar[0].append(newButton);
}

我已经被这个问题困扰了好几天，我快要疯了。

解决方法

经过测试，完美运行。 require 可以正常工作，也许其他一些 EXT 或某些东西正在阻塞？

无论如何，稍微修复一下，以便拖动也能正常工作。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.twitch.tv/*
// @icon         https://www.google.com/s2/favicons?domain=stackoverflow.com
// @require      http://code.jquery.com/jquery-3.6.0.min.js
// @require      http://code.jquery.com/ui/1.12.1/jquery-ui.min.js
// @grant        none
// ==/UserScript==

function appendButton() {
    let chartStatus = false;
    let removedElement;
    let root = document.getElementById("root");
    const newButton = document.createElement("div");
    newButton.innerHTML = '<button style="padding-left: 10px; padding-right: 10px; margin-right: 10px" class="ScCoreButton-sc-1qn4ixc-0 ScCoreButtonSecondary-sc-1qn4ixc-2 kMLrvA tw-core-button">Score Chart</button>';
    newButton.id = "score-graph-button";
    newButton.onclick = function scoreGraph() {
        if (chartStatus === false) {
            if (removedElement === undefined) {
                const src = "http://localhost:3000/userscript/" + location.pathname.slice(1);
                let newElement = document.createElement("div");
                newElement.style.cssText = "position: absolute; z-index: 9999; top: 100px; right: 10px; border: solid 1px black; border-radius: 8px; resize: both; overflow: hidden; width: 300px; height: 300px; display: flex; flex-direction: column;";
                newElement.id = "score-graph-container";
                newElement.innerHTML = '<div id="grab" style="background-color: #6441a5; border-bottom: solid 1px black; text-align: center; width: 100%; font-family: Arial,Helvetica,sans-serif; padding: 4px; cursor: move;">Drag Me!</div><div id="iframe-wrapper" style="height: 100%; width: 100%;"><iframe id="embed" style="height: 100%; width: 100%; border: none;" title="Score Graph" src=' + src + '></iframe></div>';
                root.append(newElement);
            } else {
                root.append(removedElement);
            }
            chartStatus = true;
        } else if (chartStatus === true) {
            removedElement = document.getElementById("score-graph-container").remove();
            chartStatus = false;
        }
    }
    const navBar = document.getElementsByClassName("tw-align-items-center tw-flex tw-flex-grow-1 tw-flex-shrink-1 tw-full-width tw-justify-content-end");
    navBar[0].append(newButton);
}


(function() {


    $(document).ready(function() {
        appendButton();
        $('body').on('click','#grab',() => {
            $('#score-graph-container').draggable({
                handle: '#grab',iframeFix: true,containment: 'document'
            });
        });
    });
})();