Home > Bruce's Posts, Freebase, JavaScript > Quotation Chrome Extension

Quotation Chrome Extension

I’m creating a Chrome extension that allows a user to search for a quotation. I’d like to have a toolbar popup which allows the user to enter a search query and receive a list of matching quotations.

toolbar-search-1280x800

Creating and installing an extension is straight forward and already well documented. I’ll focus on the more specific aspects of the extension. Version one will do the following:

  • Provide a browser action which installs a toolbar item in Chrome’s toolbar.
  • When the user clicks on the extension’s toolbar icon a popup with a simple input field and search button will appear.
  • Upon clicking on the search button the extension will query Freebase for matching quotations and display the results in the popup.

Every Chrome extension contains a manifest file (manifest.json) which defines it. Here’s part of my manifest …

"browser_action": {
 "default_popup": "popup.html"
 },</pre>
"content_security_policy": "script-src 'self' https://apis.google.com https://ajax.googleapis.com https://ssl.google-analytics.com; object-src 'self'"
<pre>

When the Quotation toolbar icon is clicked popup.html will be displayed as a popup below the icon. The content_security_policy setting is required to allow calls to Google’s client and analytic API’s.

Using JQuery I’ll create a callback when the search button is clicked.

From popup.html …

</pre>
<form>
<table style="border-spacing: 0px; width: 80%;">
<tbody>
<tr>
<td style="margin: 0px; padding: 0px;">
<input type="search" id="query-field" style="margin: 0px; padding: 5px 3px 3px 7px; width: 100%; font-size: 15px;" autofocus/>
</td>
<td style="margin: 0px; padding: 0px; background-color: RoyalBlue;" align="center">
<input type="image" src="search.png" alt="Search" />
</td>
</tr>
</tbody>
</table>
 </form>
<pre>

The search script will listen for a click on the search button and when it occurs will send a search request to the Freebase search API and update the result list. Here’s an abridged version of the code.


function search() {</pre>
query = $('#query-field').val();
request = gapi.client.request({
'path': '/freebase/v1/search',
'params': {
'query': query,
'filter': '(any type:/media_common/quotation)',
'cursor': cursor,
'limit': limit
}
 });
 request.execute(function(json) {
length = json.result.length;

if (length != 0) {
$("#quotation-list").html('');
for (var i = 0; i < length; i++) {
var quotation = json.result[i].name;
var mid = json.result[i].mid;
var url = "http://quotation.bwgz.org/quotation" + mid;

         var id = "item-" + i;

         $("#quotation-list").append('<div class="result"><a id="' + id + '" href="' + url + '" data-mid="' + mid + '" target="_blank">' + json.result[i].name + '</a></div>');
}
 }
<span style="font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 18px;">});</span>

successI use the Google Client API to call Freebase’s search API. It returns a set of search results in a JSON wrapper. The code loops through the results and updates the page accordingly.

I limit results to 10 items per page and additional code handles the paging.  The Freebase search API will only supply the first 220 highest scoring results.  While this is a bit of an annoying limitation few users would page through more results than that.

Clicking on a search results causes the browser to open a new tab and sends the user to quotation.bwgz.org where they’ll see more details on the quotation.
Quotation
 

Advertisements
  1. Mighty Sabo
    January 9, 2014 at 7:38 pm

    Sabo was here…

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: