1

I'm playing around with GreaseMonkey, trying to detect new comments on a page. My Javascript is pretty rusty. I've found this waitForKeyElements() script, which seems quite helpful. I see that it's using jQuery, and I've looked into JQuery wildcard selectors, but it's not working.

I even found this question and answer here and this one about jQuery selector id ends with, but still can't get it working.

The chat messages are identified by a <div> with an id="chat-messages-12345randomNum".

Here's what I've tried:

// ==UserScript==
// @name    Chat listener
// @include https://chatSite.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

console.log("hello world");

function findNewComments (jNode) {
  
    console.log("found comment " + jNode);
}

waitForKeyElements ("div[id$='chat-messages']", findNewComments);

The 'hello world' is in the console, so I know at least the script is being loaded.
I've tried it both with and without the div in the selector, neither has worked.

SCdF
  • 57,260
  • 24
  • 77
  • 113
user26270
  • 6,904
  • 13
  • 62
  • 94
  • Can you provide a [mcve] of the site/markup/JS behavior you're trying to select? Is there a problem with `document.querySelector("#chat-messages-12345randomNum")`? I'd try that for selecting an element before going into a bunch of libraries. Thanks – ggorlen Feb 26 '21 at 20:11
  • Thanks for the quick reply, but I don't understand; How is my description of a `
    ` that's what I'm trying to capture not enough?
     – user26270 Feb 26 '21 at 20:18
  • Maybe so, in which case use the query selector shown above to select it. Sometimes (actually all the time) elements are created asynchronously in response to network requests, clicks and JS events that will occur after the grease monkey script runs. So if the above selector doesn't work, the page is probably more complicated than you think. In this case, `
    ` which is essentially what you've shown here, isn't enough of a repro and more context is necessary. Likely a `MutationObserver` or network interceptor is needed.     – ggorlen Feb 26 '21 at 20:20
  • 1
    Also, is `12345randomNum` actually different upon every page load, or is that a fixed "random" number you can count on existing? If it's different per page load, what other identifying characteristics can you use about this element? If you don't mind sharing the URL, it'd make it a lot easier to help. – ggorlen Feb 26 '21 at 20:22
  • 1
    Yea, I assume these are created asynchronously in response to network requests. It's one of the major collaboration sites (Slack, Teams, Discord, etc.), so definitely more complicated. Each new chat message div has a new chat-messages-idNum, but each of those ids persists on page reload, so if I knew one, I could count on it existing. – user26270 Feb 26 '21 at 20:31
  • 1
    also, I'm basically polling for new messags, so your document.querySelector() would only work once, right? Unless I put it inside something that polls, which is why I tried the waitForKeyElements() script – user26270 Feb 26 '21 at 20:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229270/discussion-between-user26270-and-ggorlen). – user26270 Feb 26 '21 at 20:44

1 Answers1

1

It appeared to not be working because my selector was wrong. I was looking for ids that started with 'chat-messages-' but this selector "div[id$='chat-messages']" was an ENDS with selector. The starts with selector uses '^', so once I switched it to "div[id^='chat-messages']" it started finding the divs I was looking for.

Also, FYI, turns out this was a terrible usage of waitForKeyElements(), because it just kept firing off every 300 ms.

user26270
  • 6,904
  • 13
  • 62
  • 94