Ubiquity was big news last week, the new Firefox feature which opened a whole new world of possibilities for what can be done in the browser. As usual, I'm not going to take your time explaining what it is, so if you want to know more about it, check Ubiquity's homepage.
While I was reading some blogs of the portuguese aggregator Prt. Sc. my attention was caught by a post by Rui Moura, which had created an Ubiquity script that could give a definition of a portuguese word based on the portuguese only Priberam's dictionary. This was kind of nice, because it was something a lot of us use, not only as a definition system but also as a word corrector (if a word is miswritten a definition won't appear).
Anyway, the plugin required that you typed Return to view the definition of a word, and by that time you would be redirected to the default Priberam's homepage. I thought this was useless, since you can do exactly the same with the Live Search Box of Firefox, which is, getting some site's search box in Firefox and being able to search from there, but always being redirected to the host site to view the result.
I thought this was not the kind of behavior Mozilla wanted us to adopt in Ubiquity, so I tried to create a new plugin that would give the definition on the fly. If you don't care about how it was done, just follow the link to install it.
How was it made, though? Well, fist off, I'm not some kind of pro in Javascript, so I'll try to explain the best I can the code used.
CmdUtils.CreateCommand({
makeSearchCommand({
name: "dic",
url: "http://priberam.pt/dlpo/definir_resultados.aspx?pal={QUERY}",
takes: {"palavra": noun_arb_text}, author: "Miguel Pais www.miguelpais.com",
author: "Miguel Pais www.miguelpais.com, special thanks to Sofia Cabrita @ http://pencilcode.com/",
icon: "http://www.priberam.pt/favicon.ico",
description: "Define a palavra dada segundo o dicionário da Priberam",
preview: function(pblock, directObject) {
var searchTerm = directObject.text;
var pTemplate = "Procurando a definição de <b>${query}</b>";
var pData = {query: searchTerm};
pblock.innerHTML = CmdUtils.renderTemplate(pTemplate, pData);
var url = "http://miguelpais.com/ubiquity/priberam/" + searchTerm;
jQuery.get( url, function(data) {
pblock.innerHTML = data;
});
},
execute: function( directObj ) {
var word = directObj.text;
Utils.openUrlInBrowser( "http://priberam.pt/dlpo/definir_resultados.aspx?pal=" + escape(word) );
}
});
EDIT: Green means changes that occured in code strikethrough. This script had a change due to a post by Sofia Cardita in which she presented her version of this plugin which did some things better than this one, mainly in the escaping of characters, so I updated the code. The rest of the post will remain equal to its original version.
Let's see.
makeSearchCommand({
Is what defines a new command, while I was reading Ubiquity's developer guide I noticed there were other ways you can achieve this, so you may want to check it.
name: "dic",
url: "http://priberam.pt/dlpo/definir_resultados.aspx?pal={QUERY}",
author: "Miguel Pais www.miguelpais.com",
icon: "http://www.priberam.pt/favicon.ico",
description: "Define a palavra dada segundo o dicionário da Priberam",
These lines are quite trivial. First defines the name the command will use, which you might want to change, the second defines where we'll get redirected to when Return is pressed.
This was what Rui Moura's script did. But we want to define what preview shows, so we have to create a function to preview.
preview: function(pblock, directObject) {var searchTerm = directObject.text;
var pTemplate = "Procurando a definição de <b>${query}</b>";
var pData = {query: searchTerm};
pblock.innerHTML = CmdUtils.renderTemplate(pTemplate, pData);
This is what defines what is showed as a preview while we're typing an word. Everytime we change pblock we're changing what is being previewed, so we render a template for it saying we're searching for some word and then showing the word itself.
But we have to get the result from Piberam's dictionary. As the website doesn't have an API I had to create one in ruby, stored in www.ubiquity.miguelpais.com/get/word/. This link receives a word parameter and returns a page with the definition parsed from Priberam, for example, www.ubiquity.miguelpais.com/get/word/some.
So in Ubiquity I just had to do:
var url = "http://miguelpais.com/ubiquity/priberam/" + searchTerm;
jQuery.get( url, function(data) {
pblock.innerHTML = data;
});
}
});
Which passes the word typed to the url, gets that url and changes pblock to the data retrieved.
And that's all. Now you might ask how's the /get/word script done. That was just a couple of lines of ruby using Hpricot for parsing the webpage and getting the desired elements. If someone is interested, I don't bother showing the source code.
I hope you like it and use it.