Search code examples
javascriptgreasemonkeyuserscriptstampermonkey

My tampermonkey script isn't working in the webapp part of the site

I'm trying to updated an old Tampermonkey script of mine because the site where I am using it rebranded and changed.

The new website is using a webapp and my script isn't loaded in the "app" part of the site and I'm not sure what is blocking it.

The website is https://www.boxtal.com/fr/fr/accueil.

Here is the kind of script I'm trying to add (I just left the button, enought to test is the site is loading it) :

// ==UserScript==
// @name        boxtal
// @namespace   boxtal
// @description boxtal
// @include     https://www.boxtal.com/*
// @version     2
// @grant       none
// ==/UserScript==

function addButtons() {
    document.body.innerHTML += '<div style="position:absolute;bottom:20px;right:20px;z-index:80;border:1px black solid"><button type="button" id="startButton">Start</button></div>';
}

addButtons();

The "Start" button is added in the right bottom corner of all the pages not using the webapp but not in the others.

Do you have any advice on how to push my script in those pages?

Solution

  • Make sure your userscript is actually executed. You can use console.log to check if it's executed or check the Tampermonkey panel if it's loaded at all. Open the browsers error console and watch for syntax errors (in case of Firefox: use the global console, not just the one in the web developer's toolbox).

    Also: the way you insert your script is likely to break the web page, as you serialize the whole DOM tree to an HTML string, append your snippet, then make the browser parse the string again and replace the current DOM node - which removes all dynamically added event handlers in the DOM tree. Use something like document.body.appendChild() to add nodes to the page.