Make a GTK Web Browser with Glade

How to make a GTK web browser application with Glade and C code. A simple web browser example project using GTK+ 3 and the WebKitWebView widget from WebKitGTK.

It is very simple to make a web browser using the WebKit rendering engine. This is made possible in GTK by a full-featured port of the WebKit rendering engine by the WebKitGTK project. In Glade, a browser is implemented by placing a WebKitWebView widget. It is then accessed in C code.

The following image shows the web browser built in this tutorial. A page is shown loaded in the browser from the WebKitGTK website.

Part 26 of GTK 3 Programming with C and Glade Tutorial

See the full GTK3 tutorial index

About this GTK Web Browser Project

This project is the simplest implementation of a web browser using GTK. The web browser simply loads a page from a URL typed into the top URL bar. There is no back button, history or other functionality.

In order to develop GTK C projects that use the WebKitWebView widget and the WebKitGTK library, the development files for the library must first be installed.

Although WebKitGTK is a library written for GTK, it is not an official GTK component that is part of the main GTK libraries. WebKitGTK is developed as a separate project.

GTK Web Browser Tutorial Steps

Follow the tutorial steps below to build the simple GTK web browser example project. Watch the video embedded near the top of this page to see the project built with the following steps.

1. Install Development Files and Help

Because the WebKitGTK library is external to the main GTK project, development library files must be installed for WebKitGTK. Documentation can also be installed that will be available in Devhelp.

1.1 Install Development Files

On Linux Mint, enter the following command in a terminal window to install the development files. This should also work for Ubuntu, Debian and similar systems.

sudo apt install libwebkit2gtk-4.0-dev

1.2 Install Help Documentation

Install the help documentation for WebKitGTK with the following command.

sudo apt install libwebkit2gtk-4.0-doc 

After installing the above packages, we are ready to start developing the GTK web browser.

2. Create a New GTK C Glade Project

Use the new template files from part 24 of this tutorial series to start a new project. Make a copy of the template files folder and rename it to web_browser.

Change the target name in the make file to web_browser as well.

The webkit2gtk-4.0 library must be linked in the project. Add this to the line starting with GTKLIB in the make file.

A full listing of the make file is shown below.

makefile

# change application name here (executable output name)
TARGET=web_browser

# compiler
CC=gcc
# debug
DEBUG=-g
# optimisation
OPT=-O0
# warnings
WARN=-Wall

PTHREAD=-pthread

CCFLAGS=$(DEBUG) $(OPT) $(WARN) $(PTHREAD) -pipe

# Added webkit2gtk-4.0 for building with webkit2gtk
GTKLIB=`pkg-config --cflags --libs gtk+-3.0 webkit2gtk-4.0`

# linker
LD=gcc
LDFLAGS=$(PTHREAD) $(GTKLIB) -export-dynamic

OBJS=    main.o

all: $(OBJS)
	$(LD) -o $(TARGET) $(OBJS) $(LDFLAGS)
    
main.o: src/main.c
	$(CC) -c $(CCFLAGS) src/main.c $(GTKLIB) -o main.o
    
clean:
	rm -f *.o $(TARGET)

Without the WebKit library inserted into the make file, the following error will occur when trying to build the project.

fatal error: webkit2/webkit2.h: No such file or directory
 #include <webkit2/webkit2.h>

3. Edit the Glade File of the GTK Web Browser

Open the window_main.glade Glade file from the glade folder of the project directory for editing in Glade.

3.1 Edit the Main Window

Click the main window in Glade to select it. Change the following attributes of the main window in the right Glade pane under the General tab.

Set the title of the main window to Web Browser.

Change the Default Width to 800 and the Default Height to 600.

3.2 Place a GtkBox

Place a GtkBox in the main window. Reduce the Number of items to 2.

3.3 Place a GtkEntry

Find the GtkEntry widget under the Control button and place it in the top box of the GtkBox.

Give the GtkEntry an ID of entry_url.

In the Text field, put a default URL, e.g. https://prognotes.net

Under the Signals tab, add a handler function for the activate signal called on_entry_url_activate.

3.4 Place a WebKitWebView

The WebKitWebView widget is found under the button that has an icon of 3 vertically stacked boxes. Hovering the mouse cursor over this button shows Non-GTK+ widgets and objects.

Place a WebKitWebView in the second box of the GtkBox.

Give the WebKitWebView an ID of webkit_webview.

Under the Packing tab, switch the Expand switch on.

4. Edit the C Code

Open the main.c file from the src folder of the project for editing. Modify the code to add the GTK web browser functionality. A full listing of the code is shown below.

main.c

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

typedef struct {
    GtkWidget *w_webkit_webview;
} app_widgets;

int main(int argc, char *argv[])
{
    GtkBuilder      *builder; 
    GtkWidget       *window;
    app_widgets     *widgets = g_slice_new(app_widgets);

    gtk_init(&argc, &argv);
    
    // Workaround from: https://bugs.webkit.org/show_bug.cgi?id=175937
    //g_object_unref (g_object_ref_sink (webkit_web_view_new ()));
    webkit_web_view_get_type();
    webkit_settings_get_type();

    builder = gtk_builder_new_from_file("glade/window_main.glade");

    window = GTK_WIDGET(gtk_builder_get_object(builder, "window_main"));
    widgets->w_webkit_webview  = GTK_WIDGET(gtk_builder_get_object(builder, "webkit_webview"));
    
    gtk_builder_connect_signals(builder, widgets);
    
    webkit_web_view_load_uri(WEBKIT_WEB_VIEW(widgets->w_webkit_webview), "http://prognotes.net");

    g_object_unref(builder);

    gtk_widget_show_all(window);
    gtk_main();
    g_slice_free(app_widgets, widgets);

    return 0;
}

// User presses Enter in the URL bar
void on_entry_url_activate(GtkEntry *entry, app_widgets *app_wdgts)
{
    const gchar *the_url;
    
    the_url = gtk_entry_get_text(entry);
    
    webkit_web_view_load_uri(WEBKIT_WEB_VIEW(app_wdgts->w_webkit_webview), the_url);
}

// called when window is closed
void on_window_main_destroy()
{
    gtk_main_quit();
}

Without the line webkit_web_view_get_type(), the following error will be printed to the terminal window and the application will not start.

(web_browser:22334): Gtk-ERROR **: 18:50:37.681: failed to add UI: glade/window_main.glade:35:1 Invalid object type 'WebKitWebView'
Trace/breakpoint trap (core dumped)

Watch the video near the top of this tutorial page for an explanation of the code.