Is it possible to render web content over a clear background using WebKit?

Question

I'm trying to gauge the possibility of a patch to WebKit which would allow all rendered graphics to be rendered onto a fully transparent background.

The desired effect is to render web content without any background at all, it should appear to float over the desktop (or whatever is displayed behind the browser window).

Has anyone seen an app do this? (I can think of some terminal emulators that can.) If anyone has worked inside of WebKit (or possibly Gecko?) do you think it would be possible to do this?

---

Update: I've come to realize that Mac OSX dashboard widgets use this exact technique. So, this must be possible.

---

Update 2: I've compiled WebKit on linux and noticed the configure options include:

--enable-dashboard-support
enable Dashboard support default=yes

I'm getting closer. Can anyone help?

---

Update 3: I continue to find references to this in posts on various related mailing lists.

• https://lists.webkit.org/pipermail/webkit-dev/2008-September/005019.html
• https://lists.webkit.org/pipermail/webkit-dev/2009-June/008182.html

Answer 1

Solved!

Through ongoing research, scouring forums and source code repositories, I peiced together the necessary steps to accomplish this using only libwebkit and a standard compiz desktop (any Xorg desktop with compositing should do).

For a current libwebkit (1.1.10-SVN), there is an Ubuntu PPA:

deb http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main
deb-src http://ppa.launchpad.net/webkit-team/ppa/ubuntu jaunty main

As far as the code goes, the key is calling webkit_web_view_set_transparent.

And of course the system you're running it on should have a capable graphics card (intel, radeon, or nvidia) and be running a compositing window manager (like Compiz).

And finally, to actually see transparency, the content you're viewing must set a transparent background using CSS3, otherwise it's still completely opaque.

It's as simple as:

BODY { background-color: rgba(0,0,0,0); }

Here' is the full sample for the simplest possible webkit browser app, with transparency support:

#include <gtk/gtk.h>
#include <webkit/webkit.h>

static void destroy_cb(GtkWidget* widget, gpointer data) {
  gtk_main_quit();
}

int main(int argc, char* argv[]) {
  gtk_init(&argc, &argv);

  if(!g_thread_supported())
    g_thread_init(NULL);

  // Create a Window, set colormap to RGBA
  GtkWidget* window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  GdkScreen *screen = gtk_widget_get_screen(window);
  GdkColormap *rgba = gdk_screen_get_rgba_colormap (screen);

  if (rgba && gdk_screen_is_composited (screen)) {
    gtk_widget_set_default_colormap(rgba);
    gtk_widget_set_colormap(GTK_WIDGET(window), rgba);
  }

  gtk_window_set_default_size(GTK_WINDOW(window), 800, 800);
  g_signal_connect(window, "destroy", G_CALLBACK(destroy_cb), NULL);

  // Optional: for dashboard style borderless windows
  gtk_window_set_decorated(GTK_WINDOW(window), FALSE);


  // Create a WebView, set it transparent, add it to the window
  WebKitWebView* web_view = web_view = WEBKIT_WEB_VIEW(webkit_web_view_new());
  webkit_web_view_set_transparent(web_view, TRUE);
  gtk_container_add (GTK_CONTAINER(window), GTK_WIDGET(web_view));

  // Load a default page
  webkit_web_view_load_uri(web_view, "http://stackoverflow.com/");

  // Show it and continue running until the window closes
  gtk_widget_grab_focus(GTK_WIDGET(web_view));
  gtk_widget_show_all(window);
  gtk_main();
  return 0;
}

Answer 2

Back in Safari 1.3 and 2, there was a hidden debug menu (invoked via the Terminal: defaults write com.apple.Safari IncludeDebugMenu 1) that included a “Use Transparent Window” option.

• http://www.macosxhints.com/article.php?story=20050418015445258
• http://www.wiredatom.com/blog/2005/10/20/safari-transparency/

Not sure if this was a WebKit thing or a Safari thing though.

(In Safari 3, the debug menu seems to have been replaced by the “Develop” menu (enable in Preferences > Advanced) which doesn’t have the transparent window option.)

Answer 3

This gist works for me, as of 2013, tested only with ubuntu:

https://gist.github.com/pouria-mellati/7771779

Answer 4

I have a new solution which is really easy to do, for a single screenshot. It's using node.js with phantom.js library.

1. install node.js
2. run 'npm install -g phantomjs' in console/terminal

3. save the following as script.js and run it from console 'phantomjs script.js'

   var page = require('webpage').create();
   page.viewportSize = { width: 1920, height: 1500 };
   page.open("http://www.theWebYouWantToRender");
   page.onLoadFinished = function(status) {
       page.evaluate(function() {
           document.body.style.background = 'transparent';
       });
   
       page.render('render.png');
       phantom.exit();
   };
   

4. profit? :) enjoy

Answer 5

Basically you want to be setting the ARGB colour space to be sending to the window manager. Obviously only window managers that support compositing will be able to take advantage of this.

You might want to talk to the screenlet and compiz developers they should be able to help out more.