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

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., 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?

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.