Create Your Own Chrome Extension within 5 minutes

Create Your Own Chrome Extension within 5 minutes

Create Your Own Chrome Extension within 5 minutes

Google always do something easy for people daily stuffs. Google Chrome is the Best Example of new and also helpful to people. Google Chrome very good functionality for Users to do their work easy. Yes! We are going to discuss on the Google Chrome Extension Development. Extension very helpful shortcuts for us. So, Today I am not going to cover all information, history and all those stuffs I am going to do Hello World Extension development for the Google Chrome.

I am going to do Hello World Extension for Google Chrome. If you want to know more about the details Steps then visit Google Chrome Developer Site for Basic information here is the link which helps to go through details information. https://developer.chrome.com/extensions/overview .

Hello World Chrome Extension Step’s

Create Your Own Chrome Extension within 5 minutes

Create Your Own Chrome Extension within 5 minutes – All File which need for Hello Wolrd Extension

Step – 1

Manifest File

manifest.json file give all information about the Chrome Extension which we are going to develop. Information like Name, Logo, Version, Permission and much more in the Hello World Extension we do not need of the much information.

Create one Folder give Name Hello World ! create manifest.json file and put it in to the Hello World Folder. Also Put two images for the Use like a Logo with small and big size.

manifest.json
{
  "name": "Hello World!",
  "description": "My first Chrome Extension for do the step ahead in Chrome Extension Development..",
  "version": "0.1",
  "manifest_version": 2,
"app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
"icons": { "16": "hello_world_16.png", "128": "hello_world_128.png" }
}

 

Step – 2

Create HelloWorld.html file for give and look of the Extension.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div><center>Hello, world!</center></div>
  </body>
</html>

 

Step – 3

Create Java-Script file which give the height and width of the Dialog Window.

background.js
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create(‘HelloWorld.html', {
    'outerBounds': {
     'width': 400,
      'height': 500
    }
  });
});

 

All Steps Done for the Hello World Extension you are ready to publish the Extension on the Google Chrome Store.

Step – 4

For Publishing the Extension on your Local Storage for the Testing purpose.

Go to chrome://extensions/ in your Browser and Enabled Developer Mode then select Load unpacked extension… select your Extension Folder and that’s it Your Hello World Extension Development Done.

Source Code –  Click here to Download Code from GitHub

1 Google Chrome Extension Step Enabled Developer Mode

1 Google Chrome Extension Step Enabled Developer Mode

 

2 Google Chrome Extension Step Select Extension folder

2 Google Chrome Extension Step Select Extension folder

 

3 Google Chrome Extension Step Hello World ! Loaded

3 Google Chrome Extension Step Hello World ! Loaded

 

4 Google Chrome Extension Step Run Extension

4 Google Chrome Extension Step Run Extension

 

No Responses

Leave a Reply