Lifehacker search plugin for Firefox 2

Just like most of those in the know, Firefox 2 and Internet Explorer 7 are both now installed on my computer.

A great new feature in IE7 is the built-in search box, unsettingly similar to the familiar box Firefox has had for some time. One of the favourites sites on my blogroll, Lifehacker, blogged about creating a custom search plugin using Google’s site search feature a few weeks ago. I didn’t think much of it at the time, because I prefer using Lifehacker’s native search rather than Google.

If you’ve added any extra search plugins to IE7, you may have noticed the feature they provide for creating your own search plugin from any site with a search feature. I experimented with Lifehacker and some other sites, and it seemed like a pretty cool feature. So I went looking for how I could do the same thing in Firefox 2. I discovered that FF2 and IE7 both support the OpenSearch description format for search plugins. Web standards are great when the two most popular browsers choose to support them!

Get the Lifehacker search plugin

Lifehacker search bar

There is a new repository of OpenSearch browser plugins building up at searchplugins.net.

I have added a Lifehacker search plugin to the database. Visit this page in either FF2 or IE7 and click on the I to the left of the first Lifehacker entry. To make sure it’s the right one, hover your mouse over the S link and check that there is an 862 in the link in the status bar – only this plugin will correctly install the LH icon with your plugin.

Plugin List - Search results

While you’re there click on the R next to the second Lifehacker entry (number 515 on S link).

If you want to know how I created the plugin, and how you can create a plugin for any search engine you like, then keep reading …

Creating your own search plugin

If you want to share your plugin with the world, you can use the generator at searchplugins.net. Follow the instructions provided. The Icon field behaves unpredictably – you’re more likely to have success if you follow my instructions below and upload the icon yourself. Click install when its done and you’ll have your plugin.

NOTE: This section is for those who want to delve into XML and learn how to create a search plugin for themselves. Skip to next section.

The Firefox developers have provided documentation for creating search plugins, but all that information can be a bit overwhelming. So I’ll show you how I created my search plugin for Lifehacker that works in Firefox 2 (for IE7 just follow this two-step guide).

Open up a text editor (Notepad will do the job) and copy and paste the following code.

<?xml version="1.0" encoding="UTF-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
xmlns:moz="http://www.mozilla.org/2006/browser/search/">
	<ShortName>Lifehacker</ShortName>
	<Description>Search Lifehacker</Description>
	<InputEncoding>UTF-8</InputEncoding>
	<Image width="16" height="16">imageData</Image>
	<Url type="text/html" method="GET"
template="http://www.lifehacker.com/search/{searchTerms}"/>
	<moz:SearchForm>http://www.lifehacker.com/</moz:SearchForm>
</OpenSearchDescription>

Save the file with a descriptive name and a .xml extension (e.g. lifehacker.xml) in your searchplugins folder.

If you want everyone who uses your computer to have the new plugin, save it in C:\Program Files\Mozilla Firefox\searchplugins\ (or wherever you have Firefox installed). If you only want the plugin installed in your profile, save it in C:\Documents and Settings\%username%\Application Data\Mozilla\Firefox\Profiles\%yourprofile%\searchplugins\

What does all that code mean?

Read on for the line by line break down:

<ShortName>Lifehacker</ShortName>
Replace Lifehacker with the name of your search engine, this is what you’ll see in the search box in your browser.

<Description>Search Lifehacker</Description>
Replace Search Lifehacker with a similar description.

<InputEncoding>UTF-8</InputEncoding>
Leave this as UTF-8. If you later find that the plugin doesn’t work, you can find the official list of character encodings here.

<Image width="16" height="16">imageData</Image>
We’ll come back to this in a moment …

="http://www.lifehacker.com/search/{searchTerms}"
Go to your search engine, and search for TEST. Copy the resulting URL. Paste it here in replacement of the template URL. Then replace TEST with {searchTerms}.

<moz:SearchForm>http://www.lifehacker.com/</moz:SearchForm>
Replace the URL here with the URL of your search engine.

Adding an icon

The line we skipped above with the <Image></Image> tag contained the cryptic looking imageData. This is where we can specify the icon for our search plugin. The best idea would be to just link directly to the website favicon (the icon you see in your browser address bar) wouldn’t it? Well it seems that Firefox doesn’t like that idea very much. But the first step is to get hold of that favicon.

