Allowing WebExtensions to draw above web content

[oliverdunk]

WebExtensions have privileged access to the browser and often have a desire to render UI above other content on the page. I recently opened an issue in the Web Extensions Community Group (w3c/webextensions#235) about trying to provide a better way for extensions to achieve this.

Traditionally there have been two options for extensions:

• Render UI in a popup or sidebar. These appear outside of the normal web content.
• Add elements to the page but attempt to set a higher z-index than any content on the page itself, and fight to keep the element appearing last in the DOM.

While these have worked well for a while, there are a few important limitations:

• For UI that needs to appear in the page, where popups and sidebars are not appropriate, there is no way to reliably prevent clickjacking. The extension is drawing with the same access as the third-party content.
• With the introduction of the Popup API/modal dialogs, ensuring content is visible has got even harder. An extension may place elements in the right part of the DOM initially but the page opening a popup could obscure it. Even worse, if the extension opens a modal and the page tries to use a popup, the resolution in What is the interaction between popup and other top layer elements #520 could cause an unexpected exception.

A few examples of use-cases that are not well catered for today:

• A password manager which wishes to render its own suggestions UI below an input field
• A dictionary which wishes to show UI when a user highlights a word
• An accessibility extension which wishes to draw boxes over content

While this isn't strictly a problem for the web platform the WECG has an ambition to collaborate more closely with other groups and I think this would be a great opportunity for that.

[gregwhitworth]

@oliverdunk this is a great question; I don't think that Open UI is the right place to solve this. I'm going to tap @mfreed7 on this one to ensure that the extension folks are involved in that discussion because there will need to be an additional "layering" capability to unlock what you're asking for but this will be UA specific. Heck, this may even be a privileged @layer in CSS or something. @dandclark is there someone from your area that should join in on the convo as well?