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, npmjs.org, 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
HTTPurl - 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="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Search My Site</ShortName>
<Description>Search My Site</Description>
<Url type="text/html" method="get" template="http://my_site/{searchTerms}"/>
</OpenSearchDescription>
And then link to it in your html file like so:
<head>
<link type="application/opensearchdescription+xml" rel="search" href="url_of_osdd_file"/>
</head>
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)
Why did chrome have more features when firefox has good developer tools 😭
It works on firefox too, just need to add it manually