在推特流加载时加载 chrome 扩展脚本

Load chrome extension script when twitter stream loads

本文关键字：加载 chrome 扩展 脚本      更新时间：2023-09-26

我刚刚写了一个chrome扩展，用雅虎财经的数据替换了前面用$设计的股票代码。不过，根据 Twitter 加载流的方式，我遇到了一些问题。我将 js 设置为在document_end上运行，但在 DOM 准备就绪后，推特会加载流。为了解决这个问题，我只是检查了某个元素是否存在，然后运行脚本，如果它不只是等待 500 毫秒并重试。

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

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

该项目托管在GitHub上，可以获得一些反馈和可能的贡献，这将是非常棒的。

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

最简单的方法是收听 DOMMutation 事件。在浏览器呈现推文之前，你可以使用DOMNodeInserted事件捕获此推文。

由于Chrome 18，现在MutationObservers已经实现，它速度很快，并且不会快速触发，因此简洁。DOM 突变观察器是异步的，每次调用可以触发多个更改！它显着提高了突变的性能。

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

我已经在我的一个开源扩展中添加了一些评论，这些评论谈到了这一点，请随意获取您想要的内容。

相关文章：