There used to be this thing called OpenSearch that would provide some level of UX in browsers for searching individual sites. You had to bring-your-own search functionality, this was just getting users to it. I say “used to be” a thing because it seems like it’s been neutered out of being useful anymore.
The way it worked was to link up an XML file:
<link
rel="search"
type="application/opensearchdescription+xml"
href="/opensearch.xml"
title="My Website Search">Code language: HTML, XML (xml)Here’s the XML file I put on css-tricks.com a million years ago:
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>CSS-Tricks</ShortName>
<LongName>CSS-Tricks Search</LongName>
<Description>Search through articles posted on CSS-Tricks</Description>
<InputEncoding>UTF-8</InputEncoding>
<OutputEncoding>UTF-8</OutputEncoding>
<AdultContent>false</AdultContent>
<Language>en-us</Language>
<Developer>Chris Coyier</Developer>
<Contact>chriscoyier@gmail.com</Contact>
<Tags>css html jquery javascript web design</Tags>
<Attribution>Search data from CSS-Tricks http://css-tricks.com</Attribution>
<SyndicationRight>open</SyndicationRight>
<Query role="example" searchTerms="Flexbox"/>
<Image height="16" width="16" type="image/vnd.microsoft.icon">http://css-tricks.com/favicon.ico</Image>
<Image height="64" width="64" type="image/png">https://css-tricks.com/apple-touch-icon.png</Image>
<Url type="text/html" template="https://css-tricks.com/?s={searchTerms}"/>
</OpenSearchDescription>Code language: HTML, XML (xml)The main thing was that second to last line with the https://css-tricks.com/?s={searchTerms} part of it. It would pluck up the search terms and get them to this URL format.
Here’s the kicker: I don’t really remember how browsers used to let you know if a website had one of these in place or how it felt to use it. I feel like it would let you know somehow, but can’t remember how. I think it was somewhat hidden, yet discoverable. For example, you’d type css-tricks.com SPACE then keywords, and it would detect that you’re probably trying to search that site and use the OpenSearch integration to get you there.
You can feel the ghost of that with Chrome’s custom search engines. (It was intentially neutered). They aren’t detected, you have to manually add them:
If I put that in place manually, then type “chriscoyier.net” in the search bar, SPACE, then some keywords, the UI changes to offer using that custom search engine:
Firefox won’t let you add a custom search engine. They have Search Extensions, but you can’t add one that is just OpenSearch based anymore.
I don’t remember if Safari ever supported it really, but I can’t seem to make it work at all anymore. There is a setting for Enable Quick Website Search, which I have on, and css-tricks.com is in there, but if I type that in the URL bar and hit tab, it just tabs away, and if I hit space after, it just performs a normal search to a search engine. The (?) help button on that page brings up an error page so I’m gonna say that’s just broken.
Feel free to prove I’m wrong, but OpenSearch seems dead.
But in Chrome-land (and thus Arc too), adding custom search engines can be pretty useful still. You just don’t need any fancy files or anything to do it, you just do it for yourself.
Jim did up a post on this: Site Search in Arc Browser — For Your Own Site
The beauty of that is that you don’t even need your own custom search setup on your site, you can still use Google (or whatever) and scope the search results to that site. But do it with a really fast shortcut. The trick there is to leverage the fact that you can do site:website.com + the search terms to scope the search results, so here’s a quicky for MDN:
Now I hit mdn + TAB, and it activates that special search re-direct. It’s pretty cool looking in Arc:
This is how I remember open search working on Firefox https://blog.mozilla.org/theden/2012/06/11/firefox-tip-add-search-engines-to-the-search-bar/
On Firefox:
When you have the toolbar set up with separate address and search bars (which used to be the default since the first version), a small bright badge appears in the search bar for any website that presents an OpenSearch. Clicking it enables you to add this website as search option. If you don’t have the separate search bar, no badge is shown, but you can still click on the address bar and choose to add the website at the bottom.
Also on Firefox:
Right-clicking on any search field on any website shows the option “Add a keyword for this search”. You can then choose a keyword and use it as a shortcut to search directly the website from your address bar (like the “mdn” example above, but without pressing Tab, just “mdn what i’m looking for” + Enter).
Hi Chris:
Opensearch seems to work for me in Firefox. For example, if I go to https://css-tricks.com, I see a little
white ‘+ in a green circle overlaid on the magnifying glass icon in my search input field.
When I click the magnifying glass/plus, I see an option to add the search engine “CSS-Tricks Search”.
I click on the icon to add the search engine.
If I put “passkeys” in the search box and choose my new “CSS-Tricks Search” icon, it takes me to:
https://css-tricks.com/?s=passkeys
just as you described. Note you have to have a search input box. I did it long enough ago in the UI that
I don’t remember if I had to enable that specifically.
This is described at: https://developer.mozilla.org/en-US/docs/Web/OpenSearch