当Twitter流加载时加载Chrome扩展脚本

Question

我刚刚编写了一个Chrome扩展程序，它用雅虎金融的数据替换了带有$符号的股票代码。但是我遇到了一些问题，因为Twitter加载流的方式不同。我已经将JS设置为在文档结束时运行，但Twitter会在DOM准备就绪后再加载流。为了解决此问题，我仅检查某个元素是否存在，如果不存在则等待500毫秒后再尝试。

搜索页面似乎也存在问题，可能是因为我检查的元素具有不同的类，我还没有深入研究这个问题。

另一个问题是当一条推文中有大量符号时会变得混乱，可能与第一个问题有关，但似乎是插入了额外的DOM元素。

该项目托管在GitHub上，如果能得到一些反馈和贡献，那就太棒了。

https://github.com/billpull/Twitter-Ticker

- BillPull

Answer 1

最简单的方法是监听DOMMutation事件。在浏览器渲染推文之前，您可以使用DOMNodeInserted事件捕获它。

从Chrome 18开始，MutationObservers已经实现，它很快，并且不会过快触发，因此非常简洁。DOM Mutation Observers是异步的，可以在一次调用中触发多个更改！它显着提高了突变的性能。

使用MutationObservers的示例：

var observer = new MutationObserver(function onMutationObserver(mutations) {
  mutations.forEach(function(mutationNode) {
    // New Nodes added ... Deal with it!
  });
});
observer.observe(historyContainerDOM, { childList: true, subtree: true });

我已经在我开源扩展中添加了一些关于这个的注释，随便拿你想要的。

- Mohamed Mansour