Creating Firefox browser extensions -2
Tags: javascript, webdev, showdev, beginners
Published: 2020-03-29 12:19:38

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mrhvaze87dcvmywvwtcj.jpeg)

Welcome to part-2 of the series. In this part we will start by submitting the firefox extension, which we created in part-1.

You need to have a firefox account to publish addons to mozilla. Create one and login to any firefox browser.

After that you have to first package your extension. You can find the details of different OS [here](https://extensionworkshop.com/documentation/publish/package-your-extension/). We need to go to our folder, where all of code and other files are and select all of them, and click on **Compress**.

![Compress](https://cdn-images-1.medium.com/max/2880/1*LvnIpS17MO68GGhpkXXYBQ.png)*Compress*

Now, our zip file is ready and we can submit the addon. I am following instruction from this [link](https://extensionworkshop.com/documentation/publish/submitting-an-add-on/).

As per the instruction, we should go to the link [https://addons.mozilla.org/en-US/firefox/](https://addons.mozilla.org/en-US/firefox/) and click on **Register or Log in** button.

![Login](https://cdn-images-1.medium.com/max/2880/1*KL5h0vGg-VAI1hrccqBrjA.png)*Login*

On the next screen, need to give some information and then click on **Create My Profile**.

![Create Profile](https://cdn-images-1.medium.com/max/2880/1*OeVN02JGv5nRtE4-Hpvb0Q.png)*Create Profile*

After that we are been taken to the same addons screen, and we need to click on **Developer Hub** here.

![Developer Hub](https://cdn-images-1.medium.com/max/2880/1*fhK6f6AZ7qcSN-JK4_C3fw.png)*Developer Hub*

On the next screen click on **Submit Your First Add-on** button.

![First Add-on](https://cdn-images-1.medium.com/max/2880/1*_rqgG5CFKfFce0mu0qspvQ.png)*First Add-on*

After that we have to agree to two agreements and also check I’m not a robot checkbox. After that click on **Accept** button.

![Firefox Agreement](https://cdn-images-1.medium.com/max/2880/1*PDLFLADHpt4K2H5t_tZBtQ.png)*Firefox Agreement*

On the next screen click on **On this site** radio button and click **Continue** button.

![On this site](https://cdn-images-1.medium.com/max/2880/1*zXStupyiGiFgZFMc6YKuiQ.png)*On this site*

On the next screen you will get to select the file. Click on **Select a file..** button and select the zip file, which we had created at the start of this post.

![Submit](https://cdn-images-1.medium.com/max/2880/1*gwOQdT2qkDqKnv8sp1Q6YQ.png)*Submit*

Next, it will take some time to upload the zip file.

![Uploading](https://cdn-images-1.medium.com/max/2880/1*p9z4qQKB8hri4JVOP6m6ng.png)*Uploading*

After that if there are no errors, you will get the below screen and the **Continue** button will be enabled.

![Finished](https://cdn-images-1.medium.com/max/2880/1*38sXdjdFqWxuF48pr15b2g.png)*Finished*

In the next screen, we will be asked if your extension contains any of the below things like minifiers and webpack.

![Minifiers](https://cdn-images-1.medium.com/max/2880/1*nNNJaXyA5qF6fwiRDl0bJg.png)*Minifiers*

As, it doesn’t contains any of the above we can click on **No** radio button and then **Continue** button.

![Continue](https://cdn-images-1.medium.com/max/2880/1*CZt9FUb5nvStGPotoGKTjg.png)*Continue*

After that in the next page, we need to fill some information about the addon.

![Developer](https://cdn-images-1.medium.com/max/2880/1*CrNO86rEENRVo_cBcWQvTA.png)*Developer*

And then some more information and click on **Submit Version** button.

![More info](https://cdn-images-1.medium.com/max/2880/1*IR6EkOMUQu2g5Go9G8CY4A.png)*More info*

In the next Next screen, it will show our Addon have been submitted for review. We can click on the **Manage Listing** button and it will take us to below screen.

![Edit](https://cdn-images-1.medium.com/max/2880/1*ZRDCuWzokpHE11XhMWpmBg.png)*Edit*

The only thing to add is the images, so once we click on **Edit** button next to the Images we will get below.

![Icon](https://cdn-images-1.medium.com/max/2880/1*UtBsXW_YU_u8b5fYb9F4sg.png)*Icon*

The icon which we had in the project can be used and need to give some screenshots.

![Screenshots](https://cdn-images-1.medium.com/max/2880/1*l91wAuAQRnr0JX9bePj76A.png)*Screenshots*

So, once you move to the Developer hub it will show Awaiting Review and it might take some time to be approved. Mozilla team will notify you by email once it is approved.

![Awaiting Review](https://cdn-images-1.medium.com/max/2880/1*vVUVE7lx0avT5dUq7C5JIw.png)*Awaiting Review*

The extension got approved in 1 hour and the status got updated in Developer Hub.

![Developer hub](https://cdn-images-1.medium.com/max/2880/1*wHDUAch45jPnE77mA-FBxA.png)*Developer hub*

Now anyone can goto the link [https://addons.mozilla.org/en-US/firefox/addon/the-travel-theme/](https://addons.mozilla.org/en-US/firefox/addon/the-travel-theme/) and install the extension. I did install the extension and it is working fine.

![The Travel Theme](https://cdn-images-1.medium.com/max/2880/1*ZIHAE_LNCuBxEE60QFSY8A.png)*The Travel Theme*

Please show your love by installing the extension and more extensions are coming soon.

This completes part-2 of the series, which was basically the way to submit an extension for approval to addon site.