How to make firefox mobile detect search engine?

Question

I've writen a simple webpage that have a search box. I'd like Firefox be able to auto detect it and give user the option to add it as a search engine. I've added the OpenSearch file. Firefox desktop version can detect it successfully. Howerver, when using Firefox Android and long press the search box, it doesn't show the menu to add it as a search engine.

Here is the OpenSearch file:

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <ShortName>Bin Search</ShortName>
  <Description>A search engine that you can customize</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <!--
  <Image width="16" height="16" type="image/x-icon">https://example.com/favicon.ico</Image>
  -->
  <Url type="text/html" template="https://search.binwang.me">
    <Param name="q" value="{searchTerms}"/>
  </Url>
    <!--
  <Url type="application/x-suggestions+json" template="[suggestionURL]"/>
    -->
</OpenSearchDescription>

And I also added these code into the HTML file:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <link rel="search" type="application/opensearchdescription+xml"
      title="Bin Search" href="/search-plugin.xml">

Is there any other things I need to do?

score 0 · Answer 1 · answered Mar 15 '19 at 23:20

If you're using Firefox Focus on Android you have to go into the menu>settings>Search>Search Engine.

Regular Firefox for Android should pickup your OpenSearch XML and allow you to "Add Search Engine"

Perhaps post your XML also? Or your site URL so we can have a look here?

score 0 · Answer 2 · answered Mar 15 '19 at 23:24

It turns out I need to put the input field in a form element, too.

Here is the previous code:

<div>
  <input type="search" name="q">
</div>

Change it to something like this makes it work:

<form action="/" method="GET>
  <input type="search" name="q">
</form>

Firefox will submit this form when using this search engine. For example, if you query "abc", it will request "GET /?q=abc". Change the form action and input name could change the request behavior.

How to make firefox mobile detect search engine?

2 Answers2