The manifest file is the configuration file that tells chrome browser to display information and injects scripts into the browser. In this file location of icons are mentioned. Any user can click on the icons for an extension to work. Icons are also used for recognizing the extension and they should have a unique design. If you want to publish an extension to chrome store then your icons don’t be similar to another extension else your extension will not be approved.
There are three types of scripts that you can define in the manifest file.
- Browser scripts
- Content scripts
- Background scripts
Browser script
Most of the extensions have an icon that is displayed on the right side of the URL bar in chrome. When you click on the icon then popup window opens up or any automatic action is performed. The scripts which run by clicking on browser icon are browser scripts. These scripts are also known as popup scripts.
Content scripts
Content scripts are those which are injected into the website that you open in the browser. These scripts perform different actions on the website e.g. changing the background color of the website, getting information from the website or performing any action on the website.
Background scripts
Background scripts are run in the background. They can perform actions which are usually not done by browser scripts and content scripts. For example, content script can send message to background script to close the current tab.
Now I can give you a sample of manifest.json file
{
"manifest_version": 2,
"name": "JuTwitter",
"short_name": "JuTwitter",
"description": "JuTwitter is an extension which performs auto tasks for twitter.com",
"version": "1.0.1",
"author": "Junaid Rehman",
"icons": {
"128": "icon128.png",
"48": "icon48.png",
"16": "icon16.png"
},
"browser_action": {
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"default_title": "JuTwitter",
"default_popup": "popup.html"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://twitter.com/*"],
"js": ["jquery.js", "toast.js", "jquery-confirm.min.js", "content.js"],
"css": ["content.css", "jquery-confirm.css"]
}
],
"permissions": ["tabs", "storage", "https://twitter.com/*"]
}
In the above code manifest_version is the chrome api version. You can insert spaces in name field also. But short_name cannot have spaces. Description should be small and do not exceed 132 characters.
Version is your chrome extension version. The author is the developer name who made the extension. I give icons of 3 types i.e. 16 x 16 pixels, 48 x 48 pixels and 128 x 128 pixels.
Browser_action includes icons, title and popup script. You can include CSS and js files in the popup.html file.
Next is the background scripts and in last is content_scripts.
If your extension requires some permission then you can also mention the permission which is mentioned at the 33 lines.
