Creating Simple Easy Searcher Using ContextMenu

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

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

Step 1 : Creating context menu item

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.

Advertisements

Creating ShortenURL Maker Addon

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

In this blog we will be exploring more about how to create a simple addon which will be used for Creating a shorten url. We will be discussing about sending normal HTTP GET request in our Add-on.

Step 1 : Creating Text Area and Submit button

The first step is to create a Small Text area where we can entry our URL and along with that have to created a button to submit.


 <section class="flexbox">
            
Submit
</section>

Step 2 : Add a listener

The next step is to add a listener (an action method when we click the button).
In this we will be getting the URL from the Text area.


document.getElementById("urlclick").addEventListener("click", myFunction);

So our button id is urlclick so when it is clicked the myFunction named function will be called.


document.getElementById("urltext").value

In the myFunction function we will be first getting the URL from the text area. The id of text area is urltext.

Step 3 : Send GET request

We have API from tinyurl.com where we can create the shorten URL.

The format is below


'http://tinyurl.com/api-create.php?url='+urlToShort;

We will send this URL in GET request and the response will be shorten URL

Step 4: Show Shorten URL

Once we send the request and receive the reponse we will be displaying the shorten URL under button. The final result will be like the below image.

Short URL Addon

Checkout the code in github and share your thoughts.

Simple Alarm with Notification

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

In this blog we will be exploring more about how to create a simple Periodic Alarm using Alarm WebExtension API. So Whenever we get an alarm instead of triggering it with sounds we will be sending small push notification.

Step 1 : Creating the Alarm for Running first time.

So the very first thing is we have to set when should our first Alarm be called. So after that for every next 30 mintues we can create the next alarm. Lets say I created the alarm at 2:30 AM and then it will be ringing again at 3:00 AM so next should be at 3:30 AM, so from 3:10 to 3:50 I have switched off my system no alarm is created, so to avoid this when I open my browser next time freshly I am creating the alarm in the next nearest 30 Mins. There are two API to know when an Extension is installed and when browser is started there are as follows

  • browser.runtime.onInstalled
  • browser.runtime.onStartup

so in the below code I have added a listener method for these two actions.


// Add a method what to happen when Addon is installed
browser.runtime.onInstalled.addListener(handleInstalled);

// Add a method what to happen when browser starts
browser.runtime.onStartup.addListener(handleStartup);

Then whenever these actions happen I set my first alarm using the below code.


browser.alarms.create("Alarm-Unique-Name-for-Extension", {
  when,
  periodInMinutes
});

Here when is the time in long, the time when the alarm should be created. And periodInMinutes is the time interval when next alarm should get created, so I gave it as 30 which means in next 30 mintues I alarm will get triggered again.

Step 2: Capturing the alarm

The next step after creating the alarm is to Capture it.


// Add a method when a alarm is triggerd
browser.alarms.onAlarm.addListener(handleAlarm);

So there is a method called handleAlarm which will get the alarm Details object. In this object we will be having the alarm “name”, then “scheduledTime” and then “periodInMinutes”.

Step 3: Create Notification

On capturing the alarm we are creating a basic notification using Notfication API. Here we have to give


browser.notifications.create("notification-name", {
    "type": "basic",
    "iconUrl": browser.extension.getURL("path-of-image"),
    "title": "title-for-notification",
    "message": "Message-for-Notification"
  });

The detailed post regarding creating the Notification is previously discussed in another post

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


"permissions" : [
        "notifications",
        "alarms"
        ],

Checkout the code in github and share your thoughts.

Simple Tab Closing Addon using WebExtension API

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

In this blog we will be exploring more about how to close a tab quickly when we click on browserAction button (a small set of icons which is kept aside of address bars).

Step 1 : Defined Title and Icon

First we need to define the browserAction icon and browserAction title in the manifest.json I have defined as below



	"browser_action": {
	    "default_icon": "icons/page-32.png",
   	    "default_title": "Close New Tab"
  	}


Step 2: Listen to browserAction

The second step we have to do is to listen to the browserAction click. To listen to this click by default we have a listener

browser.browserAction.onClicked.addListener(listener)

Here the lisetener is a function where we will be passing the tab (tabs.Tab) object. As said we will pass the tab Object, when the user clicks on browserAction icon we will be sending the current active tab object to the callback function as argument.

Step 3: Defining the callback

So we have got the tab Object, so we know we can get its id by use tab.id.

Then after getting the tab id we can simply close it by using remove API browser.tabs.remove

browser.tabs.remove(tab.id);

My whole call back function is below


    function mylove(tab) {
   	console.log(tab.url+"---------"+tab.id);

	var removing = browser.tabs.remove(tab.id);

	console.log((")created sucessfully("));
	}

Checkout the code in github and share your thoughts.