Create chrome extension

September 02, 2014 Post a Comment

       Google chorme extension is created by the html files, basically you need to know HTML and javascript ,jQuery and manifest.json file.

Details about manifest.json :-
   This json file having collection of values, chrome first load this file and after that only load the other files like html file and js files.

    Chrome extension permissions are set inside the manifest.json file, the basic syntax of the manifest.json file is

Basic Syntax :-

{
//Required
"name":"name of your extension",
"manifest_version":"version of the manifest.json file",
"version":"version of your extension",

//Recommended
"description":"description of the chrome extension",
"default_locale":"en",
"icons": { "16": "icon1.png",
           "48": "icon2.png",
          "128": "icon3.png" },

//pick one (or none)
"browser_action":{...},
"page_action":{...},

//Optional
"homepage_url": "http://path/to/homepage",
"author":"author of the chrome extension",
"automation":...,
"background":{
//Recommended
"persistent":false
},
"optional_permissions":....,

"background_page":...,
"chrome_settings_overrides":{...},
"chrome_ui_overrides":{
   "bookmarks_ui":{
      "remove_bookmark_shortcut:true,
      "remove_button:true
     }
},
"chrome_url_overrides":{...},
"commands":...,
"content_pack":...,
"content_scripts":[{...}],
"content_security_policy":"policyString",
"converted_from_user_script":...,
"current_locale":...,
"devtools_page":...,
"externally_connectable":{
   "matches":["*://*.example.com/*"]
},
"file_browser_handlers":[...],
"import":...,
"incognito":"spanning or split",
"input_components":...,
"key":"publickey",
"minimum_chrome_version":versionstring";
"nacl_modules":[...],
"oauth2":...,
"offline_enable":true,
"omnibox":{
    "keywords":"aString"
},

"options_page":"aFile.html",
"page_actions":....,
"permissions":[...],
"platforms":[...],
"plugins":[...],
"requirements":[...],
"sandbox":[...],
"script_badge":...,
"short_name":"short name",
"signature":...,
"spellcheck":...,
"storage":{
   "managed_schema":"schema.json"
},
"system_indicator":...,
"tts_engine":....,
"update_url":"http://path/to/updateInfo.xml",
"web_accessible_resources":[....]
}

Sample Program:-
Step 1:-
First we need to create the manifest.json file the syntax is shown above, no need to define all the variable such as the syntax but we should need to define some variable.

manifest.json File

{
"name": "Create Sample Chrome Extension",
"description": "First Extension for Chrome",
"version": "1.0",

     "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "sample.html"
},
"manifest_version": 2
}

Step 2:-
Create a html file with your design, same html but you can't able to use the inline function, like onclick, onkeypress,etc...

sample.html File

<!DOCTYPE html>
<html>
<head>
<script src="sample.js"></script>
</head>
<body>
<button id="clicktoview">Click Here</button>
<input type="text" id="txt"></input>
</body>
</html>

Step 3:-
Should not use any inline function for security purpose, so create all function in a separate .js file and import it to the html file.

sample.js File

Step 4:-
Now the extension is created in developer mode, we should need to test it in chrome browser. Follow the steps to run the extension.

Open the google chrome browser and open the setting in the menu it

After clicking the "Extension tab" it will open the existing installed chrome extension and their settings are there. Now we can't able to run the program without .crx file, so should we need to enable the developer mode.