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.


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"
"content_security_policy": "script-src 'self' https://apis.google.com https://ajax.googleapis.com https://ssl.google-analytics.com; object-src 'self'"

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 …

<table style="border-spacing: 0px; width: 80%;">
<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 style="margin: 0px; padding: 0px; background-color: RoyalBlue;" align="center">
<input type="image" src="search.png" alt="Search" />

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) {
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.

  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: