Search with thumbnail preview

The following example is an improved version of what I showed in Redwood City Developer Days: Google Search with thumbnail previews. This basically extends the previous demonstration of creating a preview using QtWebKit. The idea is fairly straightforward, just trigger Google Search with the search keywords, grab the result, iterate through the hits, get also the Google-served text snippet and then present everything using Graphics View. The challenge is to get the links pointed by Google. Because QtWebKit does not offer DOM API, this is thus done by injecting some JavaScript code using the infamous QWebFrame::evaluateJavaScript method (the code could use some improvement since I just crafted few quick-and-dirty JavaScript one-liners based on getElementsByTagName right before doing my WebKit talk). After that, generating the snapshot is easy, see the previous example.

Screenshot is provided below. However, much better if you just see the screencast (YouTube,, 3.3 MB Ogg Theora video). Even better, just compile the code and give it a try!

svn checkout svn://
cd searchsnap && qmake && make && ./searchsnap

Exercise for the reader: use jQuery to get the hit list. More exercise: with Qt 4.5's WebKit, you have HTML5's getElementsByClassName at your disposal.

Blog Topics: