Javascript 如何检测更改产品选项后页面是否更新？（Chrome扩展）

我正在开发一个用于亚马逊的Chrome扩展

加载页面时，我在右面板上插入了蓝色按钮

正如您所知，当我们选择产品选项（样式、颜色、大小…）时，一些内容（如右面板）将重新呈现。我的蓝色按钮消失了（可能）

我像下面一样插入蓝色按钮

$(window).ready(function () {
  $('#atc-declarative').before("<img id='addToCartMM' src='chrome-extension://" + chrome.runtime.id + "/blue.png'>");

  // select buttons in style-list and add click event.
  $('#variation_style_name .a-button-text').click(function() {
    // insert button again.
  });
  ...
}

$（窗口）.ready（函数（）{
$（“#atc声明性”）。在（“”）之前；
//在样式列表中选择按钮并添加单击事件。
$（'#变体_样式_名称.a-button-text'）。单击（函数（）{
//再次插入按钮。
});
...
}

---

在选择产品选项后，如何检测某些内容何时更新？

请查看@Michal Thank。我以前尝试过。但失败了。我应该使用哪种类型的突变？这取决于情况。但我猜如果整个右面板都在重新呈现，请观察是否有突变，如果检测到任何突变，请再次附加按钮。@Michal Thank。但是在我的记忆中，callback被调用的次数太多（短时间内超过1k）。因为当添加每个子项时，它都会被调用。我怎么能只调用一次？我应该使用debounce吗？在使用MutationObserver时，您是否选择了右面板容器元素作为目标？当再次出现按钮时，您需要忽略mutation以避免循环。