Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to make part of the browser transparent to display underlying desktop/windows in a web app? [closed]

I am developing a web application (meant to run work as a rich client and able to afford requiring any (even nightly build) version of Firefox of Chromium).

The application interface background is meant to be transparent (showing underlying windows or desktop). How can I achieve this? Following standards does not matter but would be nice.

Primary target platform is Linux.

UPDATE addressing comments and answers received to the moment of 2010-07-07T01:44Z.

Technically it's nothing about code interaction and breaking the "sandbox". It's about window composition. I even think it can be implemented pretty easy in a compositive window manager without a browser even knowing of this - just replace some useless colour (for example "fuchsia" was widely used for this during Windows 9x age) with the underlying layer content.

Politically, this can and should be a restrictable function (like local file and webcam access, for example), which can be allowed for trusted intranet applications (local web-tech-based rich client applications seem to be a trend beginning - Firefox and Chromium implement more and more features to facilitate this) and forbidden for unknown 3-rd party websites (but this would require more complex interaction between a browser and a window manager).

The reason why would I like it is that I want to build a cross-platform (Linux, Windows, Mac), zero-install, fancy-looking rich client application (not meant to be served as an Internet website) with web technologies (like HTML5, CSS3 and JavaScript). I even will probably seek to use some browser-window-less tech to run it (I've heard about Mozilla Prism and XulRunner, KDE and Windows offer to use HTML for desktop widgets, Chromium is meant to offer something alike, etc.)

like image 877
Ivan Avatar asked Jul 07 '10 00:07

Ivan


People also ask

Can you make a Web page transparent?

You can easily make a transparent web page using the opacity property in HTML. You simply need to adjust the opacity value between 0.0 to 1.0 where a low value represents high transparency and a high value represents low transparency.

Can you make a window transparent?

You can press the shortcut (ALT+A, which is changeable by clicking the toolbar icon) or you can hover your mouse over the top of a window and click the down arrow that appears, then select "Opacity." WindowTop also has the click-through feature that Peek Through has.

How do you make an app transparent?

By default, the hotkey to apply the transparency effect is Ctrl + (0 to 9). You can change this hotkey using the Settings of this tool. For this, launch this tool, right-click on its system tray icon, and select the Restore option. After that, you can set hotkeys and other options.


2 Answers

This is not possible "currently", but there's no technical reason why a browser couldn't provide a proprietary API for this, using non standard html/css/js.

However, that's what it would take, a browser to actually implement this functionality and then expose it as an API, and even then it would be browser specific.

UPDATE (as some people have perhaps misunderstood my answer???):

I'm giving technical context to the question. Of course noone's ever going to implement this, but I'm saying it's technically possible.

Also, doing this would not break the sandbox model. The browser itself (forget an API for a second) could implement transparency any way it wanted. Once it that it could hook it up to it's Javascript engine, and create a stupid call: Chrome.Element("").WeirdTransparency()

UPDATE to Questioner's Update:

to your point:

The reason why would I like it is that I want to build a cross-platform (Linux, Windows, Mac), zero-install, fancy-looking rich client application (not meant to be served as an Internet website)

AIR kinda covers 90% or your requirements. It still needs a small install, but apart from that, you're running...

like image 80
andy Avatar answered Sep 20 '22 20:09

andy


This is possible in Electron. By setting a transparent background on the body.

like image 43
Erik van Velzen Avatar answered Sep 20 '22 20:09

Erik van Velzen