Javascript 出现css类时触发事件

我在为firefox浏览器编写插件时遇到问题。当CSS类出现“错误类”或“警告类”时，插件应该发出声音。我使用突变观察者来检查我的类是否出现，并存储我播放声音的事实

它适用于Grafana仪表板，使用状态面板在服务未及时响应时发出警报

这里是我的实际代码：

let target = document.querySelectorAll(".panel-container");
let histo = new Array();
for (let i = 0; i < target.length; i++) {
let observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        let foo = mutation.target.getAttribute("class")
        let error_class = "error-state"
        let warning_class = "warn-state"
        let ok_class = "ok-state"
        let id =   mutation.target.parentElement.parentElement.parentElement.parentElement.parentElement.id;
        if (((foo.includes(error_class))|| (foo.includes(warning_class)))&& !(histo.includes(id))){
          histo.push(id);
          beep();
        }
        if (foo.includes(ok_class) && histo.includes(id)){
          histo = arrayRemove(histo, id);
        }
        console.error(histo);
    });
});

// configuration of the observer
let config = { attributes: true };

// pass in the target node, as well as the observer options
observer.observe(target[i], config);
}


function arrayRemove(arr, value) {
 return arr.filter(function(ele){
    return ele != value;
 });
 }

function beep() {
    var snd = new Audio(<audio in base 64>)

let target=document.querySelectorAll（“.panel container”）；
设histo=newarray（）；
for（设i=0；i

这是舱单：

{
  "manifest_version": 2,
  "name": "sound_on_grafana",
  "version": "1.1",

  "description": "make sound for error and warning state",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["sound_on_grafana.js"]
    }
  ]

}

{
“清单版本”：2，
“姓名”：“grafana上的声音”，
“版本”：“1.1”，
“说明”：“发出错误和警告状态的声音”，
“图标”：{
“48”：“icons/border-48.png”
},
“内容脚本”：[
{
“匹配项”：[“”]，
“js”：[“sound_on_grafana.js”]
}
]
}

预期的结果是，当html页面的某个元素上出现“error class”时，将播放base64中的声音