Chrome扩展加载Javascript [重复]答案

【问题标题】：Chrome Extension Loading Javascript [duplicate]Chrome扩展加载Javascript [重复]
【发布时间】：2012-01-30 01:44:09
【问题描述】：

我有一个扩展程序，可以从 Facebook 上的用户新闻提要中删除 rouge 应用程序。

在扩展 JS 中，我以编程方式包含一个 <script> 标记，用于统计跟踪。主要看有多少人在使用该应用程序，来自哪些国家/地区等。

问题是当用户在 Facebook 上时，跟踪脚本只会加载一次。当用户浏览 Facebook 时，除非他们手动刷新页面，否则它不会再次加载。

这是我的内容脚本中的代码。

$(document).ready(function() {
// Include stats tracking
(function(d){
    var trackingjs, id = 'stats'; if (d.getElementById(id)) {return;}
    trackingjs = d.createElement('script'); trackingjs.id = id; trackingjs.async = true;
    trackingjs.src = "tracking_url";
    d.getElementsByTagName('body')[0].appendChild(trackingjs);
}(document));
}

我包含 jQuery，因为我将 jQuery 用于我的插件。一切正常，只是它只包含一次此脚本，除非用户手动刷新页面，否则不会再次包含它。

这和 Facebook 有关系吗？

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

除了绑定到 document.ready 之外，您还可以为每个 ajax 完成运行您的跟踪器功能（因为这可能是 facebook 在用户导航时触发的：Ajax 请求，而不是新页面请求）：

function tracker() {

// Include stats tracking
(function(d){
    var trackingjs, id = 'stats'; if (d.getElementById(id)) {return;}
    trackingjs = d.createElement('script'); trackingjs.id = id; trackingjs.async = true;
    trackingjs.src = "tracking_url";
    d.getElementsByTagName('body')[0].appendChild(trackingjs);
}(document));
}


$(document).ready(tracker);
$(document).ajaxComplete(tracker);

【讨论】：

谢谢。我确实尝试过 ajaxComplete，但也没有用。
ajaxComplete 不能在扩展上下文中工作，因为它是与页面本身不同的 jQuery 实例 - 所以页面的 AJAX 甚至不会触发它。

【解决方案2】：

要导航页面，即使是通过ajax，用户点击页面，所以你可以尝试监听文档上的点击事件并检查location.hash是否改变

var currentLocation=location.href;
document.addEventListener('click', function(){
  if(location.href == currentLocation){
    return;
  }
  currentLocation = location.href
  // run here your tracking code
});

并确保您的代码允许在不重新加载页面的情况下多次运行它，现在它不会（facebook 不会替换页面导航上的文档，所以在第二次调用跟踪函数 d.getElementById(id) 时不会为空并返回）。

你可以这样做：

function (d){
    var trackingjs, id = 'stats'; if (d.getElementById(id)) {return;}
    trackingjs = d.createElement('script'); trackingjs.id = id; trackingjs.async = true;
    trackingjs.src = "<url>";
    d.getElementsByTagName('body')[0].appendChild(trackingjs);
    trackingjs.onload = (function(trackingjs){
      trackingjs.parentNode.removeChild(trackingjs);
  })(trackingjs)
};

【讨论】：