Firefox 扩展 DOM 改变奇怪的行为

Question

第一次尝试学习Firefox扩展开发。首先，我尝试做一个简单的扩展来改变 youtube.com 主页的某些部分。

这是manifest.json:

{
   "manifest_version": 2,
   "name": "Better Youtube jk idk what I'm doing",
   "version": "1.0",

   "description": "Yep yep yippie",

   "content_scripts": [
       {
           "matches": ["*://*.youtube.com/*"],
           "js": ["better_youtube.js"]
       }
   ]
}

这是 better_youtube.js 文件：

document.getElementsByClassName("title style-scope ytd-guide-entry-renderer")[0].textContent = "something";

因此，它获取的元素是页面左侧菜单中的“主页”link。我写这篇文章的原因 post 是因为我的行为异常：

如果我在已启用扩展程序的情况下加载 youtube.com 页面，则没有任何反应并且 link 的文本不会更改
如果 youtube.com 已经加载，我从 about:debugging 页面重新加载脚本，它会工作

我在 10 秒后尝试运行更改（通过将代码传递给 setTimeout(changeLabel, 10000) 调用），但它一直显示这种奇怪的行为。

如果有用的话，我是运行 Firefox 99.0.1

感谢您的帮助。

编辑：我将代码更改为

setTimeout(delayedUpdate, 10000);

function delayedUpdate(event)
{
    document.getElementsByClassName("title style-scope ytd-guide-entry-renderer")[0].innerHTML = "something";
}

现在可以用了，但是我每次加载都要等10秒，感觉很慢。通过控制台日志记录，我注意到当我仍然看到部分页面丢失时，Firefox“认为”页面已加载，问题可能源于此，但我不知道如何解决。也许我的扩展程序与 youtube 页面上的某些脚本运行冲突？

Answer 1

感谢 @wOxxOm，我找到了解决方案：我可以在 document 上收听一些 YouTube-specific 事件，我可以使用 MutationObserver 来处理页面上的内容更新。

更多信息。

Firefox 扩展 DOM 改变奇怪的行为

Firefox extension DOM change weird behaviour

javascript

dom

firefox-addon

firefox-addon-webextensions