Modify Page Element As Soon As It's Loaded

I'm currently writing a very simply Google Chrome Extension that utilizes Content Scripts, to simply add additional text onto a webpage by grabbing the element and appending to its

Solution 1:

As stated in the comments, inject your content script at "document_start" using the manifest setting "run_at"

Then use a MutationObserver on document to listen for it to be added.

Javascript

newMutationObserver(function (mutations) {
    mutations.some(function (mutation) {
        console.log(mutation);
        if (mutation.type === 'childList') {
            returnArray.prototype.some.call(mutation.addedNodes, function (addedNode) {
                if (addedNode.id === 'added') {
                    mutation.target.textContent = 'Added text';
                    returntrue;
                }

                returnfalse;
            });
        }

        returnfalse;
    });
}).observe(document, {
    attributes: false,
    attributeOldValue: false,
    characterData: false,
    characterDataOldValue: false,
    childList: true,
    subtree: true
});

document.addEventListener('DOMContentLoaded', functiononDOMContentLoaded() {
    var div = document.createElement('div');

    div.id = 'added'document.body.appendChild(div);
    console.log('Added a div');
}, true);

On jsFiddle