Creating and deploying chrome extension on Web Store
A browser extension is a mini-application. It can help in many ways like adding additional features to your browser, modifying content on the website or integrating with other existing services. They are useful in customizing the user’s browsing experience and enable them to tailor Chrome functionality and behavior to individual needs and preferences. An extension must fulfill a single purpose that is narrowly defined and easy to understand. Sometimes a single extension can include multiple components and a range of functionality, as long as everything contributes to a common purpose.
Creating your first Chrome extension
Let’s begin by creating a manifest.json file. This file contains all the properties which help us in loading our application in chrome.
Most of the fields are self-explanatory but take note of the following:
- browser_action where we specify the default_icon and default HTML page of the extension.
- permissions section which specifies the APIs intent which we will be using in our application.
After this, we can proceed with our HTML and JS file. Since we have declared popup.html in the manifest.json so we will create an HTML file with that name and write the following code in it.
Include all custom CSS and JS files. If you have any other dependency you can specify in this file like we have added the jQuery. Below is the code for your popup.js file.
You can test your chrome extension locally by doing the following steps:
- In your chrome type chrome://extensions
2. Turn on the Developer Mode as this will allow you to upload your created extension on chrome and test it locally.
3. Click on “Load Unpacked” and select your project folder and now the icon of your extension should appear on the right-hand corner.
You can now see your chrome extension at the top right corner.
Deploying on web store
Instead of including popup.js file directly we can have a minified file by using webpack. Create a webpack.config.js file and add the path to your JS file in place of “path_to_.js” as specified in the below code snippet. This will yield better results.
When uploading the extension on the Web Store we need to perform certain steps like creating a zip folder and updating the version in manifest.json. All these tasks can be done by creating a build script to automate the process.
In package.json you need to specify the following script:
This build script can be easily used to package data for deploying it on the Web Store. The build.js script will have the following code:
Now you can use npm run build to have complete chrome extension together with a zip of your src folder.
Conclusion
All these steps will help us in building a basic chrome extension project. There are many features like OAuth, Message Passing, events tracking using analytics tool and user privacy, etc which can be implemented in extension for better performance and results. I have referred the chrome developer guide thoroughly for creating the upGrad Transition Tracker extension which includes these advanced features. This extension helps the learners to add any job on the web to their Career Centre by using a job link.
Check out upGrad’s chrome extension!
