Wednesday, December 30, 2009

Adding custom Javascript bindings to WebKIT

This post will show you how to add custom objects / functions which are implemented in C but used in a Javascript that's part of a HTML document that WebKIT renders. We will add a class "myclass" to the Javascript engine instance and it will have one static function named "mymethod()" that returns a single string.

First you need to install all the needed dependencies, assuming you are using Ubuntu or other Debian based system run the following command as root:
  • apt-get install libwebkit-1.0.1 libwebkit-dev
The following very simple HTML page will be used to test that the Javascript binding to the native C function works properly.

simple.html
<html>
<body>
<h1>String in html</h1>

<script type="text/javascript">
document.write("<h1>String from JS:");
document.write(myclass.mymethod());
document.write("</h1>");
</script>

</body>
</html>

C implementation of myclass.mymethod()

mymethod() will be implemented as a static function on the myclass object. The JavaScript framework used by WebKIT can be used with an API that's documented on Apple's pages. The important thing for this simple class is the JSClassDefinition and JSStaticFunction struct both have to be filled out with information about our class, including its static function(s) (mymethod), initialize/constructor callback, finalize/destructor callback and so on. To add the class to the Javascript engine we need something called the JSGlobalContextRef, how you get it depends on the flavor of WebKIT you are using. In this tutorial I will show how to do it with the GTK port of WebKIT. Connect a handler to the window-object-cleared signal which is sent when a new page is loaded (found this out after a lot of googling, reference). In the callback you connect you can call webkit_web_frame_get_global_context(), it will return the JSGlobalContextRef you need.

Enough talking, here is the actual source code for the example,


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

static void myclass_init_cb(JSContextRef ctx, JSObjectRef object)
{
// ...
}

static void myclass_finalize_cb(JSObjectRef object)
{
// ...
}

static JSValueRef myclass_mymethod(JSContextRef context,
                       JSObjectRef function,
                       JSObjectRef thisObject,
                       size_t argumentCount,
                       const JSValueRef arguments[],
                       JSValueRef *exception)
{
JSStringRef string = JSStringCreateWithUTF8CString("mystring");
return JSValueMakeString(context, string);
}

static const JSStaticFunction class_staticfuncs[] =
{
{ "mymethod", myclass_mymethod, kJSPropertyAttributeReadOnly },
{ NULL, NULL, 0 }
};

static const JSClassDefinition class_def =
{
0,
kJSClassAttributeNone,
"TestClass",
NULL,

NULL,
class_staticfuncs,

myclass_init_cb,
myclass_finalize_cb,

NULL,
NULL,
NULL,
NULL,
NULL,
NULL,
NULL,
NULL,
NULL
};

static void addJSClasses(JSGlobalContextRef context)
{
JSClassRef classDef = JSClassCreate(&class_def);
JSObjectRef classObj = JSObjectMake(context, classDef, context);
JSObjectRef globalObj = JSContextGetGlobalObject(context);
JSStringRef str = JSStringCreateWithUTF8CString("myclass");
JSObjectSetProperty(context, globalObj, str, classObj,
                   kJSPropertyAttributeNone, NULL);
}

static void window_object_cleared_cb(WebKitWebView  *web_view,
                                WebKitWebFrame *frame,
                                gpointer        context,
                                gpointer        arg3,
                                gpointer        user_data)

{
JSGlobalContextRef jsContext = webkit_web_frame_get_global_context(frame);
addJSClasses(jsContext);
}

static GtkWidget* main_window;
static WebKitWebView* web_view;

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

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), "window-object-cleared", G_CALLBACK(window_object_cleared_cb), web_view);

return scrolled_window;
}

static GtkWidget* create_window()
{
GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
gtk_window_set_default_size (GTK_WINDOW (window), 500, 500);
g_signal_connect (G_OBJECT (window), "destroy", G_CALLBACK (destroy_cb), NULL);
return window;
}

int main (int argc, char* argv[])
{
gtk_init (&argc, &argv);
if (!g_thread_supported())
   g_thread_init (NULL);

GtkWidget* vbox = gtk_vbox_new(FALSE, 0);
gtk_box_pack_start(GTK_BOX(vbox), create_browser (), TRUE, TRUE, 0);

main_window = create_window();
gtk_container_add(GTK_CONTAINER (main_window), vbox);

gchar* uri = (gchar*) "file://simple.html";
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;
}

Compile & Test

Finally, to compile and test the example code run the following commands:
  • gcc test.c -o test `pkg-config --cflags --libs webkit-1.0`
  • ./test
Posted by at

6 comments:

  1. Søren HaubergMarch 26, 2010 at 5:27 PM

    Thanks a bunch for this; it helped me get started. In the definition of 'class_def' you call the class 'TestClass'. Shouldn't that be 'myclass'?

    Also, when I run your code I get the following errors:

    error: line 496: 0 is wrong flag id
    error: line 73039: 0 is wrong flag id
    error: line 107714: 0 is wrong flag id
    error: line 118169: 0 is wrong flag id
    error: line 122679: 0 is wrong flag id
    error: line 150316: 0 is wrong flag id

    Any idea what is causing them?

    Søren

    ReplyDelete
  2. Niklas NylundApril 6, 2010 at 9:44 AM

    Yes, that's a typo in my code. It should be myclass, or you change the html to use TestClass instead ;-)

    I do not know what is causing that error...

    ReplyDelete
  3. UnknownJune 5, 2010 at 11:53 AM

    It really helped me to understand how to add custom javascript bindings.
    You give a simple function similar to printf in C code but is it possible to pass arguments for C funtions from javascript.
    For example, int max(int a,int b) a C funtion and I would like to have in javascript document.write(max(6,9)); ?

    ReplyDelete
  4. Niklas NylundJune 5, 2010 at 12:39 PM

    The arguments are sent to the callback (myclass_mymethod in the example code) as a JSValueRef array.

    See Apple's documentation (http://developer.apple.com/mac/library/documentation/Carbon/Reference/WebKit_JavaScriptCore_Ref/JSObjectRef_h/index.html#//apple_ref/c/tdef/JSObjectCallAsFunctionCallback)

    ReplyDelete
  5. UnknownJune 30, 2010 at 6:24 AM

    You showed how to add javascript objects using JavaScriptCore API but is also possible to add custom eventhandler for a javascript object?

    ReplyDelete
  6. UnknownDecember 15, 2010 at 11:50 PM

    I want to know that,
    How to add array attribute in class_staticValues, like
    "arr" is the new attribute what I want to add in "newObj".
    calss_staticValues
    {
    //{ "arr", newObjectGetFunction, newObjectSetFunction, kJSPropertyAttributeNone },
    }

    when we call newObj.arr[0] from html, then it should invoke newObjectGetFunction() function and when we call newObj.arr[0]= "some string" from html, then it should call newObjectSetFunction() function.

    Please help.
    Thanks in Advance.

    ReplyDelete

Subscribe to: Post Comments (Atom)