3 Steps to Publishing an Angular-based Chrome Extension

You’ve Built Your Chrome Extension — Now Ignite Its Presence! Let’s Share the Opportunity Cost App and Revolutionize Decision-Making!

Victor Barbarosh
Practical Coder’s Chronicles
5 min readDec 30, 2023

--

Congratulations on crafting your Chrome Extension masterpiece! Now, let’s not keep it a secret. Together, we’ve molded the powerful the Opportunity Cost App as a Chrome Extension using Angular magic. It’s a game-changer for wise financial decisions. Picture this: that dreamy $10,000 Caribbean vacation equals almost a year’s worth of groceries! Time to reveal this financial wisdom to the world. Join us as we dive into the how-tos and shout your Chrome Extension from the rooftops. Say goodbye to financial pitfalls and hello to informed choices — your wallet will thank you!

DALL·E — An expressive painting that visually divides a vibrant canvas into two halves: one depicting an enticing, dreamy landscape symbolizing opportunities like a picturesque beach, and the other portraying a cozy home with fireplace and dinner table

Embarking on the next leg of our development expedition, let’s catapult our creation onto the global stage by publishing it on the Chrome Web Store.

Now, for the crucial initiation, I’d typically guide you to the Chrome for Developers docs for comprehensive insights. However, our first stride demands the creation of a Developer Account, meticulously detailed here. Bear in mind, this is the solitary step with a price tag — a mere $5.00 US at the time of writing.

Once you’ve secured your account, a gateway opens to a realm where you can log in and gracefully unveil your extension. Yet, uploading is but a fragment of the elaborate dance needed to seamlessly debut your app to the world. Let the journey to Chrome Web Store stardom commence! 💫🚀

Step 1 — Upload the source-code

Once logged in to your Chrome Web Store account you can see in the Developer Dashboard the option to create New Item:

Screenshot: Developer Dashboard

Click on the New item button and you’ll be able to upload the zip file of your already built app (for information on how to build your Angular app check my previous post on how to implement the Opportunity Cost App as a Chrome Extension):

Screenshot: Add New Item

Step 2 — Fill In the Build Form

Once the zip file is uploaded you will find the following sections awaiting to be filled in:

  • Status
  • Package
  • Store Listing
  • Privacy
  • Distribution

2.1 — Status

Status Section does not require anything from us. It mere shows the status of the Item we are preparing for a sucessful publishing.

Screenshot: Build Form Sections

2.2 — Package

The Package section displays exactly what we have put in the manifest.json as part of our built process.

Screenshot: Package Section

2.3 — Store Listing

The Store listing section is the one of the following three that need actual work from us.

Screenshot: Store Listing Section

We need to fill in the Description, Category and Language.

Screenshot: Package Section — Product Details

We upload all the required images in the Graphic assets subsection, according to the strict requirements in terms of number of images as well as exact size of each image, in pixels.

Screenshot: Package Section — Graphic assets

Finally, fill in the Additional fields, Metrics and Support info subsections, as applicable:

Screenshot: Package Section — Additional fields, metrics, support

2.4 — Privacy

In the Privacy section, we are mainly prompted to complete certain fields, by default, such as Single Purpose subsection, Permission justification, but keep in mind that certain fields will appear depending on the extra permissions we are requesting in the manifest.json file, under "permissions":[] array.

In our case, the array of permissions contains no elements since we do not use, nor store any browser-related memory, apart from the active session storage memory allocated to the Chrome Extension Application itself, as a temporary storage for the time it is opened only.

Screenshot: Privacy Section

Data usage subsection needs to be filled in according to the real usage, as well:

Screenshot: Privacy Section — Data usage

Privacy Policy subsection would need to be filled in, but since in our case there is no data collection, we can ignore it as well:

Screenshot: Privacy Section — Privacy policy

2.5 — Distribution

The Distribution section, which includes the Payments, Visibility, and Distribution subsection, may be included according to our particular application we are about to publish. In our specific case, there is charge and there are no restrictions in terms of countries that can install it:

Screenshot: Distribution Section

Step 3 — Submit It for Review

Finally, you are ready to hit that “Submit for review” button!

Screenshot: Submit for review button

Congratulations!!! Yo walked through the whole process of submitting successfully a new Chrome Extension App.

Once it is approved and published successfully, you will be able to search it in the Chrome Web Store and add it to your browser, like I did:

Screenshot: Trade-Off Assessment Tool Details Page in Chrome Web Store

Join the thrill of decision-making with me every time the ‘to buy or not to buy’ debate kicks in! Experience the magic of my Trade-Off Assessment Tool.

If crafting your own sounds like a hassle, try my own Trade-Off Assessment Tool! It’s totally fine with me!

Call for Action

Don’t be a scrooge! Give a round of applause (aka Clapping) by hitting that follow button, and share your thoughts in the comments (if you got some)! Your engagement adds sparkle to this digital rendezvous. Let’s keep the conversation rolling and the good vibes flowing! 👏🌟💬

--

--

Victor Barbarosh
Practical Coder’s Chronicles

I am a full-stack software dev, writing about code, money & code of money, in all their forms and beauty!👉🚀