How to create browser extension. Part 2: publishing and analysis

tech / 2024-04-21T05:43:13.561Z

In the first part of the article, I shared the process behind getting the idea, creating the plan, and developing the app itself.

Part 1

In the second part, I will talk about publishing and what is involved in it.

Preparation

I planned to deploy extensions to 2 major platforms: Chrome and Mozilla.

To publish in both stores, you need to have a developer account. To create a Google dev account, you should pay 5$ fee. And Mozilla doesn't have any fees.

Creating production build

If you are using Plasmo you need to execute the following command:

pnpm plasmo build --zip

For Mozilla you would need to pass a browser target flag:

pnpm plasmo build --zip --target=firefox-mv2

I discovered --zip tag after I had already published the extension. It would save me some time for sure.

Note

Mozilla might throw an error to your .zip file. The reason for that is Mozilla requires you to zip individual files, instead of a whole project folder.

So if we have a folder project with index.js, index.css, you should not zip the whole project folder and should pick and zip individual files instead.

Preparing listing page

The next step is to create a listing page for the extension. You should see "New item" os something like this in your Chrome development console. Click it.

It will ask you to upload .zip file you have previously created. After uploading is finished you will see the rest of the listing page fields.

Here is how it looks:

google listing page

It's a simple form with such fields as title, description, category, images, etc.

Google has a perfect guide on how to make the best version of your extension page. There you find a detailed description of all the fields and assets you should prepare.

But the core of them are the following:

  • icon
  • promo video
  • screenshots
  • small promo tile
  • marquee promo tile

https://developer.chrome.com/docs/webstore/best-listing

The number of assets you need to prepare is big, so it's better to start working on it in advance.

For images I used Figma, and for the video, I used a service called 123apps. This video editing platform is super easy and free to use.

https://online-video-cutter.com/add-music-to-video

The flow for publishing to the Mozilla store is pretty much the same, but they have fewer fields form. And you can reuse the same data and assets you prepared for Chrome listing, so it won't take much time.

Here is how the Mozilla page looks:

Publishing

When you finish adding info and assets, nothing stops you from hitting the submit for review button.

On both platforms, the first review takes about 3-5 days, and subsequent ones 1-3 days.

Analytics and feedback

It's important to gain as much data about the user's behavior as possible.

Google allows you to turn on Google Analytics right away. GA will be set up from the start and you will be able to see user's starts, geographics, and more.

GA dashboard

One more tool you could use to collect some starts is Dub. Dub is a link shortener but with analytics.

You can use it to create short links to your extension page and use it in social media posts.

For example, you could create one link for X and one for Linkedin and analyze which place drives you more traffic.

dub dash

Conclusion

The publication part in its essence is easy.

But the hard thing (or at least for me) is to create copy and presenting assets. These are the first things users will see and they need to be done right.

It's awesome if you have a design person working with you on the project. It will help you to parallel work and decrease your timeline to the first published version.

Talk to users if you can. If you don't have active users, try to find couple of people who will give you a feedback, so you can iterate based on that (X or LinkedIn can help).

And have a happy hacking!