Content script not seeing parts of the DOM at document_end or document_idle

Add-ons Development
#1

I’m trying to target an element upon page load, but it doesn’t exist yet at script runtime, either at "run_at": "document_end" or "document_idle" (in the manifest under "content_scripts").

However, if it is run long after the said ‘idle’ point – which happens when web-ext refreshes my extension every time I save code – then the element is available.

So most likely the issue comes from the fact that a page script is populating the document and still hasn’t completed at that point.

The page in question is a Trello board e.g. https://trello.com/b/rq2mYJNn/public-trello-boards, and I’m trying to querySelector('.board-header').

Can anyone suggest a good solution? I can think of two ways so far, 1) a wait-and-check loop that ends once the element is found, or 2) try using mutationObserver.

What’s the best way around this issue?

#2

The Mutation Observer is probably the best way.
The API is a bit complicated, make sure to read the docs and see the example there. Also make sure to call observer.disconnect(); once your target element appears.