Javascript 是否可以通过chrome扩展来观察网站DOM上的类变化？

我试图在外部网站中某个特定类发生更改时触发一个操作。这是可能的吗？

将一个MutationObserver附加到元素并观察属性更改。当发生突变时，检查突变的

属性名是否为
类
：


constdiv=document.querySelector（'div'）；
新突变观察者（（突变）=>{
如果（突变[0]。属性名称=='class'）{
log（'classchange-seen'）；
}
})
.observe（div，{attributes:true}）；
设置超时（（）=>{
div.classList.add（'foo'）；
}, 2000);
我之所以发布我的答案，是因为我已经对它进行了处理，它将对您要监视的DOM节点的父元素起作用，但@CertainPerformance answer将对单个元素起作用

基本上，您希望使用一个浏览器来观察DOM的更改。以下示例/演示演示了如何监视任何容器下任何DOM节点的更改：


//原始应用程序代码
函数changeColor（）{
让children=document.getElementById（'container'）。children，
itemIndex=Math.random（）*children.length | 0
children.item（itemIndex）.classList.toggle（'red'）
}
//外国代码观察员
让观察者=新的变异观察者（函数（列表）{
for（让列表变位）{
if（mutation.type=='attributes'&&mutation.attributeName==='class'）{
让node=mutation.target
log（`${node.nodeName}类更改为：${node.className}`）
}
}
})
observer.observe（document.getElementById（'container'）{
属性：正确，
儿童名单：是的，
子树：真
})
.red{
颜色：红色；
}

你好，世界
你好，世界1

变色