Creating Simple Easy Searcher Using ContextMenu

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

Post about Getting Started with WebExtension. Just read it before starting, so you can config your browser accordingly.
Post about Running the WebExtension in Firefox.

In this blog we will be exploring more about how to create a simple context menu (which will be displayed when we do right click on text). Here we will be displaying various search engine and once we select anyone from the list we will be creating a new tab with the search url.

Context Menu for Search

The first step is to create a context menu items. We have to mention the context menu id, then we have to give the title (the text which has to be shown in the context menu list) and then the contexts (whether the context Menu should come for everything, or only image or when we do selection. The sample one is

browser.contextMenus.create({
  id: "google",
  title: "Google",
  contexts: ["selection"]
});

Step 2 : Add a listener

The next step is to add a listener (an action method when any one of the menu item is clicked). This method will be receiving two paramerters as input, one is context Menu info and another is tab Object.

browser.contextMenus.onClicked.addListener(contextMenuAction);

Step 3 : Create a URL and new tab

Then based on the list item we clicked we will get the info object, in that we will required these two menuItemId and selectionText . In this menuItemId is the id which we gave to create the menu item and selectionText is the text which we will select and right click before selecting the menu item.

Then based on the menuItemId we will be knowing the search engine which we want to search and the selectionText will be used as query text.

For the Extension to run we need two permission which has to be mentioned in our manifest.json

"permissions" : [
        "contextMenus"
        ],

Checkout the code in github and share your thoughts.

Creating Simple Easy Searcher Using ContextMenu

Step 1 : Creating context menu item

Step 2 : Add a listener

Step 3 : Create a URL and new tab