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 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.
So our button id is urlclick so when it is clicked the myFunction named function will be called.
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
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.
Checkout the code in github and share your thoughts.