Question

我希望在具有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);

我以5s的间隔检查值。如果有一种方法可以“知道”价值变化何时发生，而不是每隔5秒检查一次，我也对此持开放态度。

background.js

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

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

当我测试background.js以查看音频是否播放时，首先显示警报，然后在警报上单击“确定”后播放音频，即使之前播放音频文件的行也是如此。任何想法为什么会发生这种情况？

Answer 1

要将活动传达给背景页面，您可以使用Messaging。

示例（稍微过度设计为可扩展）：

// content.js
chrome.runtime.sendMessage({type: "alertUser"});

// background.js
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  switch(message.type) {
    case "alertUser":
      /* play sound, draw attention */
      break;
  }
});

注意，您不必使用可怕的alert来引起注意。那是windows API：

// 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执行直到被解雇，这解释了您遇到的效果（延迟回放）。应该避免。

在视觉上通知用户的另一种“有机”方法是使用notification API的吐司式通知。它远不如浏览器图标闪烁模糊。

如果有一种方法可以“知道”价值变化何时发生，而不是每隔5秒检查一次，我也对此持开放态度。

是;主要是使用名为Mutation Observers的工具。有关该主题，请参阅this canonical question。

Chrome扩展程序：当网页元素内容发生变化时播放通知声音

1 个答案: