Google chrome extensions looks so hard to create but they're not. If you've ever built a web page, you should feel right at home with extensions pretty quickly. You can create a extension with basic HTML/CSS/JavaScript knowledge. You don't need be an expert for this tutorial.
In this tutorial, I'll discus about create a full chrome extension, from it's beginning to end. I'll also explain every single file of our extension.
Files We Need:
In this whole process, we need five files, which are following:
- manifest.json: JSON-formatted table of contents, containing properties like your extension's name and description, its version number, and so on.
- popup.html: This will be stuff inside the popup window.
- popup.js: This one is optional. In this file we'll store all of our JavaScript, if you're using.
- icon.png: This will be displayed next to the Omnibox, waiting for user interaction.
- logo.png: This will be displayed in your chrome's extension tab as extension logo.
Create a new folder on your desktop. We'll use this folder to save our files. Time to explain each file:
manifest.json:
This will be containing properties like your extension's name and description, its version number, and all. This file will declare to Chrome what our extension is going to do. Here is our manifest.json file (You can create this on notepad just like html files):
{
"manifest_version": 2,
"name": "BWidgets",
"description": "Making Blogging Better.",
"version": "1.0",
"icons": { "128": "logo.png" },
"homepage_url": "http://www.bwidgets.com",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
The first line of above code declares that we're using version 2 of the manifest file format. Version 1 is old and not that awesome, according to Google.
The next block defines the extension's name, description, version, icon, and homepage url. This will be used in both Chrome browser and Chrome webstore.
Final block is pointing to two files, which are our extension's icon and popup window. icon.png will be displayed next to the Omnibox. It's just a 19px-square PNG file. popup.html will be stuff inside our extension, which is basically some HTML and CSS.
popup.html:
This will be stuff inside the popup window. We're going to put all of our CSS and HTML into this file. Below is basic mark-up of this file:
<!doctype html>
<html>
<head>
<title>BWidgets</title>
<style>
body {
min-width: 357px;
overflow-x: hidden;
}
Add Your CSS Here
</style>
<script src="popup.js"></script>
</head>
<body>
Add Your HTML Here
</body>
</html>
As shown above, in our HTML file, we are going to put all of our CSS styling between <style> ... </style> tags.
JavaScript and HTML must be in separate files. So, instead of adding JavaScript directly, we'll point to our .js file. This step is option, only if you're using JavaScript.
Last but not the least, we'll add all of our crappy HTML code between <body> ... </body> tags. Now just save this file with your manifest.json file.
popup.js:
As note above, JavaScript and HTML must be in separate files. So we pointed this file on our popup.html file. You can add your JavaScript in this file, if you're using. If you're not using JavaScript in this file, then we don't need this.
icon.png:
This will be displayed next to the Omnibox, waiting for user interaction. It's just a 19px-square PNG file. You can easily create this with Photoshop or Gimp.
logo.png:
This will be displayed in your chrome's extension tab as extension logo. This will be a 128x128 PNG file, because we added this size on your manifest.json file.
Put all of these five files in a folder. Let's just name is "Hardeep Asrani is great." Now it's time for us to see this this extension in action.
Load The Extension:
Chrome Web Store extensions are packaged up as .crx files, which is great for distribution, but not so great for development. Chrome gives us a quick action to load our extension for testing.
- Click on Google Chrome Menu > Setting > Extension
- Ensure that the Developer Mode checkbox in the top right-hand corner is checked.
- Click Load unpacked extension… to pop up a file-selection dialog.
- Navigate to the directory in which your extension files live, and select it.
If the extension is valid, it'll be loaded up and active right away! If it's invalid, an error message will be displayed at the top of the page. Correct the error, and try again.
Pack The Extension:
You can also pack your extension as .crx file, by using following simple steps:
- Click on Google Chrome Menu > Setting > Extension
- Ensure that the Developer Mode checkbox in the top right-hand corner is checked.
- Click Load pack extension… to pop up a file-selection dialog.
- Navigate to the directory in which your extension files live, and select it.
You'll get a .crx file of your extension.
What's Next?
Hope this tutorial helped you. Now, you can publish your extension to Chrome Web Store
by clicking here. Publishing your extension is free, but you have to pay a one time $5 developer fee. Don't forget to leave your comments.
