For the life of me I cannot get this to work.
I'm trying to write a userscript with tampermonkey that is @require'ing two jQuery resources - jQuery and jQuery UI.
Every single time, chrome's console gives me two to four errors, and they all looks like this:
core-c30de8a3f5468380db0b.js:1 GET about:blank net::ERR_UNKNOWN_URL_SCHEME
When I remove the two @requires, those errors go away. I've tried it with and without the window.jQ, http and https, pulling from jQuery directly and the Google ajax version, I've tried running at document start and document idle, I've tried about everything. All the rest of the script works, but requiring doesn't and obviously the jQuery bit doesn't.
Here is everything I have so far:
// ==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);
}
I've been stuck on this for days and I'm about to lose my mind.
Tested, working perfectly. the require works alright maybe some other EXT or something is blocking ?
anyhow, fixed it a bit so the drag work as well.
// ==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'
});
});
});
})();