Show information on page without changing page DOM?

Add-ons Development
#1

Hi, is there a way for my add-on to display something in a page without modifying the page’s DOM? It seems no matter how small the DOM change is, there will always be pages that get confused by it. In my case, I add a div (with a unique id) and place it in the right lower corner of a textarea to show feedback about what spell checker language has been detected. But after short testing I already found that this breaks some pages.

Regards
Daniel

#2

If you really want it to be displayed inside the page, then modifying the DOM is your only choice. But does it have to be displayed inside the page? Maybe you could add a toolbar button/panel/notification?

#3

Thanks, I might try a panel, just putting it on top of the page. As it will only appear for a few seconds that might be okay. Also, maybe web components with shadow DOM might help in the future? When I just turned them on in about:config it didn’t work in my add-on, it actually made FF stop display pages at all but I didn’t see any error message.

#4

Actually can’t he just append into the linkedBrowser element? Like the per tab alert boxes it gets appended in there, he doesn’t have to mess with DOM at all i did it before, here: http://stackoverflow.com/a/26601866/1828637

That tabmodalprompt element gets created when you have a content alert box. So he can do stuff like that no?

#5

I haven’t worked with linkedBrowser before, but it’s worth a try I guess.

#6

Greetings @noitidart
I think there’s a typo here as the example you pointed to uses DOM manipulation. The addInjections function in the gist has these three lines:

theDoc.documentElement.appendChild(myIFrame);
theDoc.documentElement.appendChild(myScript);
theDoc.documentElement.appendChild(myImage);