Find a way to pass css into url web views

[Sebastian-ubs]

User Story
As an extension developer, I want to pass custom css to a url web view so that I can only show the relevant information and hide other parts (e.g. headers, footers, ...).

Description
Be able to pass in css to customize a website that is shown in a tab, so that it fits into the available space and does not show superfluous ui elements.
See example

Implementation idea
It seems rather not likely based on the technical restrictions of an iframe (or need to use a CORS header, which not every public website out there would have), but maybe there still is a way...

Testing ideas

[Sebastian-ubs]

according to the electron docs, web views allow some more control than iframes (but should not be used for they are not officially supported and my change without notice 🤔)

[Sebastian-ubs]

There seem to be ways to pass in js into arbitrary webviews so that adding css would be possible (as well as extracting the current url, which supports scrolling with a reference selected on a website that changes their url accordingly, see step 3 of https://github.com/paranext/roadmap/issues/87)

• https://stackoverflow.com/questions/42930572/inject-css-into-webview-chrome-electron-html-css-js
• https://stackoverflow.com/questions/75046526/how-to-load-external-website-into-electron-and-manipulate-persist-its-css-correc
• https://stackoverflow.com/questions/33523171/how-can-i-access-the-dom-of-a-webview-in-electron
• Preload CSS for webview electron/electron#5325