Undetectable widgets, to avoid conflicts (modals, tooltips, notifications, …)

[fregante]

Some extensions inject widgets and other hidden DOM content that is at risk of being inadvertently removed by the host website. Some examples:

• overlays (modals, tooltips, notifications, anything that doesn't change the layout)
• iframes (used for sandboxing or by APIs clients (e.h. gapi))
• <style> created by the content script

I think we'd benefit from a way to inject content without risking (style) conflicts, removal by the host, race conditions, etc.

Proposal

Offer a shadow/child/detached/isolated document context that extensions can interact with without being detected. This document would be visually overlaid on the page, if any elements are visible, without causing any layout shifts.

const modal = document.createElement('dialog');
modal.append(document.createElement('iframe'))
browser.dom.attach(modal, {style: 'isolated'});
modal.showModal();

const style = document.createElement('style');
ReactDom.render(<CssVariablesUpdatedViaIframeWidgetOrSomething/>, style);
browser.dom.attach(style);

I haven't put much thought into the actual API that would enable this, as it would probably have to follow the browser limits/implementation.

Prior art

• content script styles appear as "injected stylesheet" in Chrome but are not actually attached to the document. They might now be surfaced in this document.
• content scripts have a dedicated execution world, which the host cannot access

Other more specific requests

• Discussion: add a way to show a modal #347
• Proposal: Ability to insert CSS from content script context #403

[xeenon]

Similar to #235.

[Rob--W]

Closing as duplicate of #235. The generic feature request has come up many times before, but there won't be any progress until there is a specific API proposal that can feasibly be implemented by browsers. See the meeting notes of today's meeting (pending review in #660) for more words on this.

[fregante]

Thank you