Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
Tampermonkey userscript prevents pages from loading
I am currently making a userscript to interpret the APL programming language in a Stackexchange chat window. This is the code I have come up with:
// ==UserScript==
// @name APL chat
// @version 2
// @grant GM_xmlhttpRequest
// @grant GM_listValues
// @match https://chat.stackexchange.com/*
// @run-at document-start
// @require https://cdn.jsdelivr.net/npm/apl@0.1.15/lib/apl.min.js
// ==/UserScript==
// thanks to @cvzi for making it work correctly!
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// fired when a mutation occurs
console.log(mutations, observer);
let codes = document.getElementsByTagName("code");
for (let elem of codes) {
if(elem.innerText && !('interpreted' in elem.dataset) && elem.innerText[0] == '⋄') {
elem.dataset.interpreted = true; // see https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access
let result = ''
let color = 'red'
// Catch apl error and show it in orange color
try {
result = apl(elem.innerText).toString()
} catch(e) {
result = e.toString()
color = 'orange'
}
let tmp = document.createElement("div");
tmp.innerHTML = "<pre style=\"color:"+color+"\">"+result.replace("\n","<br>")+"</pre>";
let parent = elem.parentElement;
parent.appendChild(tmp.firstChild);
//console.log(result);
}
}
});
window.addEventListener('DOMContentLoaded', (event) => {
alert = function() {}; // Prevents ⎕← and ⍞← from trggering alerts
window.alert = function(){};
observer.observe(document, {
subtree: true,
ChildList:true,
attributes: true
});
});
When a code block is written to the body with a ⋄
character in it, it should be executed and displayed in red, underneath the code.
The apl()
function takes a single string, and interprets in in the APL language, and it is imported from the @require
statement, using ngn's javascript APL interpreter. After ngn's confirmation, I can say that it does not interfere with any globals.
It works perfectly on firefox(Greasemonkey), but on Chrome's Tampermonkey, any chat.stackexchange.com
page I visit never stops loading. It gets stuck at this point:
And these are the console errors:
Uncaught TypeError: o.substr is not a function
at HTMLLIElement.<anonymous> (master-chat-with-millinery.js?v=93a5b9100f35:1)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at o (master-chat-with-millinery.js?v=93a5b9100f35:1)
at Sidebar (master-chat-with-millinery.js?v=93a5b9100f35:1)
at Vt (master-chat-with-millinery.js?v=93a5b9100f35:3)
at StartChat (master-chat-with-millinery.js?v=93a5b9100f35:3)
at HTMLDocument.<anonymous> (the-nineteenth-byte:182)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
master-chat-with-millinery.js?v=93a5b9100f35:7 Uncaught TypeError: Cannot read property 'resolve' of undefined
at Object.<anonymous> (master-chat-with-millinery.js?v=93a5b9100f35:7)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at y (jquery.min.js:4)
at XMLHttpRequest.c (jquery.min.js:4)
DevTools failed to load SourceMap: Could not load content for chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/sm/66503b0e4799e2375dd4e11269326fc0fcb9a65474ff19f45c7f956fd381cea8.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
I have my suspicions on the MutationObserver
and the @grant
, but I'm not sure what exactly is causing this issue. It could be something else.
What is the correct fix for this problem?
1 answer
The problem here was resolved by moving the @require
script inside the DOMContentLoaded
listener like in this link.
I think the main problem was that the interpreter was causing conflicts, since it was getting loaded before the page loaded. I'd appreciate it if someone could find a way to make this work with @require
in it though.
0 comment threads