在 Tampermonkey 中使用 @require 和 jQuery 不起作用
In Tampermonkey using @require with jQuery doesn't work
为了我的生活,我无法让它工作。
我正在尝试使用 tampermonkey 编写用户脚本,@require'ing 两个 jQuery 资源 - jQuery 和 jQuery UI.
每次,chrome 的控制台都会给我两到四个错误,它们看起来都是这样的:
核心-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);
}
我已经坚持了好几天了,我快要失去理智了。
已测试,运行良好。
要求工作正常,也许其他一些 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=whosebug.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'
});
});
});
})();
为了我的生活,我无法让它工作。
我正在尝试使用 tampermonkey 编写用户脚本,@require'ing 两个 jQuery 资源 - jQuery 和 jQuery UI.
每次,chrome 的控制台都会给我两到四个错误,它们看起来都是这样的:
核心-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);
}
我已经坚持了好几天了,我快要失去理智了。
已测试,运行良好。 要求工作正常,也许其他一些 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=whosebug.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'
});
});
});
})();