I am building a Tampermonkey
user script. My actual script is a lot more complex but I am able to reproduce with the following example.
My script needs to work on Hacker News website.
For example on this page:
https://news.ycombinator.com/item?id=39778570
Their html has .athing
class which contains each comment. For each such class, I need to do a certain task (not relevant to this question). I am using MutationObserver
to observe for those nodes in my user script:
My user script is this:
// ==UserScript==
// @name HN
// @namespace https://news.ycombinator.com/*
// @version 2024-02-02
// @description For Hacker News
// @author Bobby
// @match https://news.ycombinator.com/*
// @grant none
// @run-at document-start
// ==/UserScript==
const recordObserver = new MutationObserver((mutations, observer) => {
mutations.forEach(m => {
if (m.type === "childList" && m.addedNodes) {
m.addedNodes.forEach(target => {
if (target.nodeType == Node.ELEMENT_NODE) {
target.querySelectorAll(`.athing:not([read_123])`).forEach (element=> {
element.setAttribute(`read_123`, true);
element.style.background = '#00FF0055';
console.log(element.id);
});
}
});
}
});
});
recordObserver.observe(document, {
attributes: false,
childList: true,
characterData: false,
subtree: true
});
Notice how once detected, my script changes the background color of that element.
This seems to work fine to a certain point.
It randomly stops working at random nodes. This screenshot shows the issue:
Notice how it detected until the comment Yoga is great but only really supports flexbox. For.....
after which it stopped detecting and also stopped printing the id
in console.
If I access the same page again, it stops at different node.
How can I pin point what exactly is causing this issue?
Note that this issue isn't specific to Tampermonkey
. My actual issue is occurring on iOS WKWebView where a user inserted script shows the same issue. I am able to reproduce this on desktop this way.