Integrating OpenSearch

Have you ever noticed that when you visit chrome://settings/searchEngines in your browser, you’ll often see a list of “Other search engines” that are just a list of various websites you’ve visited? Ever wonder how they get added?

There’s even a chrome extension to block them from getting added in the first place! But what exactly do they do, and why do people hate them?

OpenSearch is a standard that allows a website to tell your browser how to search for content within that site. Let’s take Github for example. We see the keyword is github.com . This means that to activate Github’s internal search (as opposed to searching on google for Github), you simply type github.com in Chrome followed by TAB.

Even typing a substring of the keyword will show the “Press TAB” prompt in Chrome

Upon pressing TAB, Chrome uses Github’s internal search instead of Google

In the case of Jumpy, which is a keyword-based bookmarking solution, I wanted to search the entire web with keywords, once the user chose to activate Jumpy. To make this as easy as possible, I simply had to integrate OpenSearch on Jumpy’s website.

As soon as a user visited Jumpy even once, Chrome already added Jumpy as a custom search engine. From that point on, any new Jumpys they created would be easily accessible — no custom installation steps required!

So how do we integrate it?

1. Include a link to an XML file hosting the OpenSearch details in your HTML

<!-- Open search -->
<link rel="search"
    type="application/opensearchdescription+xml"
    title="Jumpy"
    href="opensearch.xml" />

2. Create an OpenSearch-compatible XML file

Note the lack of the traditional <?xml version="1.0" encoding="utf-8"> header, as it’s not compatible with Firefox.

By default, OpenSearch will set the keyword to the website name — in my case, jumpy.dev . There’s no way to change this without having the user manually alter the keyword, so I had to provide separate instructions to replace the domain with the simpler option of j.

<OpenSearchDescription
    xmlns="http://a9.com/-/spec/opensearch/1.1/"
    xmlns:moz="http://www.mozilla.org/2006/browser/search/">
    <ShortName>Jumpy</ShortName>
    <Description>
        Jumpy easily searches your favorite links 
    </Description>
    <Url type="text/html"
        method="get"
        template="https://jumpy.dev/get/{searchTerms}"/>
    <moz:SearchForm>https://jumpy.dev/search</moz:SearchForm>
</OpenSearchDescription>