Greasemonkey script to work on dynamically loaded posts on Facebook

Question

I wrote a Greasemonkey script and it affect the firstly loaded posts on Facebook. but after you scroll down on the feed, the script doesn't work on the newly loaded posts.

Is there a way to re-run the script for those posts, or something like that? can anyone help me?

Answer 1

Update:
This question and answer are very old and DOMSubtreeModified is deprecated.
I no longer recommend this approach. Instead see:

• Fire Greasemonkey script on AJAX request
• Run Greasemonkey script on the same page, multiple times?
• Choosing and activating the right controls on an AJAX-driven site
• Or use MutationObserver via a library like Mutation Summary, or similar.

---

---

Old answer:

Yes, since you are using Firefox, you can trigger off the DOMSubtreeModified event.

To do this, first wrap the code part of your current script in a function; for example:

// ==UserScript==
// @name            Facebook Fixer
// ==/UserScript==

function LocalMain ()
{
    //--- Do all of your actions here.
}

LocalMain (); //-- Fire GM script once, normally.

---

Next, find the node that contains the newly loaded posts.   Say that you find that it is a div with the id "All_posts_go_here" (I don't use Facebook, be sure to find the correct node, and do not use body, the browser will slow to a crawl).

Once you've identified the correct node, you can set the event listener. But, you also need a short time delay because the node changes come hundreds at a time and you need to wait until the current batch is done.

So, putting it all together, the code looks like this:

if (window.top != window.self)  //don't run on frames or iframes
    return;

function LocalMain ()
{
    //--- Do all of your actions here.
}

LocalMain (); //-- Fire GM script once, normally.


var PostsChangedByAJAX_Timer    = '';
//--- Change this next line to find the correct element; sample shown.
var PostContainerNode           = document.getElementById ('All_posts_go_here');

PostContainerNode.addEventListener ("DOMSubtreeModified", PageBitHasLoaded, false);


function PageBitHasLoaded (zEvent)
{
    /*--- Set and reset a timer so that we run our code (LocalMain() ) only
        AFTER the last post -- in a batch -- is added.  Adjust the time if needed, but
        half a second is a good all-round value.
    */
    if (typeof PostsChangedByAJAX_Timer == "number")
    {
        clearTimeout (PostsChangedByAJAX_Timer);
        PostsChangedByAJAX_Timer  = '';
    }
    PostsChangedByAJAX_Timer      = setTimeout (function() {LocalMain (); }, 555);
}

---

Beware that I'm assuming the node is not an iframe. If it is, then a different approach may be required.