Creating ShortenURL Maker Addon

May 27, 2017

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">
            <div class="stretch">
                <input type="text" placeholder="Search..." id="urltext" />
            </div>
            <div class="normal">
                <button id="urlclick">Submit</button>
            </div>
    </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.

Read Other Related Posts about : Mozilla

  • Creating ShortenURL Maker Addon
  • Creating Simple Easy Searcher Using ContextMenu
  • Simple Alarm with Notification
  • Comments

    comments powered by Disqus