Chrome extension is a set of instructions that can only be accessible in Google Chrome. Developers can upload their extension(s) for public users so that they can download and run the extension on their browser. The extension allows public users to add new customized features on the browser. The purpose of the extension is to enable public users to add required custom functionality for their browser integrated with the APIs to receive and transfer the expected data. Chrome extension is generally a web page that is hosted within Chrome and can access some other required APIs to fetch the data.
Some Important Tips for Developing Chrome Extension:
- Before starting development of the extension, first know the purpose and plan how the extension will look like.
- Start by setting up the project and its files by adding all files at a place / directory in a new folder. Google Chrome allows users to upload a plugin by defining its directory.
- Create a Manifest.json file to allow Google Chrome to load the extension properly in Chrome and add it to the project folder.
- Add an icon for the extension which will be displayed as the extension.
- Create a HTML page to show browser action if a user clicks on it.
- Create popup.html & popup.js file in a new folder located at the directory.
NOTE: For security measures never add inline java scripts in HTML files. So, it will be better to create a separate file to save the required JavaScript code and it will be fetched from the HTML file.
Here are the Steps to Develop Google Chrome Extension
1. Open up the Visual Studio
Use visual studio code to build Google Chrome extensions. Locate the folder from the directory of the extension saved by name (File -> Open Folder). A window will open from where you can select the saved folder.
2. Create Image File folder
Navigate to the project name saved by folder name. It is a place with collective images and icons that can be saved for development use.
3. Open-up the file named as extension Manifest.json and paste the code mentioned below: –
{
“manifest_version”: 2,
“name”: “New_folder”,
“description”: “This extension will analyze a page using New_folder”,
“version”: “1.0”,
“browser_action”: {
“default_icon”: “icon.png”,
“default_popup”: “popup.html”
},
“permissions”: [
“activeTab”
]
}
- Browser_action: This will specify the default icon and reference of the HTML page which will be displayed once the browser action is clicked.
- Permission page: It is the permission or the set of instructions to be followed by the browser or to be followed by the user. Permission page refers to access to the activeTab, it is required in order to enable it to land on the URL of the current tab to pass on to the “new_folder”.
NOTE: On permission page users can specify the required permissions.
4. Create UI Designs
This will be an impressive way to create and display an immersive UI for the browser action to display if clicked users can create their designs.
5. Open-up the file named as popup.html and paste the code mentioned below:
<!doctype html>
<html>
<head>
<title>New Folder</title>
<script src=”popup.js”></script>
</head>
<body>
<h1>New folder</h1>
<button id=”viewnow”>View Now</button>
</body>
</html>
- Popup.js: It includes script and is added in HTML, from here logic of extensions will function if once the “Verify” ID is clicked
6. Implementation of Logic
For creating the plugin it is mandatory to implement the logic which will be executed when the “View Now” button is clicked.
Open-up the file named as popup.js and paste the code mentioned below:
document.addEventListener(‘DOMContentLoaded’, function() {
var checkPageButton = document.getElementById(‘viewnow’);
checkPageButton.addEventListener(‘click’, function() {
chrome.tabs.getSelected(null, function(tab) {
d = document;
var f = d.createElement(‘form’);
f.action = ‘URL’;
f.method = ‘post’;
var i = d.createElement(‘input’);
i.type = ‘hidden’;
i.name = ‘url’;
i.value = tab.url;
f.appendChild(i);
d.body.appendChild(f);
f.submit();
});
}, false);
}, false);
After examining the above code, you will get to know that in the beginning we are registering a ‘handler’ for the click event on the view now button. If the button is clicked, we can view the selected tab and JavaScript executed to add / create a form with some hidden fields submitted to the extension. In code the URL is implemented from the current tab to convey it to the extension which page has to be executed to check the test for.
7. Installation and process of extension in Google Chrome.
- Now enable the developer mode and click on the load unpacked.
- Choose the project folder by navigating it to the saved directory and select the option of select folder.
- Once the extension is added and saved to the chrome extension.
- Once the extension is installed, the installed extension can be viewable on the top right corner.
- And by clicking on the icon of the extension user can view Pop up.
If you are a web developer, it will be much easier for you to design, develop & deploy Chrome extensions in a minimum time frame. You can upload and publish an initial version of extension to the Chrome Web Store which will be used to improve / modify browser functionality.
