Greasy Fork

I like your code, its organized well. I'm just confused how you know the elements to use. For example, i'm wondering if '.hints .container' is on a per-site basis and how you knew to use that?

observeHints() {
const targetNodes = [
document.querySelector('.hints .container'),
document.querySelector('.words'),
document.querySelector('#game-word'),
];
const config = {
childList: true,
subtree: true
};

Yes, you're correct in your understanding. In this script, the CSS selectors such as '.hints .container', '.words', and '#game-word' are unique to the specific webpage I've built this script for.

These specific selectors were identified through an inspection of the webpage's HTML structure. The process typically involves using the browser's developer tools (which can be accessed by right-clicking on the page and selecting "Inspect" or "Inspect Element") to examine the HTML. Over time, I've been able to identify the key classes and ids that are important for the functionality of this script.

So, when you see document.querySelector('.hints .container'), it's instructing the browser to find the first element in the current page's HTML that matches the provided CSS selector. Here, '.hints .container' is a CSS selector that targets any HTML element with the class 'container' that is nested within an element with the class 'hints'.

The observeHints() function uses these selectors to set up MutationObservers on these specific elements. These observers notify the script whenever there are changes in these elements or their child elements. This is controlled by the configuration object config, which is set to monitor changes to the child elements or the subtree of the target nodes.

Hope this helps.