Installing and Running WebKit in Linux Using Qt

Published 6 years 11 months ago on April 23, 2007 — 6 min read

I’m coming to appreciate more and more all of the hard work software developers perform. I wouldn’t consider myself an open source elitist, but there’s something special about the associated ideologies. When a large community of people band together to work on a project, a lot of fantastic products can be created.

One such product is WebKit, the open source Web browser rendering engine used by Safari (as well as a number of other products). It’s very important to keep in mind that Safari and WebKit are two very different things. Safari is a Web browser that uses WebKit as it’s rendering engine.

The WebKit developers put forth the effort to port WebKit to Qt, which is, as stated by the developers:

Qt is a comprehensive development framework that includes an extensive array of features, capabilities and tools that enable development of high-performance, cross-platform rich-client and server-side applications.

Qt is truly cross-platform and allows deployment on a wide range of hardware configurations, as opposed to other “cross-platform” products that are restricted to Windows and Mac OS X. The fact that the WebKit developers put forth the effort of porting to Qt4 gives users the ability to run their rendering engine on any platform. Thanks to their hard work, it’s quite easy to run a WebKit-based browser in Linux.

Preparing your Linux system for WebKit

I’d like to be explicit in saying that the following instructions are geared towards a fresh install of Ubuntu 7.04, but should be applicable to a wide variety of Linux distributions. First and foremost you’ll need to add extra repositories. After you have followed those steps we can begin.

There are a number of packages you’ll need to successfully build a Qt4 Web browser that uses WebKit.

sudo apt-get install libqt4-dev libxslt-dev gperf bison libsqlite3-dev flex build-essential subversion

There will be a lot of additional packages to install, so don’t be surprised if the list of packages for installation is significantly large.

Obtaining a nightly build of WebKit

Next, we’ll need to use Subversion to check out the WebKit source. The following command will check out files to a folder titled WebKit within your working directory, so be sure your working directory is appropriate (I used my home directory).

svn checkout http://svn.webkit.org/repository/webkit/trunk WebKit

You will be able to monitor the checkout process as each file is listed in your terminal.

Screenshot of Subversion checking out WebKit

The checkout will take some time, as there are quite a few files to download. When the checkout is complete, you’ll see the following message:

Screenshot of a completed Subversion checkout

Building your Qt4 WebKit browser

When the checkout is complete, you can initiate the build of your Qt4 WebKit browser using the following command:

QTDIR=/usr/share/qt4/ WebKit/WebKitTools/Scripts/build-webkit

The script will take a minute to prepare the build, and then the process will begin.

Screenshot of building a WebKit browser

This step can take quite a bit of time depending on your hardware configuration, so take a few minutes to have a cup of coffee and relax while your browser is being built. Your terminal will scroll with hundreds of lines of build commands and more, so don’t feel the need to sit and watch it build (unless you’re interested — I was).

Screenshot of building a WebKit browser

When your build is complete, you’ll see the following message:

Screenshot of a successful build of a Qt4 Web browser using WebKit

Running the browser

A successful build means you can run your Qt4 WebKit browser using the following command:

WebKit/WebKitBuild/Release/WebKitQt/QtLauncher/QtLauncher about:blank

A very basic browser window will appear with limited controls and an address bar. There will be some information scrolling in your terminal, but it can generally be disregarded.

Screenshot of a Qt4 Web browser using WebKit

You’ve now got a native WebKit browser to play around with in Linux. I took a second to attach the launch command to an entry in an panel using the WebKit icon. It’s more convenient than keeping the command saved somewhere to copy and paste when I’d like to test in WebKit.

WebKit Icon

You can also add your WebKit browser as an entry in your Applications menu using the menu editor if you prefer.

Some quirks I’ve come across so far

There are a few things that will appear out of place. First and foremost, you’ll notice that form inputs will have, what seem to be, a random background-color. I may be completely mistaken, but I haven’t looked into things deep enough to find the rhyme or reason behind the discrepancy. From what I can tell, if the input is styled with CSS, the style takes precedence over any ‘default’ colorization.

The next issue I’ve come across is that you’re not able to work with xHttpRequest. This is another issue I have not researched in enough detail, but if anyone has any insight regarding an inability to make use of XHR, I’d be interested in reading about it.

Finally, the only other quirk I’ve come across so far is that you’ll need to include http:// in any URL you enter in the address bar. While this may seem like a small detail to write about, after my first successful build I spent a few minutes thinking that something went wrong.

Things to keep in mind

Perhaps the most important thing to keep in mind is that you’re running a nightly build of WebKit, not the build Safari is using. The nightly versions are much more advanced than Safari’s WebKit, so some of the quirks that appear in Safari may be handled in your Qt4 browser.

Due to the version discrepancy, you can’t depend on a nightly build of WebKit sufficing for a legitimate test in Safari. It is useful, however, to take a quick look at overall structural elements of your designs before making the effort of moving to an OS X machine.

Footnotes and inspiration

I was originally drawn to working with WebKit on Linux by a post on the same subject at as days pass by. I had followed his instructions and ran into a few issues. Going on his advice, I joined #webkit on irc.freenode.net and started discussing a few issues with one of the developers there. He (or she) was extremely helpful in assisting me to successfully build WebKit. I was also directed to a Wiki page which included similar instructions to the post on as days pass by. I felt compelled to write this post based on specific instructions surrounding Ubuntu Feisty but would like to give much credit to the hard work of others.

