Thursday, October 20, 2011

Building a Custom WebKit for your MacOSX Application

I recently ran into the issue of how to build WebKit in order to include it in a MacOSX project.
Even though it might look hard at first glance, it is actually a quite simple and straightforward process.
Let's have a look at how you can do it.

Installing XCode3

It might seems odd but presently WebKit does not compiles with XCode4, Therefore the first thing you need to do is to retrieve and install XCode3. XCode3 will be your compilation tool as well as your IDE for WebKit development.

XCode3 is available in the Downloads section of the Apple Mac Dev Center.

Retrieving the sources

Once you have installed the right devtools, you can retrieve the WebKit sources.
Assuming you want the  trunk, there is two ways to do it:

$svn checkouthttp://svn.webkit.org/repository/webkit/trunk WebKit
Retrieves the trunk of the subversion repository.

$curl -o WebKit-SVN-source.tar.bzhttp://nightly.webkit.org/files/WebKit-SVN-source.tar.bz2
$tar jxf WebKit-SVN-source.tar.bz2

Retrieves and unpack the latest nightly build.
Beware that these are not stable releases so some functionalities might be temporarily broken.

Preparing the retrieved sources for building

What you want is to build WebKit and put the resulting .framework bundles in your application bundle's Frameworks directory.
In order to do it, some preparation work is needed in the WebKit sources to ensure that the resulting dynamic libraries will be relocatable.

$cd WebKit/Source
Go to the source directory of the WebKit repository. This is where WebCode, JavaScriptCore and WebKit are located.

$find . -type f -name 'project.pbxproj' -exec sed -i 's/INSTALL_PATH = "$(BUILT_PRODUCTS_DIR)"/INSTALL_PATH = "@rpath"/g'
Ensure that the Installation Path of dynamic libraries is relocatable otherwise you won't be able to include the built framework wherever you want to.
@rpath is a special identifier in MacOSX linking tools used to make dynamic libraries location agnostic.

Building the WebKit

This is probably the simplest part of the work. From the root directory of the repository, executes the following command:
$Tools/Scripts/build-webkit --release
It build WebKit in release mode. Now you can a coffe since the building takes some time...

Once done, we have some more work to do because WebCore.framework has to be included in WebKit.framework.


$cd WebKitBuild/Release
Go into the built sources directory.

$mkdir WebKit.framework/Frameworks
$cp -R WebCore.framework WebKit.framework/Frameworks/
Copy the WebCore.framework in WebKit.framework so it can compile.

Using WebKit in your project

Ok, now you are ready to use WebKit in your project. To do it, simply copy WebKit.framework, WebCore.framework, JavaScriptCore.framework, JavaScriptGlue.framework and WebKit2.framework in your project Frameworks to use it!

The only I still have at this point is that I need to have a duplicate WebCore.framework in both the Frameworks subdirectory of WebKit.framework bundle and a copy (which is also necessary in the final bundle) in the same directory than the others .framework.

At last, before building your application, you will simply have to set the Search Path to point to the directory in your bundle where you have copied your frameworks (typically Frameworks).