在 Chrome 扩展程序中运行代码之前，如何等待 Twitter 趋势加载？答案

【问题标题】：How do I wait for Twitter trends to load before running code in Chrome extension?在 Chrome 扩展程序中运行代码之前，如何等待 Twitter 趋势加载？
【发布时间】：2012-06-14 00:13:02
【问题描述】：

我正在尝试为 Twitter 编写一个 Chrome 扩展程序，并且想稍微修改一下页面的布局。我已经尝试了很多东西并用谷歌搜索，但无济于事。

我想在趋势和页脚之间添加一个 div。但是，Twitter 似乎使用 ajax 生成这些元素，因此当我的代码运行时它们不存在，即使在 $(document).ready 函数中也是如此。

我让它工作的唯一方法是将我的代码放在 setTimeout 函数中 1-2 秒。这似乎是一个相当不可靠的解决方案，因此我将非常感谢任何有关此问题的帮助。

提前致谢！

【问题讨论】：

标签： javascript jquery twitter google-chrome-extension

【解决方案1】：

这样做的方法是创建一个后台页面，然后使用chrome.extension.getBackgroundPage().调用它 ajax 请求完成后，您可以调整弹出页面。如果您必须将参数发送到后台页面，那么您必须像这样将侦听器添加到后台页面：

================
chrome.extension.sendRequest({greeting: "hello"}, function(response) {
  console.log(response.farewell);
});


===============
chrome.extension.onRequest.addListener(
  function(request, sender, sendResponse) {
          sendResponse({farewell: "goodbye"});
  });

有关消息传递的更多信息，请访问：Message passing。

如果你真的不想做这一切，你可以通过将参数设置为 false 来同步调用使用 ajax 请求。

xmlhttp.open("GET","url",false);

但是这不是一个好的做法，我强烈建议不要这样做。希望这能解决您的问题！

【讨论】：

没有synchronous参数设置为true，你的意思可能是设置async参数为false。 See reference.
感谢您的帮助。我想我可能没有足够清楚地表达我的问题。我不是发出 ajax 请求的人，而是 Twitter 本身。我在不使用弹出页面的情况下严格修改 Twitter 的外观。不过，我确实计划很快编写另一个 chrome 扩展，所以这肯定会在未来有很大的帮助。谢谢！

【解决方案2】：

在每个 AJAX 请求后检查是否有一些 DOM 元素并不比使用 setTimeout 每 1-2 秒检查一次相同的东西好多少（就像你所做的那样）。

更好的方法是使用DOMNodeInserted 事件。如果您设置正确（将其添加到正确的元素中），您将在您等待的元素插入 DOM 时收到通知。事件触发后记得删除它（removeEventListener），因为突变事件以其performance issues而闻名。

【讨论】：

听起来正是我所需要的。谢谢！