How to Deploy and Publish your Chrome Extension | Chapter-7
In “How to Build a Chrome Extension” series, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customizations to these extensions. Note: Feel free to skip to any chapter by clicking on the links provided at the end of this post.
For now, here are the Contents of Chapter 7: Deploying and Publishing a Chrome Extension.
Contents
- Pre-requisites for Deployment
- Upload Your Chrome Extension
- Publish Your Chrome Extension
- Summary
To deploy your extension to the Chrome Web Store, the following steps must be performed.
Pre-requisites for Deployment
Step 1: Create your Chrome Extension’s zip file
To upload your extension, you need to create the zip of at least your extension’s manifest file.
In the previous chapters, we have seen Manifest files, which are .json files that contain important information about your extension. They majorly contain the Extension Name (Displayed in the Chrome Web Store and in the Chrome launcher) and Version (The version of metadata, incremented). If you don’t know what these are, I’d suggest you head over to our First Chapter where we explain these in detail.
You can set the initial version number in the manifest to a low value, such as 0.0.0.1. That way, you have room to increase the version number when you upload new versions of your extension. If your packaged extension uses Native Client, you can structure your extension directory hierarchy and ZIP file in a way that reduces the size of the user download package.
Step 2: Create a Developer Account
It is best to be using a new account just for the extension instead of using your personal account. A developer Google account is a normal Google account that is used only for publishing on Google Web Store or Play Store.
Uploading Your Chrome Extension
If you need the extension ID or an OAuth access token to complete your extension’s code, then you need to upload the extension while you’re still writing its code. Otherwise, you can wait until the extension is finished. You can upload your extension many times before publishing it.
When your Extension, its Chrome Web Store listing, and all the sites it relies on are ready, you can publish your extension.
Publishing your Chrome Extension
- Go to the Chrome Developer Dashboard.
- Sign-in to the developer account you chose in Step 1.
- Click the Add new item button.
- If you’ve never uploaded an item before, you need to accept the developer agreement before going to the next step.
- Click Choose file > your zip file > Upload. If your extension’s manifest and ZIP file are valid, you can edit your extension on the next page.
Steps for Publishing Chrome Extension to the Chrome Store
The following are a list of steps that are required to be done before the extension can be published to the Chrome Web Store. You can publish up to 20 applications on Chrome Web Store with one developer account.
Step 1: Pick a payment system
- If you aren’t going to use Chrome Web Store Payments, you can delay or (for free extensions) omit this step.
- If you want to charge for your extension, set its price and payment system through the dashboard’s edit page for your extension.
- To use Chrome Web Store Payments, you also need to signup your developer account as a Google Checkout merchant, and you need to associate your merchant account with the store. For details, see Register for a Google Checkout Merchant account.
Step 2: Provide store content
Add the store listing information for your extension that isn’t in the ZIP file, such as a long description, screenshots, videos, and links to related sites. You’ll need the following to finish your extension’s store listing
- A detailed description of your application. Write your description to entice users to download your extension.
- A 128×128 icon to display in the store. You may re-use your extension icon here.
- At least one 1280×800 or 640×400 screenshot or YouTube video to show off what your extension does.
- A 440×280 small tile icon that will be displayed on the Chrome Web Store wall.
- The primary category where your extension should be listed.
- Your extension’s language to help users find it.
Check out the Branding Guidelines for information on how you can use Google brands.
Step 3: Get extension constraints and finish your extension’s code
When you publish your extension, you’ll get an extension ID. When you make requests to Google APIs, you’ll need this information. For example, if you need the licensing API, you’ll need the extension ID.
Step 4: Get the extension ID
The extension ID appears in the URL of any dashboard or store page for your extension. You’ll need the extension app ID if you want to use the licensing API.
For example, the URL “https://chrome.google.com/extensions/detail/abcdef?hl=en" has the app ID “ abcdef”
Step 5: Get the OAuth token
If you want to use Chrome Web Store Payments, you’ll need an OAuth access token and access token secret.
Step 6: Pay the developer signup fee
Before you publish your first app or extension from your account, you must pay a one-time $5 developer signup fee. A reminder in the dashboard will appear until you pay the fee.
For more information, including troubleshooting tips, see the Registration article.
Step 7: Finish the extension
Now you can add any code that refers to the extension app ID or OAuth access token to complete your extension.
You can update your extension as many times as you want, just remember to increase the version number each time.
Before you publish your extension, verify that everything is working properly:
- On the edit page, click Preview changes and check that the listing looks great and has all the info that it should.
- Check that the extension and any websites and supporting pages all work.
- Publish any new websites and supporting pages that your extension needs to work on.
You can also choose the audience for your extension which you can see in the developer dashboard.
Summary
I hope, the seventh chapter was able to help you deploy and publish your Chrome extension on the Chrome Web Store.
In the next chapter, we’ll be learning about habits and how they can be tracked using an Atomic Habit Tracker. Feel free to reach out for any queries.
Chrome Extension Series
# 1: An Introduction to Chrome Extensions
# 3: Changing the background color of a paragraph with Chrome Extension
# 4: Replacing paragraph text with your user-given text using Chrome Extension Chapter
# 5: Replacing images in a website using Chrome Extension
# 6: Replacing images with your own images using Chrome Extension