webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;">
从零开始基于ARM 交叉编译开源浏览器webkit 收藏
出发点： 我想看免费的国内外网络电视，所以基于ARM板DIY一个Internet TV, 需要做的工作主要有：
2) 移植clutter webkit实现类似apple界面
3) 移植Morphine.tv
实践过程：目前网络上交叉编译webkit的方法主要是基于QT,DFB,GTK,考虑到基于GTK的开源应用丰富得多，目前很多有价值的开源应用都是基于X11的，出于这点考虑，决定基于GTK交叉编译Webkit, 能google到的最流行的两篇交叉编译webkit的文章是http://ppbabytiger.spaces.live.com/blog/cns!549302309A9552BE!397.entry和http://blog.csdn.net/hou_jiong/archive/2009/01/18/3831022.aspx，但是基于这两篇文章我没有交叉编译成功，下面列出我基于X11编译webkit所依赖库的版本号：
| Name | Version |
| Zlib | 1.2.3 |
| Libpng | 1.2.10 |
| Tiff | 3.8.2 |
| Libtool | 1.5.24 |
| Jpegb | V6b |
| Freetype | 2.1.10 |
| Libxml | 2.6.30 |
| Fontconfig | 2.4.2 |
| XFree86 | 4.8.0 |
| libXft | 2.1.10 |
| Glib | 2.14.0 |
| Atk | 1.9.1 |
| Cairo | 1.4.2 |
| Pango | 1.20.0 |
| Gtk+ | 2.10.1 |
| ICU | 4c-3-6 |
| Libxslt | 1.1.22 |
| Libsqlite | 3.5.6 |
| Curl | 7.18.0 |
| Webkt | r29711 |
设置环境变量和编译配置
set cross compile environment firstly
export ARCH=arm
export CC=arm-none-linux-gnueabi-gcc
export CXX=arm-none-linux-gnueabi-g++
export BUILD_ROOT=$BUILD_ROOT
export PATH=$PATH:/opt/toolchains/arm-2007q3/bin/:$BUILD_ROOT/usr/bin
export PKG_CONFIG_PATH=$BUILD_ROOT/usr/lib/pkgconfig
1) zlib-1.2.3
./configure --prefix=$BUILD_ROOT/usr --shared && make && make install
2) libpng-1.2.10
./configure --prefix=$BUILD_ROOT/usr --host=arm-none-linux-gnueabi CFLAGS=-I$BUILD_ROOT/usr/include LDFLAGS=-L$BUILD_ROOT/usr/lib
make &&make install
3)tiff-3.8.2
./configure --prefix=/$BUILD_ROOT//usr --host=arm-none-linux-gnueabi
make &&make install
4) jpeg-6b
./configure --prefix=/$BUILD_ROOT/usr --host=arm-none-linux-gnueabi
make &&make install
5)freetype-2.1.10
./configure --prefix=/$BUILD_ROOT/usr --host=arm-none-linux-gnueabi
make &&make install
6)libxml2-2.6.30
./configure --prefix=/$BUILD_ROOT//usr --host=arm-none-linux-gnueabi
make &&make install
7)fontconfig-2.4.2
./configure --prefix=$BUILD_ROOT/usr/ --host=arm-none-linux-gnueabi --target=arm-none-linux-gnueabi --includedir=$BUILD_ROOT/usr/include/ --libdir=$BUILD_ROOT/usr/lib --with-arch=arm
make && make install
8) xfree86 4.8.0
refer to the website http://blog.chinaunix.net/u3/90973/showart_2003362.html
9)libXft-2.1.10
./configure --prefix=$BUILD_ROOT/usr/X11R6_SGX/ --includedir=$BUILD_ROOT/usr/include --libdir=$BUILD_ROOT/usr/lib --with-x --host=arm-none-linux-gnueabi --x-includes=$BUILD_ROOT/usr/X11R6_SGX/include/ --x-libraries=$BUILD_ROOT/usr/X11R6_SGX/lib/ LDFLAGS=-L$BUILD_ROOT/usr/X11R6_SGX/lib
make && make install
10)glib-2.14.0
add these lines into configure file
ac_cv_type_long_long=yes
glib_cv_long_long_format=ll
glib_cv_stack_grows=no
glib_cv_uscore=no
ac_cv_func_posix_getpwuid_r=yes
./configure --prefix=$BUILD_ROOT/usr/ --host=arm-none-linux-gnueabi --target=arm-none-linux-gnueabi --includedir=$BUILD_ROOT/usr/include/ --libdir=$BUILD_ROOT/usr/lib --with-arch=arm
make && make install
11)atk-1.20.0
./configure --prefix=$BUILD_ROOT/usr --build=i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi
make && make install
12) cairo-1.4.2
./configure --host=arm-none-linux-gnueabi --disable-nls --with-x --prefix=$BUILD_ROOT/usr --x-includes=$BUILD_ROOT/usr/include --x-libraries=$BUILD_ROOT/usr/lib
make && make install
13) pango-1.20.0
export FREETYPE_CONFIG=$BUILD_ROOT/usr/bin/freetype-config
export LDFLAGS="-L$BUILD_ROOT/usr/lib -Wl,-rpath=$BUILD_ROOT/usr/lib"
export CFLAGS="`pkg-config --cflags glib-2.0 cairo` -I$BUILD_ROOT/usr/include/freetype2"
./configure --host=arm-none-linux-gnueabi --disable-nls --with-x --prefix=$BUILD_ROOT/usr --x-includes=$BUILD_ROOT/usr/include --x-libraries=$BUILD_ROOT/usr/lib
14)gtk+-2.10.1
./configure --disable-cups --disable-nls --enable-xim=no --disable-xim-inst --with-xinput=no --prefix=$BUILD_ROOT/usr --host=arm-none-linux-gnueabi CFLAGS="`pkg-config --cflags cairo pango pangoft2 pangocairo` -I$BUILD_ROOT/usr/include -I$BUILD_ROOT/usr/include/freetype2" CPPFLAGS="`pkg-config --cflags cairo pango pangoft2 pangocairo` -I$BUILD_ROOT/usr/include -I$BUILD_ROOT/usr/include/freetype2"
make && make install
15) tar zxvf icu4c-3_6-src.tgz and cd icu
CC=gcc
./configure --enable-static --disable-shared
make
cp -r bin bin.linux
cp -r data data.linux
cp -r tools tools.linux
make distclean
CC=arm-none-linux-gnuabi-gcc
./configure --enable-static --enable-shared --host=arm-none-linux-gnueabi --prefix=$BUILD_ROOT/usr/
make
#will fail: /bin/sh: ../bin/icupkg: cannot execute binary file
cp -r bin bin.$ARCH
cp -r data data.$ARCH
cp -r bin.linux/* bin
cp -r data.linux/* data
make
rm bin/uconv
make
cp bin/uconv bin.$ARCH
cp bin.$ARCH/* bin
cp bin.linux/pkgdata bin
rm lib/*so*
make install
16)libxslt-1.1.22
./configure --prefix=$BUILD_ROOT/usr --build= i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi –without-crypto --with-libxml --with-libxml-prefix=$BUILD_ROOT/usr
make && make install
17) sqlite-3.6.13
./configure --enable-releasemode --prefix=$BUILD_ROOT/usr --build= i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi
make && make install
18) curl-7.19.2
./configure --prefix=$BUILD_ROOT/usr --with-zlib=$BUILD_ROOT/usr/ --build= i686-pc-linux-gnu --target=arm-none-linux-gnueabi --host=arm-none-linux-gnueabi
make && make install
19) WebKit-r29711
export LDFLAGS="-L$BUILD_ROOT/usr/lib -Wl,-rpath=$BUILD_ROOT/usr/lib"
./configure --prefix=$BUILD_ROOT/usr --host=arm-none-linux-gnueabi CFLAGS=-I$BUILD_ROOT/usr/include CPPFLAGS=-I$BUILD_ROOT/usr/include icu_config=$BUILD_ROOT/usr/
if there are errors like “u_charType_3_6 undefined” , link the depend library via adding -licui18n to dependency_libs in WebKit-r29711/libJavaScriptCore.la file
dependency_libs=' -lpthread -licui18n '
实践结果：
由于webkit编译完后只产生一个动态库，需要再编译个带有操作界面的浏览器，源码和Makefile如下：
#include <gtk/gtk.h>
#include <WebKit/webkit.h>
static GtkWidget* main_window;
static GtkWidget* uri_entry;
static GtkStatusbar* main_statusbar;
static WebKitWebView* web_view;
static gchar* main_title;
static gint load_progress;
static guint status_context_id;
static gboolean
show_web_view_cb (WebKitWebView* web_view)
{
GtkWidget* window = gtk_widget_get_toplevel(GTK_WIDGET(web_view));
gtk_widget_show_all(window);
return TRUE;
}
static WebKitWebView*
create_web_view_cb (WebKitWebView* web_view, WebKitWebFrame* web_frame)
{
GtkWidget* new_window;
GtkWidget* scrolled_window;
GtkWidget* new_web_view = webkit_web_view_new();
g_signal_connect (G_OBJECT (new_web_view), "web-view-ready", G_CALLBACK (show_web_view_cb), NULL);
new_window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
scrolled_window = gtk_scrolled_window_new(NULL, NULL);
gtk_widget_show(scrolled_window);
gtk_container_add(GTK_CONTAINER(new_window), scrolled_window);
gtk_container_add(GTK_CONTAINER(scrolled_window), new_web_view);
return WEBKIT_WEB_VIEW(new_web_view);
}
static void
activate_uri_entry_cb (GtkWidget* entry, gpointer data)
{
const gchar* uri = gtk_entry_get_text (GTK_ENTRY (entry));
g_assert (uri);
webkit_web_view_open (web_view, uri);
}
static void
update_title (GtkWindow* window)
{
GString* string = g_string_new (main_title);
g_string_append (string, " - WebKit Launcher");
if (load_progress < 100)
g_string_append_printf (string, " (%d%%)", load_progress);
gchar* title = g_string_free (string, FALSE);
gtk_window_set_title (window, title);
g_free (title);
}
static void
link_hover_cb (WebKitWebView* page, const gchar* title, const gchar* link, gpointer data)
{
/* underflow is allowed */
gtk_statusbar_pop (main_statusbar, status_context_id);
if (link)
gtk_statusbar_push (main_statusbar, status_context_id, link);
}
static void
title_change_cb (WebKitWebView* web_view, WebKitWebFrame* web_frame, const gchar* title, gpointer data)
{
if (main_title)
g_free (main_title);
main_title = g_strdup (title);
update_title (GTK_WINDOW (main_window));
}
static void
progress_change_cb (WebKitWebView* page, gint progress, gpointer data)
{
load_progress = progress;
update_title (GTK_WINDOW (main_window));
}
static void
load_commit_cb (WebKitWebView* page, WebKitWebFrame* frame, gpointer data)
{
const gchar* uri = webkit_web_frame_get_uri(frame);
if (uri)
gtk_entry_set_text (GTK_ENTRY (uri_entry), uri);
}
static void
destroy_cb (GtkWidget* widget, gpointer data)
{
gtk_main_quit ();
}
static void
go_back_cb (GtkWidget* widget, gpointer data)
{
webkit_web_view_go_back (web_view);
}
static void
go_forward_cb (GtkWidget* widget, gpointer data)
{
webkit_web_view_go_forward (web_view);
}
static GtkWidget*
create_browser ()
{
GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);
gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);
web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());
gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));
g_signal_connect (G_OBJECT (web_view), "create-web-view", G_CALLBACK (create_web_view_cb), NULL);
g_signal_connect (G_OBJECT (web_view), "title-changed", G_CALLBACK (title_change_cb), web_view);
g_signal_connect (G_OBJECT (web_view), "load-progress-changed", G_CALLBACK (progress_change_cb), web_view);
g_signal_connect (G_OBJECT (web_view), "load-committed", G_CALLBACK (load_commit_cb), web_view);
g_signal_connect (G_OBJECT (web_view), "hovering-over-link", G_CALLBACK (link_hover_cb), web_view);
return scrolled_window;
}
static GtkWidget*
create_statusbar ()
{
main_statusbar = GTK_STATUSBAR (gtk_statusbar_new ());
status_context_id = gtk_statusbar_get_context_id (main_statusbar, "Link Hover");
return (GtkWidget*)main_statusbar;
}
static GtkWidget*
create_toolbar ()
{
GtkWidget* toolbar = gtk_toolbar_new ();
gtk_toolbar_set_orientation (GTK_TOOLBAR (toolbar), GTK_ORIENTATION_HORIZONTAL);
gtk_toolbar_set_style (GTK_TOOLBAR (toolbar), GTK_TOOLBAR_BOTH_HORIZ);
GtkToolItem* item;
/* the back button */
item = gtk_tool_button_new_from_stock (GTK_STOCK_GO_BACK);
g_signal_connect (G_OBJECT (item), "clicked", G_CALLBACK (go_back_cb), NULL);
gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);
/* The forward button */
item = gtk_tool_button_new_from_stock (GTK_STOCK_GO_FORWARD);
g_signal_connect (G_OBJECT (item), "clicked", G_CALLBACK (go_forward_cb), NULL);
gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);
/* The URL entry */
item = gtk_tool_item_new ();
gtk_tool_item_set_expand (item, TRUE);
uri_entry = gtk_entry_new ();
gtk_container_add (GTK_CONTAINER (item), uri_entry);
g_signal_connect (G_OBJECT (uri_entry), "activate", G_CALLBACK (activate_uri_entry_cb), NULL);
gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);
/* The go button */
item = gtk_tool_button_new_from_stock (GTK_STOCK_OK);
g_signal_connect_swapped (G_OBJECT (item), "clicked", G_CALLBACK (activate_uri_entry_cb), (gpointer)uri_entry);
gtk_toolbar_insert (GTK_TOOLBAR (toolbar), item, -1);
return toolbar;
}
static GtkWidget*
create_window ()
{
GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_window_set_default_size (GTK_WINDOW (window), 1280, 720);
gtk_widget_set_name (window, "GtkLauncher");
g_signal_connect (G_OBJECT (window), "destroy", G_CALLBACK (destroy_cb), NULL);
return window;
}
int
main (int argc, char* argv[])
{
gtk_init (&argc, &argv);
GtkWidget* vbox = gtk_vbox_new (FALSE, 0);
gtk_box_pack_start (GTK_BOX (vbox), create_toolbar (), FALSE, FALSE, 0);
gtk_box_pack_start (GTK_BOX (vbox), create_browser (), TRUE, TRUE, 0);
gtk_box_pack_start (GTK_BOX (vbox), create_statusbar (), FALSE, FALSE, 0);
main_window = create_window ();
gtk_container_add (GTK_CONTAINER (main_window), vbox);
gchar* uri = (gchar*) (argc > 1 ? argv[1] : "http://www.google.com/");
webkit_web_view_open (web_view, uri);
gtk_widget_grab_focus (GTK_WIDGET (web_view));
gtk_widget_show_all (main_window);
gtk_main ();
return 0;
}
Makefile:
CC=arm-none-linux-gnueabi-gcc
CXX=arm-none-linux-gnueabi-g++
LDFLAGS=-L$BUILD_ROOT/usr/lib -Wl,-rpath=$BUILD_ROOT/usr/lib
CFLAGS=-I$BUILD_ROOT/usr/include/WebKit
SOURCE=webkit.c
all:
$(CC) $(SOURCE) -o webkittest `pkg-config --cflags --libs gtk+-2.0` $(LDFLAGS) $(CFLAGS) –lWebKitGtk
配置x11运行环境：
export FONTCONFIG_PATH=/etc/fonts
export PANGO_RC_FILE=/etc/pango/pangorc
export LD_LIBRARY_PATH=/usr/lib
Xfbdev &
export DISPLAY=:0
export LANG=zh_CN.gbk
export LC_ALL=zh_CN.gbk
export G_BROKEN_FILES=1
export LC_COLLATE=C
打开sina网站
./webkittest http://www.sina.com
