Question

The problem is simple, but can’t figure out a solution. Many thanks for those who helps.
I want to modify a web page (DOM tree) before it is displayed on screen.
I understand that the DOM tree is fully loaded in memory before being processed.

Do any of you knows a way to process this fully loaded DOM tree while it is on memory
and then let it be displayed with its new structure ?

The reason i want to do that, is because i’m working on an addon that is adding content to an existing web site.

added-> Just need to mention that the existing web site is not mine, so i can’t use php to modify the website content is not mine.

But right now, the web site is displayed without the addon content
and you see the content coming after 1 second (because i append the content after website is already displayed), so you see the website content moving.

Thanks for helping.

Answer 1

I finally found a solution.

I make the addon looking at web page navigation. In fact, it looks at url changes so that I know the user is moving to a different location (therefore I know I have to do something before I even got the ‘Load’ event of the web page).

Then I just try to access an element (that I know will be in the DOM, like the header) using a loop. Then when the element appears (before the ‘Load’ event) I insert the code and stop looping/listening.

If anyone need more details of how it is all done, I’ll gladly answer your question.

Thanks.