加载 twitter 流时加载 chrome 扩展脚本

Question

我刚刚编写了一个 chrome 扩展程序，它用来自 yahoo Finance 的数据替换了前面用 $ 设计的股票符号。尽管基于 twitter 加载流的方式，我遇到了一些问题。我将 js 设置为在 document_end 上运行，但 twitter 会在 DOM 准备好后加载流。为了解决这个问题，我只是检查了某个元素是否存在，然后运行脚本，如果它没有等待 500 毫秒，然后再试一次。

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

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

该项目托管在 github 上，如果能获得一些反馈和可能的贡献，那就太好了。

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

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

我已经在我的一个open source extensions 中添加了一些讨论这个问题的 cmets，随意拿走你想要的。