Important 7 Steps to Develop Chrome Extensions

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.

Share

Recommended Posts

How Web Design Makes Information Accessible

If you’ve designed or built a website before, you may have heard the term “accessibility.” All businesses or content creators with websites should know about website accessibility and how it can improve user experience and benefit their reputation and sales. So what is web accessibility? Accessibility refers to initiatives that help individuals with disabilities use websites, making…

Content Creation 101: Where and How to Start

Content creation is an important aspect of inbound marketing. Without content, you’d be unable to market to a wide variety of potential and current customers. When you create content, you generate ideas that appeal to your ideal customers, creating written and visual content around those ideas and using it to promote your business. Content creation…

10 Tools to Help Automate Your Small Business

Using the right software can help streamline your business. Unfortunately, many businesses are slow to utilize new tools because they lack resources. Cost, time, and skills are a few common reasons businesses opt out of using new tools and software in their business. However, not using technology can hinder your business in more ways than one. Business automation…

Follow Us. Sk./ Li./ In. / X./ Fb.