Javascript Chrome扩展：当网页元素内容更改时播放通知声音

我想在带有Chrome扩展的网页上监视一个动态变化的值（仅供我自己使用），并在该值变化时播放通知声音和显示警报。此页不一定在活动选项卡中

到目前为止，我有以下代码，我只需要在值更改时触发background.js。我的问题是如何做到这一点

manifest.json

{
    "manifest_version": 2,
    "name": "Example Website Notifications",
    "description": "Displays notifications on Example Website.",
    "version": "1.0",

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "content_scripts": [{
        "matches": ["https://www.example.com/*"],
        "js": ["jquery.js", "content.js"]
    }]
}

content.js

var value = $('#element').html();

window.setInterval(function() {
    var newValue = $('#element').html();
    if (newValue != value) {
        /* Run code in background.js */
        value = newValue;
    }
}, 5000);

var sound = new Audio('sound.mp3').play();
alert('Value Changed');

我每隔5秒检查一次值。如果有一种方法可以“知道”值何时发生变化，而不是每5秒检查一次，我也愿意这样做

background.js

var value = $('#element').html();

window.setInterval(function() {
    var newValue = $('#element').html();
    if (newValue != value) {
        /* Run code in background.js */
        value = newValue;
    }
}, 5000);

var sound = new Audio('sound.mp3').play();
alert('Value Changed');

除了声音通知之外，我还有警报（）的原因是，如果我没有听到声音警报，浏览器窗口图标将在任务栏中闪烁

---

当我测试background.js以查看音频是否播放时，首先显示警报，然后在单击警报上的OK后播放音频，即使播放音频文件的行在前面。想知道为什么会发生这种情况吗？

要将事件传达给后台页面，可以使用

示例（稍微过度设计以便于扩展）：

注意，你不必为了引起注意而使用可怕的

警报。对此，有以下几点：

// Assuming you have `sender` from the messaging API

// This will make the window blink/draw attention in the taskbar or equivalent
chrome.windows.update(sender.tab.windowId, {drawAttention: true});
// Optionally, switch to the tab inside the window as well
chrome.tabs.update(sender.tab.id, {active: true});

alert
应该被认为是有害的：它会暂停JS执行，直到解除，这就解释了您所经历的影响（延迟播放）。这应该避免

另一种直观通知用户的“有机”方法是使用toast样式的通知。它远没有浏览器图标闪烁那么模棱两可

如果有一种方法可以“知道”值何时发生变化，而不是每5秒检查一次，我也愿意这样做

对,；首先，使用名为的工具。请参见主题。
是异步的。@SvenTheSurfer这是否意味着在显示文本警报之前我不能播放音频文件？我需要选择其中一个，不能同时使用两个？请不要彻底更改您的问题（这会使当前的答案无效！）-如果您有后续问题，只需问一个新问题，并链接到此问题。感谢您提供的示例代码和建议。在来到这里之前，我还检查了消息文档页面（以及许多其他页面/教程），但仍然无法添加点。@Envayo掌握它有什么特别的问题吗？我想编辑我的问题，根据您的代码示例显示我的更新代码。我不知道如何在不显示我的更新代码的情况下进行解释，但简单地说，我的更新代码仍然不能完成我希望它完成的任务。我想最好是在论坛上提问，在那里我可以发布我的更新代码，以便进一步提问。谢谢你的帮助。我很乐意帮忙；但一旦你应用了我的更改，你就有了一个不同的问题。你不应该害怕做一个新的！谢谢你关于突变观察者的留言，我会检查这一点和相关的问题。