Tampermonkey脚本无法在Boxtal网站WebApp部分加载的求助

Question #

I'm updating my old Tampermonkey script because the Boxtal website it's used on has been redesigned and now uses a WebApp. The script won't load on the WebApp sections of the site, and I'm not sure why. The site URL is https://www.boxtal.com/fr/fr/accueil. Here's my test script code:

// ==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 appears in the bottom right corner on all non-WebApp pages, but not on WebApp pages. How can I get the script to work on these pages?

Answer #

Alright, let's break down why your script isn't working on the WebApp pages and fix it step by step:

1. The WebApp likely uses dynamic content loading #

Traditional static pages load all DOM elements upfront, but modern WebApps often load content incrementally via JavaScript after the initial page load. Your current script runs addButtons() immediately when it first executes—if the WebApp's body isn't fully initialized yet, or if it replaces parts of the DOM later, your button won't get added properly (or might get overwritten).

2. Update your script to handle dynamic DOM changes #

We'll adjust the script to wait for the DOM to be fully ready, and also add a mutation observer to watch for future DOM updates (to ensure the button stays present even if the WebApp refreshes content). Here's the revised code:

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

function addButtons() {
    // Prevent duplicate buttons if the script runs multiple times
    if (document.getElementById('startButton')) return;

    // Create elements cleanly instead of using innerHTML (safer and more maintainable)
    const buttonWrapper = document.createElement('div');
    buttonWrapper.style.position = 'absolute';
    buttonWrapper.style.bottom = '20px';
    buttonWrapper.style.right = '20px';
    buttonWrapper.style.zIndex = '80';
    buttonWrapper.style.border = '1px solid black';

    const startBtn = document.createElement('button');
    startBtn.id = 'startButton';
    startBtn.textContent = 'Start';

    buttonWrapper.appendChild(startBtn);
    document.body.appendChild(buttonWrapper);
}

// Wait for the initial DOM to finish loading
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', addButtons);
} else {
    // DOM is already ready, run the function immediately
    addButtons();
}

// Watch for dynamic changes to the body (in case the WebApp replaces content later)
const domObserver = new MutationObserver(() => {
    addButtons();
});

domObserver.observe(document.body, { childList: true, subtree: true });

3. Check if the WebApp is loaded inside an iframe #

Some WebApps are wrapped in an <iframe> which isolates their DOM from the main page. To verify this:

• Right-click the WebApp area and select "Inspect"
• Look for an <iframe> tag wrapping the main content

If you find an iframe:

• Locate the iframe's actual URL (check the src attribute in the inspector)
• Add that URL to your script's @include or @match directive
• Enable Tampermonkey's access to iframes (go to Tampermonkey settings → "Advanced" → ensure "Allow access to file URLs" is enabled, or adjust specific iframe permissions)

4. Confirm Tampermonkey's script execution context #

Make sure your script is set to run in the main document context (since you're using @grant none, this should be the default, but it's worth double-checking). Open Tampermonkey's dashboard, edit your script, and verify the execution context is set to "document".

Give these changes a try—your Start button should now show up on the WebApp pages!

内容的提问来源于stack exchange，提问作者William Karagozyan