“citeThis”: Building a Javascript Bookmarklet that Creates Citations for Sharing Web Pages - Code Words

By Jason Clark |

Welcome back to “Code Words.” In this column, we are going to look at bookmarklets - little snippets of Javascript that extend your web browser to do interesting and useful actions. Bookmarklets range from allowing you to "pin" a current page to Pinterest without visiting the site directly (http://pinterest.com/about/goodies/) to tricking out your browser's text renderer so that all of your web pages appear in "Piratespeak" (http://www.blippitt.com/talk-like-a-pirate-day-widget-try-this/). We are going to build a citation bookmarklet that parses page information and formats it into a ready-made citation for pasting into docs, your research, or an email.

The idea of "plugins" or "extensions" for software has been a common practice embedded in software development methods for quite some time. It is the same logic that developers use in creating software that is extensible and modifiable by other developers. Usually this work is accomplished using application programming interfaces (APIs). Our focus here will be on browser plugins that tap into the open architecture of modern browsers to rework the browser chrome and viewport. In most settings, these "add-ons" create new functionality that your browser can't do on its own. Our "citeThis" bookmarklet uses current information in the markup of a web page - <meta> tags, <title> tags, and file timestamps -  to create a citation maker. Good extensions follow this model in building on data that already exists and bringing it to light in new and interesting ways. Here's a screenshot of the "citeThis" bookmarklet in action.

citethis-dlib-example-small.jpg

[figure 1: citeThis creating citation on Dlib journal article]

At their core, bookmarklets are nothing more than small, compressed Javascripts. The script is usually wrapped in a generic function. Our example begins with:

javascript: function() {

// your code here

}();

Next, our script needs to declare some initial variables and create a place for all of our extracted data to live. 

var h = document.createElement('div');

With an element container created the script no turns to pulling data from the HTML page that we will use to create our display of meta information and citation information for the web page. We use the expression "document.getElementsByTagName" to move through the HTML document and find, then store, data values in specific variables.

var t = document.getElementsByTagName('title')[0]; 

For example, the above line is declaring “t” as the variable where we will store the data that the <title> HTML tag holds. We follow a similar routine later in assigning an "m" variable for the <meta> tag. With our two primary sources of info identified - the  <title> and <meta> tags - we need to create HTML markup that will appear within our earlier <div> container element.

var info = '<p><strong>Title(' + t.innerHTML.length + '):</strong> ' + t.innerHTML + '</p>'; 

The "info" variable is where all of our newly created HTML will live. Next we'll create a “for loop” that will move through all the <meta> tag elements on the page and add them to the markup within the "info" variable.

for (var i = 0; i < m.length; i++) {

    if (null !== m[i].getAttribute('name')) {

      var c = m[i].getAttribute('content');

      info += '<p><strong>' + m[i].getAttribute('name') + '(' + c.length + '):</strong> ' + c + '</p>';

    }

}

And with those steps in place, we have parsed the values of our identified HTML tags and created the HTML that will display in the first part of our bookmarklet. Our final move is to build the citation that will appear in our bookmarklet overlay <div> on the top of the page when the bookmarklet is fired. We start by declaring and assigning some common values that citations hold - last modified dates of the file, the url for the page, and current data information.

var lm = document.lastModified;

var url = location.href;

var d = new Date();

var dd = d.getDate();

var mm = d.getMonth()+1;

var yyyy = d.getFullYear();

With these values in place, we can start to add them into our "info" variable with our previous HTML markup.

info += '<p><strong>Citation: </strong>"' + t.innerHTML + '." Last modified ' + lm + '. ' + url + ' (accessed ' + mm + '/' + dd + '/' + yyyy + ').</p>';

Notice how we are continuing to add new HTML and data into our "info" variable using the "info +=" concatenation expression. We can continue to do this until we have pushed all of the new data into our early created <div>. Next we need to place that <div> with all of the new information into the flow of the current HTML document (the live web page).

document.body.insertBefore(h, document.body.firstChild);

The above expression goes to the current HTML page, finds the <body> tag, and gets ready to inserts all of the citation and metadata we have gathered during the course of the script. Finally, we turn to inserting the new data into the current web page.

h.innerHTML = '<div style="border:1px solid #888;border-radius:5px;-moz-box-shadow:0 0 5px #888;-webkit-box-shadow:0 0 5px#888;box-shadow:0 0 5px #888;background:#eee;text-align:left;padding:1em;"><a href="#" onclick="document.body.removeChild(document.body.firstChild);return false">remove</a>' + info + '</div>';

By adding ".innerHTML" to the "h" variable we are providing the final markup and display styles that create the overlay <div> which appears at the top of the page when someone runs our bookmarklet. (innerHTML is a Javascript function that injects HTML markup into specified parts of the active document.) Some inline CSS styles are also declared to provide our look and feel for the overlay. Note how our "info" variable is printed out inside the <div>.

' + info + '</div>'

All the previous work and stored data is carried forward and printed out using that "info" variable. And with that, the work of our "citeThis" bookmarklet script is complete. As a final step, You will want to "package" the Javascript by running it through one of the bookmarklet utilities below. These utilities will compress and encode the script so that it can run efficiently as a bookmarklet. Drop the uncompressed code in the "Bookmarklet Builder" (http://subsimple.com/bookmarklets/jsbuilder.htm) to see this in action.

Getting started with bookmarklets is easier than you might think. Useful tools for creating and troubleshooting bookmarklets are listed below. And if you get stuck, take a closer look at the links below that show how some other librarians have been developing bookmarklets. 

Resources for getting started with Bookmarklets

Libraries and Librarians building Bookmarklets