Play a sound/notification each time a particular user messages on an existing website

问题

I am a user on a website that has a chat widget - users can chat with an instructor.

Every time the instructor sends a message, I would like to receive an audio notification (and optionally a browser notification would be cool too). It's important that I catch these right away and they're pretty easy to miss.

Note: It is something I will be using every day. I understand it's possible to run code right in the console, but that is a bit ad hoc and relies on me to add it successfully during every chat session.

FYI - The code of each chat message from the instructor looks like this:

<ul ng-class="{'notEducator': 'xyz,shanetech' == undefined, 'notEducator': 'xyz,shanetech' == '', 'notEducator': 0 == - 1, 'educator': 0 >=0, 'me':'xyz' == 'abc', 'notMe':'xyz' != 'abc'}" class="chat ng-scope educator notMe" data-ng-repeat="k in previousMessages track by $index">

  <div class="main-msg-container xyz">

    <div ng-class="{'hideMsgContainer':'' == '0'}" class="msg-container_5e9871f3e6eee5732cee3a1c">

      <strong class="primary-font ng-binding">xyz</strong>

      <li class=" clearfix">
        <div class="chat-body clearfix">
          <div class="header">


            <small class="pull-right text-muted ng-binding">
              <span class="glyphicon glyphicon-time"></span>16-04-2020 07:55:47
            </small>
          </div>
          <p data-ng-bind-html="k.message | to_trusted" class="edu_message_5e9871f3e6eee5732cee3a1c">msg</p>
        </div>
      </li>
    </div>
  </div>
</ul>

One unique feature I notice vs regular user chat messages is the presence of the educator class in the ul tag.

Another differentiator taken from the ng-class attribute:

'notEducator': -1 == - 1, 'educator': -1 >=0 <- Me

notEducator': 0 == - 1, 'educator': 0 >=0 <- Host

回答1:

Assuming you're trying to run code on a web app that you can't modify the code of, like the Zoom we app, here's a non-intrusive approach:

If you're trying to trigger a browser notification when something changes in the DOM, you can do so using chrome code snippets. I'm guessing you have a container element and you want to trigger a notification when that container node is changed and the last child element has a specific class to signify that it is a message from educator.

To simplify this scenario so it's easier to follow, let's say the container element has a class of messageList and the messages inside of it have a class of either educator or student. So what we want to do, is watch for changes on the messageList node. When a change happens, we want to check if the last child in messageList has a class of educator. If it does, we then trigger a browser notification.

I'm not gonna go into specific codes since the question is relatively vague, but in order to run code in chrome every time you go to a specific web address you can use Chrome code snippets (saves code snippets in browser memory to be run now or at a later time) and MutationObserver (triggers an action when a DOM Node mutates), check out this GoogleDev post as well.

Cheers! 🍻

来源：https://stackoverflow.com/questions/61275517/play-a-sound-notification-each-time-a-particular-user-messages-on-an-existing-we