Creating Firefox browser extensions-25

Welcome to part-25 of the series. You can find part-24 here.

In this part we will create a new addon called Mobile View Tester. This addon allows a developer to check a website, in different popular mobile devices.

So, go ahead and create a folder MobileViewTester and inside it another folder icons. Inside that folder place three icons. You can get them from the github link at the end of this post.

Image for post
Image for post
MobileViewTester

Now, create a file manifest.json inside the folder MobileViewTester and put the below content in it.

Image for post
Image for post
manifest.json

Next, create the window.html file in the same folder and put the below code in it.

It is a simple html file, with link to css and js file. It have some buttons to display different mobile phones.

Image for post
Image for post
window.html

Now, let’s put some styles for this html file. Create a file window.css in the same folder and put the below content in it.

Now, i had loaded the temporary extension and checked the styles, and it looks fine.

Image for post
Image for post
Addon

Now, we will add the logic for this addon. Create a file window.js in the same directory and put the below code in it.

Here, we have an event-listener for the click of any button at line 1. Inside the event-listener, we are targeting each id by e.target.id. On matching we are getting the current window info by windows.getCurrent().

After that we are updating the window size by windows.update() function from mozilla, by passing the window dimensions and id.

Image for post
Image for post
window.js

We need to add this for all other buttons. The whole code for window.js is below.

So, our code is complete. I had checked it by testing the temporary addon and it works perfectly.

Image for post
Image for post
Gif

So, it’s time to publish it in the mozilla addon store. I will follow the procedure from another of my blog in the series. The link is here.

Image for post
Image for post
Awaiting

This complete part-25 of the series. You can find part-26 here.

You can find the code for the same in my github account here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store