DEV Community


Posted on

Let's add tab to search to our website!

You may have used it on a chromium based browser – type out the link of a website, and hit tab to search the site. Works for GitHub, DEV, StackOverflow, Google, Twitter,, etc. In this post, I am going to show you how to implement tab to search for your own site.

1. Method one: Create a form, and *hope* that chromium picks up on it and uses it.

Yes. You can literally create a form (with a few restrictions) and if you are lucky Chromium will recognize it and use it.

The (main) restrictions:

  • The form must generate a GET
  • The form must result in an HTTP url
  • The form must not have an onsubmit script(!)
  • There must be only one input element with type text.
  • No passwords, files or text areas.
  • All other input elements must be in their default state.

OK, not the best way.

2. Method two: Link to an OSDD

Just create an xml file called osdd.xml (or whatever) and put the following code in it:

<?xml version="1.0"?>
<OpenSearchDescription xmlns="">
    <ShortName>Search My Site</ShortName>
    <Description>Search My Site</Description>
    <Url type="text/html" method="get" template="http://my_site/{searchTerms}"/>
Enter fullscreen mode Exit fullscreen mode

And then link to it in your html file like so:

    <link type="application/opensearchdescription+xml" rel="search" href="url_of_osdd_file"/>
Enter fullscreen mode Exit fullscreen mode

And you are good to go!

You can test mine here. Or if you don't want to, just see the gif below:


There's more info on this here. Thanks for reading!

Top comments (2)

posandu profile image

Why did chrome have more features when firefox has good developer tools 😭

siddharthshyniben profile image

It works on firefox too, just need to add it manually