There's a conversation brewing

  1. Heh. The reason the wiki page looks similar to my instructions is that I wrote the wiki page too ;-)

  2. @Stuart Langridge: Well that would make sense! Haha I had no idea, my apologies. Thanks for your original documentation as it was the inspiration for this post.

  3. I’ve started using the Windows webkit-based browser Swift (http://try.swift.ws/ if you haven’t tried it already). It’s in 0.2 alpha so it’s very unstable, but at least it’s consitent with CSS rendering bugs found in Safari.

    One thing that made me disappointed was that Swift didn’t support drop shadows on text. Do the Linux version of Webkit provide these? If so I just might switch over to Ubuntu 7.04 (which looks sweet) just for the sake of drop shadows :)

    Off topic: you seem to be running ubuntu, have you tried 7.04 yet?

  4. @Fredrik Wärnsberg: Unfortunately no, I’m not seeing any CSS3 in my WebKit build. That could be because I did a very standard build. I haven’t fully explored the capabilities of building my own browser using WebKit, but I’ll be sure to post any updates to the article.

    Yes, I’ve upgraded my machines to 7.04 with both clean installs and upgrades, both of which worked just fine. I’m a big fan of Ubuntu and this release doesn’t disappoint.

  5. How does this relate to Konqueror? I had read that Safari was built on a Konqueror foundation. Does Konqueror also use the WebKit rendering engine? It seems to be a pretty good preview of what to expect from Safari. Are you finding this not to be the case?

  6. @Simanek: Great question. If I remember correctly, Konqueror still uses KHTML as it’s rendering engine. WebKit is based on KHTML but has made some changes as well. I will continue to check in both Konqueror as well as WebKit from here on out I believe, but you’re right Konqueror can usually clue you in to some Safari quirks to expect.

  7. Re: random background colours on form elements

    Qt has its own colour scheme that you can view/edit by running qtconfig in case you’re curious.
    Opera/Linux uses them as well if not overridden.

    Of course that doesn’t answer the CSS priority issue.

  8. @zolan: I had assumed it was something like that, but wasn’t positive. Thanks for clearing it up!

  9. If you get problems about missing libraries, e.g.
    error while loading shared libraries: libWebKitQt.so.1: cannot open shared object file: No such file or directory

    try the following:
    LD_LIBRARY_PATH=WebKit/WebKitBuild/Release/lib WebKit/WebKitBuild/Release/WebKitQt/QtLauncher/QtLauncher about:blank

  10. hi,

    thanks for the instructions, i never knew how to build webkit on linux, now I do.

    Thanks a lot,

    Martin

  11. After type
    QTDIR=/usr/share/qt4/ WebKit/WebKitTools/Scripts/build-webkit

    I got error here..

    make[1]: *** [tmp/FontQt.o] Error 1
    make[1]: Leaving directory `/root/WebKit/WebKitBuild/Release/WebCore’
    make: *** [sub-WebCore-make_default-ordered] Error 2

  12. @pragnesh: Unfortunately I’m not familiar with that error. I’ll be sure to revisit the install process to see if I can find anything. In the meantime it might be good for you to hop in #webkit on irc.freenode.net — the operators there very helpful and friendly.

  13. hi,
    I tried to build webkitqt as instructions,but when I download source code and run WebKit/WebKitTools/Scripts/build-webkit script, hint me error:
    Could not find top level webkit directory above source directory using FindBin.
    anybody know it,thanks.

  14. @Jeff: Unfortunately I’m not familiar with such an error — I will see if I can dig anything up, though.

  15. When executing the QTDIR command, the script runs, but after a while I get this error:

    /WebCore/platform/PlatformString.h:171: error: expected ‘,’ or ‘…’ before ‘&’ token

    It won’t complete the build :/

  16. Alexander,

    I got the same problem, someone in the IRC channel suggested that I must upgrade QT to 4.3 to build webkit.

  17. Jeff,

    did you finally managed to build and run webkit with QT ?

    On my side i had to install libqt4-dev-kdecopy to have Qt 4.3. While building i got 2 or 3 errors easy to fix (like fct missing or wrong file name). I finally go the build to complete successfully.

    I launch it with: WebKit/WebKitTools/Scripts/run-launcher

    but then i got some error while the client is runing:
    FIXME: UNIMPLEMENTED: ../../../WebCore/platform/qt/WidgetQt.cpp:120 (virtual void WebCore::Widget::show())
    or
    FIXME: UNIMPLEMENTED: ../../../WebKit/qt/WebCoreSupport/FrameLoaderClientQt.cpp:195 (virtual void WebCore::FrameLoaderClientQt::forceLayoutForNonHTML())

    was wandering if you meet the same kind of problem or if you can point me to where i can find a solution.

    Thanks.

  18. Installing QT will take how much time ??

  19. @Kiran: It shouldn’t take very long at all – I’d imagine a maximum of one or two minutes.

By all means, contribute

Leave a comment

Powered by Fusion

This article is so meta

Published April 23rd, 2007

Random article

css.php