Browser Plugin w/ jQuery - Capture DOM Updates (Facebook specifically)

I am currently writing a browser plugin that inserts some HTML elements onto the page. I am wonderin开发者_StackOverflow社区g how I can make my plugin detect when the website has updated the DOM and then go and modify the HTML as needed.

In this specific example I am trying to insert some HTML on Facebook. Using the $(document).ready() function is not working since Facebook is updating their page with AJAX. This seems to be true when a user navigates to a group page as well as when the user scrolls down the page and it loads more info.

I can't simply attach a click or scroll listener using .live() since I still would need to wait for the page to finish updating before I can change the DOM.

Anyone have any ideas?

You can load the comment using JavaScript with the following code:

var abc = $("#fb-comments-wrapper");
var b = "<fb:comments href=\"page_url"\ num_posts=\"2\" width=\"420\"></fb:comments>"
abc.html(b);

After this call the following code which will load the facebook comment into the div named 'fb-comments-wrapper' and call the upon the 'facebookCommentLoaded' function when loaded:

FB.XFBML.parse(document.getElementById('container_of_fb-comments-wrapper'),facebookCommentLoaded);

Your 'facebookCommentloadedfunction' can do the things you want:

function facebookCommentLoaded() {
    $(".uiBoxYellow").css("display","none");
    $(".commentas").css("display","none");
}

I was however unable to make any style changes to the facebook div's. Somehow they were not available through document.getElementByClass. Seems facebook modifies the dom in a way that prevents custom CSS.