In the article How to create a Chrome extension we saw how to create an extension for the Chrome browser and how to use it locally without going through the Chrome Web Store.
If instead we want to make our extension accessible to other users, we can proceed with publishing it in the Chrome Web Store.
In this article we will see all the steps to do so, starting from registering as a Google Developer up to uploading an extension and publishing it in the Chrome Web Store.
Plus, at the end of the article you will find a surprise 🎁
🔗 Do you like Techelopment? Check out the site for all the details!
Registering a Google Developer account
To publish an extension in the Chrome Web Store, you need to access the Chrome Developer Dashboard, but to do so, you need a developer account. If you already have one, you will be able to access the Dashboard without problems, otherwise, as soon as you click on the link, you will be prompted to register your account as a Chrome Web Store Developer.
- Having a developer account is mandatory. So we can't avoid this step 😌
- Unfortunately, the payment of $5 is also mandatory, but the good news is that this cost is a one-time fee 😉
Once you select the Agreement and Policies checkbox, and complete the payment, you will be redirected to the Chrome Developer Dashboard.
The previous screen will appear when our developer account has already been configured, if not, we will land on the configuration completion page:
- We will have to enter a valid email by clicking on "Add email"
- We will have to choose whether our account is a trader account or a non-trader account (you can find the details at this link)
Once this is done, we are finally ready to start with the activities regarding the publication of our extension 😊
Preparing the extension package
Let's now see what activities are necessary to create the package of our extension to upload to the Dashboard.
Checking the extension info
Open the manifest.json and verify that all the following entries are there and that there are no grammatical or typo errors.
If you notice any errors after publishing, don't panic 😎, you can increment the version number and perform a new release/publish.
-
"name"The name that will appear in the Chrome Web Store and in the Chrome browser. -
"version"The version number of the extension for this release. -
"icons"The set of icons for our extension. -
"description"A string no longer than 132 characters that describes the extension.
Find an example here How to create a Chrome extension.
Create a zip file with all the extension files
To upload our extension, we need a ZIP file that contains all the extension files.
N.B. the manifest.json file must be placed in the root directory, not in a subfolder.
Uploading the extension package (zip file)
At this point, we can proceed with uploading the zip file into the Dashboard. To do this, access the "Items" section from the side menu and then click on "New item":
N.B. Before uploading, make sure your account has MFA (multi-factor authentication) or 2-Step Verification enabled
If the upload was successful, we will land on the configuration page of our extension:
Below are the fields that we will need to fill in:
- Description: Add a description that helps understand the features and purpose of the extension
- Category and Language: Choose the category and language
- Store icon: Upload the extension icon with dimensions 128x128 px
- Screenshots: Upload screenshots (respecting the formats) to help the user understand in preview how the extension will appear once installed and what are the sections that compose it (e.g. in addition to the extension, add screenshots of the settings page if provided by your extension)
- Small promo tile: 440x280 px image that will appear on the home page, category pages and search results.
- Marquee image: 1400x560 px image that will be used if the extension is chosen for the marquee functionality (the rotating carousel at the top of the Chrome Web Store home page).
Extension Distribution Type
Google allows you to define the visibility of an extension according to the following options:
- Public: anyone in the selected countries will be able to see and install the extension
- Unlisted: only people with the link to the extension will be able to see and install it. ATTENTION: the extension will still be searchable in the store!
- Private: with this choice you can define a group of people who will have access to the extension
To set the visibility you need to access the "Distribution" section available in the side menu:
Publishing
After filling out all the info described above, we should be ready to publish but, as you may have noticed, the button to perform the Submit is not enabled. Don't worry, Google helps us understand what is wrong through the link "Why can't I submit". By clicking on the link, a popup will appear with instructions to fix what is wrong, such as permissions (required by the extension and reported in the manifest.json), policies and privacy.
After you have everything set up, you will need to click on "Save draft" and the "Submit for review" button will be enabled. Clicking on the "Submit for review" button will bring up the following popup:
After clicking on "Submit For Review", the following message will appear, finally informing us of the correct submission of our extension:
We've finished but… 🎁
Our publication is complete 🎉, we just have to wait for the outcome of the Google review but…
...you've probably noticed that the guide in this article was created using as an example a real extension created by the Techelopment team: Trouble Ticketing Management Utils. This extension is a utility for those who use Service Now, JIRA and ClickUp as TT (Trouble Ticketing) systems.
Starting from the ID of a ticket (e.g. INC0123456), the Trouble Ticketing Management Utils extension is able to build the final URL with which to directly access the page relating to the ticket in question. Naturally, once the ID has been entered, the extension allows you to automatically open a new tab with the ticket detail page.
Isn't that great?! 🤩
Follow me #techelopment
Official site: www.techelopment.it
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment
Top comments (0)