google chrome extensions developemnt
google chrome extensions developemnt

Hey guys, I have been into developing chrome extensions lately. I would like to write blogs alongside coding process. Please feel free to ask questions (noQuestionsAreDumbQuestions) in below comment section.

Application Name: Click Counter

In this tutorial we will learn how to create a non-functioning app. In Part 2 we will make the app working with JavaScript.

Step #1 Create a folder with name ‘Click Counter’.

  • 🐶 This folder will have all the files required for this project.
  • 🐶 This folder will act as an extension during the development.
  • 🐶 After the development, the folder should be zipped and renamed with relevant name before uploading to chrome webstore.

Step #2 Create 2 files with name: ‘manifest.json’ and ‘popup.html’

  • 🐶 The ‘manifest.json’ file is a json file which consists metadata about the chrome extension.
  • 🐶 Metadata could be: manifest_version, name, description, version, icons, permissions etc.
  • 🐶 The ‘popup.html’ consists of the UI part of the chrome extension.
  • 🐶 When you click on an extension the popup you get is the content from ‘popup.html’ file.

Step #3 Open the ‘manifest.json’ in your favorite text editor (Atom🤤) and copy paste the below code.

{
"manifest_version": 2,
"name": "Click Counter",
"version": "1.0",
"description" : "A clicker counter chrome extension.",
"icons" : {
"128": "images/icons/128.png",
"48": "images/icons/48.png",
"16": "images/icons/16.png"
},
"browser_action":{
"default_icon": "images/icons/48.png",
"default_popup" : "popup.html"
}
}
  • 🐶 ‘manifest_version’ is the version of the manifest file the extension is using.
  • 🐶 ‘name’ is the name of the extension. This name appears on the chrome webstore as the main extension name.
  • 🐶 ‘version’ is the version of development.
  • 🐶 ‘description’ is the text shown after you hover on the extension.
  • 🐶 ‘icons’ consists of 3 size of .png icons of the extension i.e. 128×128, 48×48 and 16×16. Load the equivalent image files inside the same folder or give a relative path from inside the extension’s folder. The browser selects which icons to use by default.
  • 🐶 ‘browser_action’ has ‘default_icon’ which chooses the default icon forcibly and the ‘default_popup’ page will load the popup.html file as default.

Step #4 Type down the below code in ‘popup.html’ folder

  • 🐶 Create a folder called ‘images’ and download an image to click and save it as ‘clicker.png’.
  • 🐶 This HTML code will act as homepage of the extension.

Step #4 Load the extension to the browser for testing

  • 🐶 Open Chrome browser and go to extensions or in URL bar (Omni Box) type “chrome://extensions”.
  • 🐶 Turn on the ‘Developer mode’ and click on ‘Load unpacked’.
  • 🐶 Now, browse to the folder path and select the folder and smash Enter.
  • 🐶 Now to load the extension you need to click on the Extensions Icon and click on pin icon to pin the app icon beside the Omni box. This will make the testing while development process easier.
  • 🐶 Click on the logo to load the extension.

Congrats. Continued development will be in Developing Chrome Extensions ( Part 1 ).

What Do You Think on This ? Say Here