javascript - 当我的 Youtube 评论或 Messenger 消息加载时，如何运行 Chrome 扩展程序？

Question

我想将包含某个关键字的 YouTube 评论更改为其他内容，但要做到这一点，我必须检测它们的文本。我使用的是 chrome 扩展，其 list 如下:

{
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/"
  ],
  "content_scripts": [{
    "css": ["styles.css"],
    "js": ["content.js"],
    "matches": ["https://*/*"],
    "run_at": "document_end"
  }]
}

我的 content.js 文件是这样的:

alert("开始");

然而，在加载 Youtube 评论或 Messenger 消息之前，我的警报就响起了。我怎么能等呢？

Answer 1

YouTube 评论和即时消息是异步加载的，您的 content.js 在 document_end 运行，即在执行这些调用之前。

In the case of "document_end", the files are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.

来自 https://developer.chrome.com/extensions/content_scripts

您必须使用某种监听器，可能是 MutationObserver，在 YouTube 中，此代码应该可以工作:

// select the target node
var target = document.getElementById('watch-discussion');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
       console.log(mutation.type);
    });    
});

// configuration of the observer:
var config = { childList: true };

// pass in the target node, as well as the observer options
 observer.observe(target, config);

基于https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

通过监听评论包装器的 childList 突变，您将能够在每次评论异步加载到页面时触发代码