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 :-
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
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
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.
If you enable the "Developer mode" you can see some extra option, these options are specially for developing chrome extension.
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":[....]
}
//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
}
"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>
<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
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('clicktoview');
if (btn) {
btn.addEventListener('click', callfunction);
}
});
function callfunction()
{
alert("Hi !Execute");
}
var btn = document.getElementById('clicktoview');
if (btn) {
btn.addEventListener('click', callfunction);
}
});
function callfunction()
{
alert("Hi !Execute");
}
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.
If you enable the "Developer mode" you can see some extra option, these options are specially for developing chrome extension.
After choose the path and press ok, your newly created extension were added to your chrome and the icon is display on the top.
Output of the Extension:-
thanks for write this article
ReplyDelete