Chrome扩展加载Javascript

Chrome Extension Loading Javascript

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

我有一个扩展，删除胭脂应用程序从用户的新闻在Facebook上。

在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有关吗?

要导航页面，即使是通过ajax，用户也要单击页面，因此您可以尝试侦听文档上的单击事件并检查其位置。哈希值被更改

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

并且确保你的代码允许多次运行它而不重新加载页面，现在它不会(facebook不会在页面导航上替换文档，所以在第二次调用跟踪函数d.g elementbyid (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)
};

除了绑定到文档。准备好了，您还可以为每个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);
相关文章：