javascript run as last script after page loaded

Question

I was wondering if it's possible to edit the content of an embedded js which runs and generates dom content. Like for example fb js comments code or analytics code.

Is it possible to run a function as the last function that runs on the site so I can be able to make a modification of the rendered content that the embedded script generated. Let's take an example:

<div id="fb-root"></div>
                <script>(function(d, s, id) {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) return;
                  js = d.createElement(s); js.id = id;
                  js.src = \'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2\';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, \'script\', \'facebook-jssdk\'));</script>

When this code renders it generates a comments box, that looks as follows:

IS it possible to run a script after the content has been generated. And lets say modify a span element in the generated output?

Edit: I'M NOT INTERESTED IN CSS SOLUTIONS. I KNOW CSS, I ASKED SPECIFICALLY ABOUT JAVASCRIPT. NOT CSS

Answer 1

Can you not just use css to do that? !important can help in these situations...

If not, you could use the jQuery Live Query plugin but i think it is a bit outdated...

$('.theElementSelector').livequery(function() {
  //your code to change appearance of controls
});

Or you could use DOMNodeInserted (which is also outdated/deprecated):

$('body').on('DOMNodeInserted', '.theElementSelector', function(e) {
  //your code to change appearance of controls
});

A better solution is to use MutationObserver .

Another is insertionQuery :

insertionQ('theElementSelector').every(function(element){
    //callback
});

Answer 2

If you can work out what className or CSS selector for the parts of the Facebook you want to change. You can directly change the stylesheet for these.

Below is a little snippet that demonstrates this. If we pretend the classname .test is some CSS selector on this Facebook plugin, you could change the color like below. The setInterval is of course not needed, it's only there to show that it's changing in real time.

 let cssEntry; for (const s of document.styleSheets) { for (const r of s.cssRules) { if (r.selectorText === ".test") { cssEntry = r; } } } let c = 0; const colors = ["red", "green", "blue"]; setInterval(() => { cssEntry.style["background-color"] = colors[(c++)%3]; }, 1000);

 .test { color: white; background-color: black; }

 <div class="test"> <p>This should be white text on black background<p> <p>But in a few seconds should change between red / green / blue every second by directly changing the CSS inside the loaded stylesheet</p> </div>