2

This is my first hack at writing a Chrome extension. I want it to execute some pretty simple JavaScript every time a Facebook page loads. It's doing everything I want except that for some reason, it only runs my script if I hit the Refresh button. If, e.g. I clicked on the Facebook logo, or I go to a status from my notifications, the script doesn't run... until I click refresh.

Here is my manifest:

{
    "name": "Anti-social Reader",
    "version": "1.0",
    "description": "Defeats 'social reader' apps on Facebook, by letting you just see the news story directly without installing the app.",
    "content_scripts": [
        {
           "matches": ["http://*.facebook.com/*", "https://*.facebook.com/*"],
           "js": ["kill_social_reader.js"],
           "run_at": "document_end",
           "all_frames": true
        }
     ]
}

I need it to wait until document_end because it is modifying the DOM of the loaded page. I'm sure it's something stupid... any ideas?

2
  • Thanks for the answers. I checked mtk's because he was the first to respond :) It's not so simple as adding a listener for the DOM changing, because my script modifies the DOM itself... so I suspect that would be bad. :) I tried out Amaan's solution (without understanding it) and it didn't quite work right for me, but I was probably doing something wrong -- I didn't spend any time debugging it. In any case, I think my basic question has been answered, now it's just a matter of triggering on the right event. Thanks for the answers!!
    – user435779
    Apr 4, 2012 at 13:53
  • Note that it's becoming more common for major websites, especially single page apps, to not do a full page reload but instead a state transition. E.g. YouTube, Trello, Twitter. Here's another solution that uses Chrome webNavigation API and tabs API: stackoverflow.com/a/21071357/72321
    – Dennis
    Aug 2, 2016 at 21:07

3 Answers 3

2

As mtk said, it's because Facebook uses AJAX calls when you click on the home button or whatever. To run your code every time an AJAX call is made, you can hijack XMLHttpRequest. You could add something like this to your content script, so that every time an AJAX request is opened, your code is called. You could add an event listener to wait for the AJAX request to complete before running your code too.

(function(open) {
  XMLHttpRequest.prototype.open = function() {
    // add the function you want to run here
    open.apply(null, arguments);
  };
})(XMLHttpRequest.prototype.open);
1
  • Correction: for this to work, this needs to be executed as a page-level script, and even then it's kind of hard to pull off (it will be isolated from the rest of extension code)
    – Xan
    Dec 24, 2014 at 13:24
1

In an obvious way it is not possible. The facebook page is making numerous ajax calls, hence the page does not reload completely. What you need here is to identify whether a ajax call response has been received by the browser or not? and then triggering the event required. I can't comment on that part as I'm still a newbie in that respect.

1

I think you might have written your code inside $(function () {}) which obviously require a page load. But you want to run your code if the page DOM changes, then this may help:

document.addEventListener('DOMNodeInserted', function (event) {

});

More info: http://reminiscential.wordpress.com/2011/10/04/building_google_reader_plugin/

1
  • 4
    For the record: this answer is deprecated by now. See DOM MutationObserver for a modern alternative. It'd be great if the author updated the answer.
    – Xan
    Dec 24, 2014 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.