添加 dom 元素时如何运行代码 firefox 扩展答案

【问题标题】：How to run code when a dom element is added firefox extensions添加 dom 元素时如何运行代码 firefox 扩展
【发布时间】：2021-12-20 18:00:19
【问题描述】：

我正在制作一个编辑页面上元素的扩展，但它只有在加载时元素在页面上时才有效（我使用它的网站永远不会发生）所以我想在 div 时获取一个事件显示 id 为“427”。

代码：

var card = !!document.getElementById(427);
console.log(card);
if (card = true) {
    var card = document.getElementById(427)
    var cardimg = card.children.item(9)
    cardimg.setAttribute("style", 'background: transparent url("images/cards/Ultimate_Recipe.png") no-repeat scroll 0% 0%;')
};

【问题讨论】：

试试 MutationObserver
这并没有改变什么，什么都没有发生

标签： javascript firefox-addon-webextensions

【解决方案1】：

你可以使用MutationObserver，但你应该小心内存使用：

const onMutation = () => {
  const element = document.getElementById(427)
  if (element) {
    observer.disconnect()
    elementIsReady(element)
  }
}

const observer = new MutationObserver(onMutation)

observer.observe(document.body, {childList: true, subtree: true})

您也可以使用Promise，通过查询每个 x 毫秒：

new Promise(async (resolve) => {
  let element
  while (!(element = document.getElementById(427))) await new Promise(r => setTimeout(r, 200))
  resolve(element)
}).then(elementIsReady)

【讨论】：