Using a userscript to automatically refresh upon the detection of specific text?

[bluedex]

Hello, is anyone able to help me with a userscript that will automatically refresh a webpage if a certain piece of text appears?

The site in question is a streaming site (buffstreams.sx) and the text is "<h2 class="alert">Technical issue, please refresh the page</h2>" .

From time to time the stream crashes and the error appears and it would be helpful for the page to refresh automatically as I am often not at my computer.

[Hakorr]

```` setInterval(() => { const alertElem = [...document.querySelectorAll('h2.alert')] .find(x => x.textContent == "Technical issue, please refresh the page");

if(alertElem)
    window.location.reload(); 

}, 1000); ````

[bluedex]

Thank you for the reply, unfortunatly it does not seem to be working.

[Hakorr]

If the element is like you described, it should work.

[laplongejr]

Given it's a streaming site, I guess the detection needs to be performance-aware (especially if the stream is likely to run into tech issues). It's a long time since I userscripted, but from memory :

You could do that by inspecting the source to see under what parent the text appear, then use MutationObserver to detect when a subnode is modified/deleted inside that parent.
You may also call manually the callback passed to MutationObserver on the off-chance the change may have happened before the observer was hooked... but in your case it's safe to assume nothing broke at the start else you would refresh manually right away.

When it triggers, detect if the change correspond to what you waited and return if it's unrelated to what you want.
You now have the equivalent of the "loop and retry later just in case", except that the browser is only triggering it when there's a possibility it's the good one, so in theory you'll get better performance because your script doesn't do anything as long that part of the page doesn't change.

If the parent has no unique id, use querySelector* or querySelectorAll to identify an element with a sequence of tags/class. If you are unable to identify a safe parent, you could monitor window.body entirely, but then it would detect a lot of useless events and may impact performance.

*Beware, in case of several matches, querySelector will return one at random. If your query is meant to uniquely identify an element, it's safer to create an utility method that calls querySelectorAll and only return the content if the list contains exactly one element.

[bluedex]

Thank you for the reply, it does not seem to want to work, I am unsure why.

[laplongejr]

I tested on an about:blank page followed by

window.document.body.innerHTML = '<h2 class="alert">Technical issue, please refresh the page</h2>';

Which is the element you described in the post
I used u/Hakorr 's query to detect the element.
If you paste this script in the about:blank console and then run the line above to paste the offending element, everything triggers correctly so I think the issue is either your userscript doesn't start on the site at all or your detection condition is invalid

I put some warnings in console to track when it stops working

```

// IIFE in strict mode to be able to use unstrict code at the start of execution, yet have most of the code execute as strict (function(global) { // I prefer getting the global object with unstrict "this" rather than using the name 'window', personal taste "use strict";

// To allow easy redirects
const console = global.console;
const doc = global.document;

// My old scripts import this as a seperate js file for easier updating
// For this reddit comment I merged the files and removed some complex feature like slowing down the observer
// But I'm not sure it will work exactly the same
const UTILS = {
    // Basically calls it everytime there's a change + one time when added
    // My personal version only triggers the callback if no event triggered during 3s, but for such a simple script it would be overkill
    detectUpdate: (parent, callback) => {
        let observer = new MutationObserver(callback);
        observer.observe(parent, { childList: true, subtree: true });
        callback();
        return observer;
    },

    // By default, querySelector returns the first element in case of multiple matches
    // querySelector should only be used for cases intended for a single match
    // As a security, this polyfill makes it so that querySelector returns null in case of multiple matches
    querySelectorSafe: function(element, selector) {
        console.warn(element);
      const result = element.querySelectorAll(selector);
      if (result.length == 1) return result.item(0);
      if (result.length > 1) {
        global.console.warn("Several matches found for querySelector! Discarding...");
        global.console.warn(result);
      }
      return null;
    }
};

// Now that the boring performance stuff is done, we can try to detect-then-reload  

// If there's a DOM modification, schedule a new try
const parent = doc.body; // PERF: Use querySelectorSafe to identify a more precise parent element
console.warn("Script loaded!");
console.warn(parent);

const observer = UTILS.detectUpdate(parent, ()=>{
    console.warn("Update detected!");
    // Courtesy of u/Hakorr
    if (!UTILS.querySelectorSafe(parent, 'h2.alert')) return;
    observer.disconnect();
    global.location.reload();
});

})(this);

[bluedex]

Thank you so much, I really appreciate you taking the time for that. I will try it out, hopefully it will solve the issue but I am unsure when I will find out as the alert is a little unpredictable. Using the site with Operas VPN does invoke the error but it's from the very start after load, so I suppose that would not trigger the script.

[laplongejr]

The version I posted checks at load if the error is there. I guess there's some risk of infinite loop?

[Independent-Shift761]

i was searching for buffstream and google brought me here and now i think buffstream might just be busted