添加 dom 元素时如何 运行 编码 firefox 扩展

Question

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

代码：

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%;')
};

Answer 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)