chrome extension template | dummy chrome extension

Every time you want to create a new extension there is a lot of extra stuff to do, like creating the manifest file adding  proper permissions, creating background files, adding popup files, adding content scripts etc. chrome extension template is a dummy extension which helps you to start coding  directly without spending time to set up the environment.

Download

Description of the files according to the appearance in manifest file

manifest.json

This is the one and only required file to make a chrome extension.
{
"manifest_version": 2,
"name": "Dummy Extension name",
"version": "1.0.2",
"description": "dummy extension header",
"browser_action": {
"default_icon": {
"24": "images/icon.png"
},
"default_title": "Dummy Extension Title",
"default_popup": "html/popup.html"
},
"content_scripts": [
{
"matches": [
""
],
"js": [
"js/mainCs.js"
],
"css": [
"style/mainStyle.css"
]
}
],
"background": {
"scripts": ["js/background.js"]
},
"permissions": [
"storage",
"tabs",
"activeTab",
"webRequest",
"identity",
"webRequestBlocking"
]
}
find more details here

images/icon.png

Display Icon for the extension which appears in the browser window. When a user clicks this icon browser action event is generated. The default behavior is if “default_popup” page is declared in the manifest than displays that.

html/popup.html

Shows when a user clicks on the display icon, this file is defined as “default_popup” in the manifest.

js/mainCs.js

This file is a content script it reloads each time the web page gets reloaded.

style/mainStyle.css

stylesheet you can define any style here which will be applicable to the webpage.

js/background.js

This is a background file it will be up and running when the chrome starts up until the user closes each and every window. This file will not reload on each page refresh. This is the most powerful feature of chrome extension almost all awesome APIs are only available at background page only

Download

Remember webpage, content script and background page runs in a different context. to make communication between them you need to set up message passing mechanism which is discussed here 

How to change context in the chrome console

chrome extension template

chrome extension template

Thanks for using chrome extension template

Leave a Reply

Your email address will not be published. Required fields are marked *