Favicons are often stored in the root folder of a website, so first I tried typing http://www.lifehacker.com/favicon.ico into my browser. But that didn’t work. EDIT: I have since found that it does work now, so I must have had a connection problem with the server before. Next option is to look at the page source (press CTRL+U in FF) to find out where the icon’s coming from. Search (CTRL+F) the page source for favicon. That should turn up a link near the top of the page, in the header section of the HTML. In this case, I found
http://cache.lifehacker.com/assets/www.lifehacker.com/img/favicon.ico. Copy and paste the link into the browser, and a beautiful Lifehacker icon appears, just like this:

Lifehacker icon in browser

Now, that icon is in the ICO format, and it takes up a whopping 10 KB. Right-click on the icon and choose Copy Image. Fire up Microsoft Paint and press CTRL+V. Go to the Image>Attributes menu and check that the dimensions are 16×16 pixels. If not, change it.

MS Paint Image menu

MS Paint attributes

Then save the image as a PNG file on your desktop. Now its less than 1 KB, only a fraction of the size of the ICO file and looks just as good.

NOTE: If you’re using the generator at searchplugins.net, stop here and upload the file .PNG file from your desktop. Jump back.

Firefox likes a base-64 encoded 16×16 icon. That means we’re going to encode the icon inside our XML file. This site will do that nicely: The data: URI kitchen. Tick the base64 check box near the top of the page. Then click on Browse to upload the PNG file from your desktop. Click Generate, and then click on the link you’re provided with on an otherwise empty page (ignore any errors). If all goes well, your icon will appear in the browser window. Copy the URL (F6, CTRL+C) – it’s very long – from the address bar, and paste it into the XML file in place of imageData.

That’s it! Save and close your XML file, and then restart Firefox. Voilà! You have a new, custom search plugin.

Using your search plugin

  • You can reorder your list of search engines by clicking on Manage Search Engines in the drop-down list.
  • Keyboard shortcuts. Press CTRL+K to focus (place the cursor in) the search box, and then use CTRL with the UP and DOWN keys to change search engine (the icons will change).
Advertisements

9 Responses to “Lifehacker search plugin for Firefox 2”

  1. webmasterbyname Says:

    […] Webmaster by name not by experience (that’s where the church website comes in) « Lifehacker search plugin for Firefox 2 […]

  2. Guillermo Says:

    Help me please…
    I just installed Firefox 2.0, and all of a sudden, my username/password isn't being inserted in the signon window (it always was before). I tried the usual suspects–I did not mistakenly tell FF not to remember the password for this site; and I also tried the remember password bookmarklet, but all to no avail–FF will not ask me to remember this password. What do I need to do to get around this?

  3. Joaquin Says:

    What I want to do on my blog, is every few hours take the oldest post and move it to the
    front of the queue, all automatically. Anyone know if there is a plugin that can do this or
    a simple way to set up another plugin to do this (use my own feed perhaps)?
    Thanks.

  4. Bixarro Says:

    Hi

    I’m trying to create a search plugin for Google Desktop, buto it simply doesn’t work. Would it be a restriction on G Desktop, or would I be mistaking? I’ve followed all the recomendations given here, but don’t get it to work.

    Thanks.

  5. Riyaz Mohammed Says:

    Hi,

    I think this site takes all our headaches in plugin creation

    http://keijisaito.info/ready2search/e/

    Thanks

  6. Morten Says:

    Thanks for the tutorial!

    About keyboard shortcuts I can also recommend doing it like..

    Hit Ctrl+K
    Hit Alt+”Down Arrow”

    Then the list will appear.

    From here you select by hitting the first letter in the name of the desired search plugin.

    In case there exist more than one with the same first letter:
    You repeat hitting that key or use the up and down arrow keys. And finally hit Enter to confirm or esc to cancel.

  7. Leo Says:

    I feel very dumb… Can’t seem to get this site:
    http://lakenet.llcoop.org/
    working using the above code.

    Any ideas?

  8. Eigene Suchmaschine in Firefox Says:

    […] Ausführliche Anleitung für die eigene Suchmaschine (englisch)  […]

  9. Toolbe Webmaster Seo Search Engine Says:

    thank you very much for sharing this plugin, was searching for it a long time.

    greetings,
    mark

Leave a Reply

Please log in using one of these methods to post your comment:

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: