Let’s start with the manifest.json file. A manifest.json file provides important information about our extension. You can read more about it here. This is the one I’ve used in the app:
{
"manifest_version": 2, "name": "Duma",
"description": "Come get your word of the day!",
"version": "1.0.2", "browser_action": {
"default_icon": "main/images/favicon_book.png",
"default_popup": "popup.html"
},
"icons": {
"64": "main/images/chromicon.png"
},
"background": {
"scripts": ["background.js"]
},
"web_accessible_resources": ["*.ttf" ],
"chrome_url_overrides": {
"newtab": "main/index.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["main/duma.js"]
}
]
}
The first part is simple. Fill it with the app’s name, description and version. Start with 1.0.0. Whenever you update your app, you’ll want to increase that number. If it’s a small update, change the rightmost digit. If it’s a massive update, change the first digit!
In the browser_action part, you specify what your app’s icon will look like on the toolbar and what will pop up when you click it. Just create a popup.html file to change what it looks like.
Under icons, leave it as 64, and link to the icon you want your app to have in the Chrome Store.
Under background, you list the scripts which run in the background of your extension. The file I have, background.js, just contains this:
chrome.app.runtime.onLaunched.addListener(
function () {
chrome.app.window.create('index.html');
}
);Simply put, the background script waits for the app to launch then creates index.html.
.ttf files are font formats, which you must specify under web_accessible_resources in order to use and load fonts in your extension.
Next is the most important part. We want this app to override our new tab page. That is, to load whenever we open a new tab. To do this we use this code:
"chrome_url_overrides": {
"newtab": "main/index.html"
},It means replace the new tab page with the app’s html file.
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["main/duma.js"]
}
]Under content_scripts, we have matches. The matches array specifies which pages the content script will be injected into. We’ve listed http://*/* and https://*/* which just means that the script will be injected into any page, no matter whether it is http or https.
Under js, we list the Javascript pages we want to use. I just have one JS page (the main page we were discussing in Part 1), but it’s good to use an array in case you want to add more pages later.
And that’s it for the manifest.json! Here is the file structure of my app:
- main
- images
- (all the icons and image files)
- scripts
- (Bootstrap, jQuery, etc)
- sheets
- duma.css
- duma.js
- index.html - background.js
- manifest.json
- popup.html
The app has been created! You’re now ready to take the Chrome Extension world by storm! Wait wait, first you need to publish the app…
Google has a really good guide on how to do this over here. You basically just need to zip the app and create a Developer Account. However, before you publish your first app, you have to pay a one-time $5 developer sign up fee.
Here is my Word of the Day app as a Chrome Extension. Now go off and create your own!
