So here’s a neat trick:

That’s the firefox address bar! And I’m playing a full game of Wordle in it! What’s going on?

Site-specific search via OpenSearch

OpenSearch 1 is a spec from the mid-2000s that describes ways to communicate about search endpoints and search results. Among other things it describes:

1. A standard way for a website to describe how to search that website
2. A standard way for a website to advertise its search functionality to the browser
3. An extension that allows a website to suggest searches when a user is already searching the website from the browser.

This trick relies on 1, 2, and 3. I couldn’t get 3 working in Chrome so as of now this trick only works in Firefox. Give me a shout if you know how to get suggestions to work in Chrome!

Describing and advertising search endpoints

OpenSearch details are communicated to the browser via a simple XML document that provides some metadata about the website that you’re searching for (particularly handy if your website wants to offer multiple custom search options - e.g. “search by title” and “search by director”), an endpoint that the browser should hit in order to perform a search (filling in {searchTerms} with whatever the user has typed) and, for the “suggestions” extension, a separate endpoint that will return search suggestions.

Here’s what my opensearch.xml document looks like 2:

<xmp>
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>Searchgame</ShortName>
  <Description>Play a game in the searchbar</Description>
  <InputEncoding>[UTF-8]</InputEncoding>
  <Url type="text/html" template="http://searchgame:5000/search?q={searchTerms}"/>
  <Url type="application/x-suggestions+json" template="http://searchgame:5000/game?q={searchTerms}"/>
  <moz:SearchForm>http://searchgame:5000/search</moz:SearchForm>
</OpenSearchDescription>
</xmp>

This document tells the browser that it can search my website by hitting searchgame:5000/search and that it can get suggestions in JSON form for the user’s current search by hitting searchgame:5000/game - in both cases setting the query parameter q to whatever the user has typed.

Opensearch also describes how to advertise these search endpoints to the browser; you just add a link element with rel="search" pointing to your XML in the head section of your website and the browser (should) automatically hit that link and learn how to search your website.

Actually convincing the browser to search your website

None of the browsers I tried (Safari, Chrome, Firefox) seemed excited to automatically add custom search engines when visiting a website. Chrome used to automatically index search engines for websites that you visited but per this Tweet that changed last year - now you have to manually activate search engines from the settings tab 3. Firefox requires that you right click the address bar when on a website to add a custom opensearch-backed search engine. And I couldn’t figure out how to get Safari to add custom search engines at all!

Additionally, Firefox is the only browser that I tested that implemented the “suggestions” extension of the Opensearch spec. I thought that Chrome did (I think I’ve used the feature before) but maybe that changed when it stopped activating search engines automatically.

Building a little game using search suggestions

Once I taught Firefox how to search my website and retrieve search suggestions from it, it was pretty straightforward to build a little game into the searchbar. Wordle seemed like a natural fit since it’s turn-based, can be played entirely via text/emoji, and is familiar enough that most readers of this blog would recognize it.

The “game” itself is a tiny flask app - you can see the code here.

What’s next?

Originally I was planning to build some more interesting games into the address bar and put the games on a public server. However, the fact that my games would be Firefox only and require manual setup makes me much less excited about that idea - I’d be much more excited if I could tell folks “yeah, just type ‘searchbar.games’ into your address bar and hit tab to start playing.”

I also found it interesting that Chrome is moving away from autodiscovery of search engine. I’m a big fan of site-specific search and so the fact that it’s getting harder is disappointing to me.

I’ve got several more goofy ideas for game input mechanisms and another 10.5 weeks at the Recurse Center - I’ll be back with something else fun soon.