Posts Tagged ‘Firefox’

Step by Step : Create a Firefox Search Plugin for Your MediaWiki

Friday, May 16th, 2008 by Ian Homer

Firefox searching mediawiki with suggestionsI just discovered the benefits of creating custom Firefox search plugins the other day, having hooked up a Firefox search plugin for our internal MediaWiki which I shared with my colleagues. The search plugin integrates with the MediaWiki apis which can be used to provide suggestions. This suggestion functionality is pretty neat, since it allows you to quickly scan what pages are available on your wiki (without hitting the search button) and then select what you’re looking to go directly to your chosen page. A quick click-to-install link can also be provided for your team. Follow the steps below to find out how.



  1. Create a base-64 encoded 16×16 pixel image to appear next to the search engine input box so it’s always clear which search engine you’re searching. You can use an online utility such as Antonin Foller’s
  2. Create an OpenSearch description XML file and include your base-64 encoded image, e.g.
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>my wiki</ShortName>
  <Description>my wiki</Description>
  <Image width="16" height="16">data:image/x-icon;base64,
    (put your base 64 encoded image here)
  </Image>
  <Developer>Ian Homer for bemoko</Developer>
  <InputEncoding>UTF-8</InputEncoding>
  <Url type="text/html" method="get"
    template="http://wiki/index.php?title=Special:Search&amp;search={searchTerms}"/>
  <Url type="application/x-suggestions+json"
    template="http://wiki/api.php?action=opensearch&amp;search={searchTerms}"/>
  <moz:SearchForm>http://wiki</moz:SearchForm>
  <moz:UpdateInterval>8</moz:UpdateInterval>
</OpenSearchDescription>

where http://wiki is the base URL to your media wiki installation.

  1. Host this description XML file on a server of your chosing.
  2. Create and host an HTML page that links to the absolute URL of your hosted description XML file. The link must use the AddSearchProvider JavaScript API as demonstrated below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <title>search engine loader</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
      function addEngine(engineURL) {
        if (window.external && ("AddSearchProvider" in window.external)) {
          window.external.AddSearchProvider(engineURL);
          return false;
        } else {
          alert(error_opensearch_unsupported);
          return true;
        }
      }
     </script>
  </head>
  <body>
    <div id="wrapper">
       <a onclick="return addEngine('http://host/searchmywiki.xml')">
         install my wiki search engine plugin
       </a>
    </div>
  <body>
</html>
  1. Open this HTML file in Firefox and click on the link to install the plugin … and of course circulate the URL to this HTML page with your colleagues so they can do the same.

… now even less excuses for people to say that they “can’t find it on the wiki”.


bemoko’s mobile web is proudly powered by WordPress
Entries (RSS) and Comments (RSS).