Extensions modifying pages is fine, but often an extension wants to show custom UI on top of the page.

It’d be much more secure to allow the extension to do that without requiring it to put this into the page.

For example, currently you have the DOM of the page, and the extension’s UI is injected into it.

It would be preferable if you’d treat each tab as if it was like

    <tab>
      <browser src="actualpage"/>
      <overlay src="extension1"/>
    </tab>

This way an extension that wants to show secure UI on top could do it, and style it, but without it being accessible to the page itself.

Some extensions like Google Inbox for Chrome will inject a single `iframe` that points to a `chrome-extension://` page, so while the page might notice the element, it can't access its content.

I think you could use the Shadow DOM in closed mode to prevent any information from leaking. [1]

[1]: https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d742...

Pages sadly could still detect this content, and change their behaviour based on it.

Ideally you’d want to allow addons to modify pages in a way that pages can not detect or interfere with.

(e.g., some newspapers used to run JS to remove the AdBlock "block this" UI whenever you tried to remove an ad)

That only works for extensions that want to show their content in a separate overlay layer from the page. If the extension wants to show its content inline with the page's elements, pushing the page's elements out of the way and freely flowing with the page's elements, then that doesn't exactly work.

An extension can stuff its UI within an iframe that the host page can't manipulate, but that does come with some UI limitations.

Still, it’d be a major improvement over what we have today.

As long as the extension UI is rendered where the page can also render something, it will be vulnerable to phishing. E.g. https://www.seancassidy.me/lostpass.html

Correct, that’s why it’d be preferable to have it handled in the browser itself.

If it’s a message in the browser chrome itself, and not as <div> in the page, it is possible to add distinguishing UI.

With the current system, it’s literally impossible to distinguish the UI

Chrome has extension popups that kind of do this - they are pointed to the icon in the extension bar. Does Firefox have anything like that?

Yes, Firefox has the same – but they’re obviously not optimal in the context of a page.