-1

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 innerHTML when the page is finished loading.

The issue is that the webpage I'm modifying is rich in media and takes several seconds to load, thus causing the additional text to not display until a few seconds after the rest of the text has loaded.

The element I'm grabbing is a span. Is there any way of listening for this element to be loaded so that I can modify it as soon as possible?

DannyF247
  • 628
  • 4
  • 14
  • 35
  • See [manifest](https://developer.chrome.com/extensions/content_scripts) and particularly `run_at`, i.e. "run_at": "document_start" – Xotic750 Jul 14 '14 at 01:03
  • @Xotic750 Running at either "document_idle" or "document_end" produces the effect I described in OP. Running at "document_start" results in no effect, as the page element to be modified doesn't exist yet. – DannyF247 Jul 14 '14 at 01:16
  • @DannyF247 See this [canonical question](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener). Inject at start, listen for changes. – Xan Jul 14 '14 at 07:20
  • Exactly run_at document_start and if element does not yet exist then use a [`MutationObserver`](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) to watch for the elements addition to the DOM. – Xotic750 Jul 14 '14 at 08:17

1 Answers1

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

new MutationObserver(function (mutations) {
    mutations.some(function (mutation) {
        console.log(mutation);
        if (mutation.type === 'childList') {
            return Array.prototype.some.call(mutation.addedNodes, function (addedNode) {
                if (addedNode.id === 'added') {
                    mutation.target.textContent = 'Added text';
                    return true;
                }

                return false;
            });
        }

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

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

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

On jsFiddle

Xotic750
  • 22,914
  • 8
  • 57
  • 79
  • `document.body` does **not** yet exist at `document_start`. If I remember correctly, `document.documentElement` does. – Xan Jul 14 '14 at 09:08
  • (I'm not the OP by the way) Waiting for `DOMContentLoaded` is equivalent to running at `document_end` and is exactly what the OP doesn't want. Your code is good, with the exception of the element you attach to with `observe` call. – Xan Jul 14 '14 at 09:29
  • Just add the `MutationObserver` to `document` instead. – Xotic750 Jul 14 '14 at 09:43