How to develop and publish a chrome extension? - Password Generator
An app for Google Chrome or browser extensions are very popular and convenient to add for better user experience. As a developer, we can develop an extension and publish it to the web store to provide a handy solution to our customers like easy navigation, quick links, quick notes, popular color codes and more. It is easier to distribute the extensions to our team or other users using the Chrome Web Store.
In the following, we are going to see the easiest way to create an extension and publish in Chrome web store with example. We can consider creating a simple extension to generate passwords which is one of most used functions by many.
The following are prerequisites to accomplish the above
Creating an extension includes the following steps
Folder Structure of Chrome extension
All extensions require a specific structure to meet its necessities.
Here is the recommended folder structure of chrome extension - Password Generator which contains JS, HTML, CSS files and manifest files.
Code the Manifest File
Create a manifest.json File with the following details. This will be used for this extension in the store.
manifest_version 2 – This is given as the current version that is supported by Google Chrome
Name a short description about our extension.
Description Name of the extension.
Version version of our extension.
Icons in the size of 128 * 128 (In file structure).
Browser Action
Default icon: icon placed near to address bar
Default popup: Main Html page (passWordGenerator.html)
Permission Requests that the extension be granted permissions according to the active Tab specification.
Design an Interface
Write Functional Logic
Write possible combinations to generate passwords. Here the following logic included.
Load the Extension
When the interface and functional logic development is completed, now we are ready to test the extension by loading into our browser locally.
The steps are
The newly added extension will be displayed near the address bar of Chrome browser.
Distribute the Extension
The following are the steps to distribute the extension in Chrome web store.
Once the review process is done and approved, it is available in the web store. The link to our extension can be shared with our customers.
This is an introduction to Chrome extension creation. To try developing along with us, please watch the video.
The source code for this extension is available in github.
Our extension can be downloaded here.
When you have created the extension successfully, try adding advanced functions like maintaining password history or store it in a local location.
Continue Learning!
