Add your own search engine (OpenSearch) via a Chrome extension

Hello there,
This week's article comes from an observation I made recently. Before, in Chrome, when you visited a site that offered OpenSearch, it automatically added it to the browser's search engines, so all you had to do was type "a keyword" + space and start searching directly from the browser's omnibox.

This browser behavior has recently changed (perhaps for the better, as it prevents anything and everything from being added to the browser).
Now, in Chromium (and therefore Chrome and other browsers based on it), you have to go to the settings to manually activate a search engine. For someone used to computers, this is simple, but for someone who isn't, it can be complicated.

The aim of this article is to create a Chrome extension which, once installed, "adds" the search engine to the browser omnibox, so that users simply have to install the extension to access the search engine from their browsers.

What is OpenSearch?

OnpenSearch (for browsers) is a "standard" that enables web browsers to discover the search engines offered by different sites.

To show browsers that a search engine is available, you need to add a line in the "head" of HTML pages:

Example of an "opensearch" tag

As you can see, this tag calls the file to a "/search.xml" file, which you can call something else if you wish.

Here's an example of what the XML file contains:

Example of a search.xml file for OpenSearch

Nothing too complicated, just define a keyword, a name, the URL of the search page and a URL for auto-completion.
To see the format your autocomplete URL should return, just look here- yes, it's a simple JSON.

This will have the effect, for example in Firefox, of proposing the addition of a new search engine in the address and search bar when you visit the site.

Adding a search engine in Firefox with OpenSearch.

You can see on this screenshot the little logo of my site with a small + in green. By clicking on it, you'll add the search engine to your browser.

Creating the extension

This is done in two parts: the manifest file, to tell the browser what permissions we need, and the background.js file, which contains the extension's simple code.

The manifest

The manifest is a simple JSON file:

A Chrome extension manifest file.

Here, we see that I'm requesting the "activeTab" permission and using the keyword "ludo" to trigger the extension in Chrome's search bar.
The "activeTab" permission lets me know if we're in a new tab or not, and also lets me know if the current tab is my site, to prevent a new tab from being reopened on the site.

The code (here background.js)

Now for the code - don't worry, it's not too difficult!

Code using the "omnibox" webextensions API (Chrome).

Here you can see that I'm using three APIs: action, tabs and omnibox:

• Action: simply allows me to do something when the user clicks on the little extension button in his extension bar, here I open the site's search page, if it's not already the current page.
• Tabs: lets me know if the current page is my site, or if we're in a new tab with "chrome://newtab/".
• Omnibox: This is where it all really happens, managing Omnibox entries, including autocompletion (which is done with a fetch to the URL that returns OpenSearch autocompletions). As well as launching the search when you press enter (simply open the search page with the right parameters.

Conclusion

So that's it, all that's left to do is to publish this extension on the browser "store" to distribute it. I wouldn't do that, as it wouldn't be of much use - I've done it mainly for my own use...
That's all for this article, see you next time?