Building Multi Search as Add-on using WebExtension API

March 15, 2017

Before reading this post setup your Firefox so you can run WebExtensions in your browser.

We call the Address bar as Omnibox in chrome. In this API we will discussing on building our Quick Search with an help of Add-on. Here when the user starts typing we will check whether our desired pattern is matched and we will process. Here we will be having two stages, once the pattern is given our extension will wait for next keyword for our pre defined search engine and then search query. Example is below.

ms g hello world

Explanation

In this about ‘ms g hello world’, ms is our predefined keyword which our addon will be checking whether use is typing this keyword so we can capture the event, then g is the predefined searchengine keyword for Google in our add-on and ‘hello world’ is our query string. So once the user hits the enter we will be searching at the google for hello world.

Stages of Add-on

Define the key word which has to be captured.

First we have to say in the manifest.json which keyword has to captured by the addons when user types in omnibox, in our case we have mention the keyword as ms

 "omnibox": { 
"keyword" : "ms" 
}

Remember if two add-ons used same keyword then the latest one will be doing all the actions.

Defining the actions and Functions

We have one Function which can be defined to set Default Suggestion.

browser.omnibox.setDefaultSuggestion({
 		description: 'Default Description here'
 	});

we have four different actions which can be captured

  • browser.omnibox.onInputStarted
  • browser.omnibox.onInputChanged
  • browser.omnibox.onInputCancelled
  • browser.omnibox.onInputEntered

We can add suggestion as the user enters, here as the user types, we will be changing the omnibox suggestion to “Default Description here”+text_entered

browser.omnibox.onInputChanged.addListener(function(text, suggest) {
    browser.omnibox.SuggestResult({'description': text});
});

In our example we have captured only two events onInputChanged and onInputEntered.

So whenever an user types i will be changing the search suggestion. Then when the user final finishes entering (onInputEntered), I will be startin the processing.

browser.omnibox.onInputEntered.addListener(function(text) {
  navigate(text);
});

Here in text we will be getting the pharse exluding the keyword, in our case we will get “g Hello world”, as I pre-defined g as Google Search I will start searching in the Google in the current tab.

One of the Problem which I am not able to solve is if user types like “ms ttt 5t”, in my pre-defined list we ttt is not predefined to any Search engine, so going to Error page and dynamically adding/modifying new search engine keywords and URL.

Checkout the code in github and share your thoughts.

Read Other Related Posts about : Mozilla

  • MozillaTN SNSCT WebExtension Workshop
  • Creating ShortenURL Maker Addon
  • Creating Simple Easy Searcher Using ContextMenu
  • Comments

    comments powered by Disqus