Chrome Extension Loading Javascript

Question

I have an extension that removes rouge applications from a users news feed on Facebook.

Within the extensions JS I programatically include a <script> tag which is used for stats tracking. Basically to see how many people are using the application, from what countries etc.

The problem is when the user is on Facebook, the tracking script will only load once. And as the user is browsing Facebook it won't load again unless they manually refresh the page.

Here is my code inside my content script.

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

I include the jQuery because I use jQuery for my plugin. Everything works fine except it only includes this script once and won't include it again unless the user manually refreshes the page.

Is this something to do with Facebook?

score 0 · Answer 1 · answered Sep 21 '16 at 22:40

To navigate page, even by ajax, user clicks the page, so on you may try listen click events on documents and check if location.hash is changed

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

And make sure your code allows to run it multiple times without page reload, now it wouldn't (facebook don't replace document on page navigation, so on on second call of tracking function d.getElementById(id) will not be empty and return will performed).

You may do it like this:

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

score -1 · Answer 2 · answered Dec 29 '11 at 18:21

-1

In addition to binding to document.ready, you could also run your tracker function for every ajax complete (since likely that's what is being triggered by facebook as the user navigates: Ajax requests, rather than new page requests):

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

answered Dec 29 '11 at 18:21

Jake Feasel

16,785
5
53
66

Thanks. I did try ajaxComplete but that didn't work either. – GV1 Dec 29 '11 at 18:38
`ajaxComplete` won't work from an extension context since it's a different instance of jQuery from the page itself - so page's AJAX does not trigger this even. – Xan Sep 26 '16 at 15:42

Chrome Extension Loading Javascript

2 Answers2