Google Chrome is the most widely used browser, and for good reason: it’s fast, reliable, has a great set of developer tools and to top it all off, it has literally hundreds of extensions in the Google Store you can take advantage of.
The other amazing thing is that you can build your own extensions using just HTML, CSS and JavaScript, so it’s not like you need to even learn any new languages. You already know this, you only need to figure out how to apply it to Chrome.
There are times you need something specific in your browser to improve the way you work or simply the way you browse the Internet and a custom Google Extension could be the way to go.
ABOUT CHROME EXTENSIONS
The first thing you need to know is that there are two types of extensions we can build:
- Page actions, actions that are page dependent
- Browser actions, actions that are not page dependent
Take a look at this image:
The first icon in the address bar, the RSS icon, is a page dependent action because it only appears on pages with which it’s compatible. This is a page action.
The first icon outside the address bar is a camera, this represents an extension that takes screen shots. It’s always available and is considered not page dependent. This is a browser action.
In this article we’ll create a simple browser action.
CREATING AN EXTENSION
The first thing we need to do is create a root folder for our extension and add a manifest.jsonthat contains a JSON object with the characteristics of our extension:
{
“name": "BrowserAction",
"version": "0.0.1",
"manifest_version": 2,
}
This is the bare bones of your file. We then need to add the background pages of your extension, these pages will be the ones with the logic running in the background of our extension:
"background": {
“scripts”: [“main.js”, "script.js"]
}
We also need to pass the browser_action object, this is where we set the basic UI of our extension, since this is a browser action when you click the icon in the toolbar the most likely thing to happen is to have a pop up open, this object is where we declare the source of that pop up, the icons the user will be seeing in the front end, and the title:
"browser_action": {
“default_icon”: “icon.png”,
“default_title”: "The Title",
"default_popup": "popup.html"
}
If we add this to our manifest file it will look something like:
{
"name": "BrowserAction",
"version": "0.0.1",
"manifest_version": 2,
"background": {
“scripts": [“main.js”, "script.js"]
}
"browser_action": {
"default_icon": "icon.png",
"default_title": "The Title",
"default_popup": "popup.html"
}
}
After we have done this all that is left to do is create the actual extension and here you have absolute freedom.
THE EXTENSION
For the purpose of this article all I will do is create a simple jQuery color picker using the spectrum JavaScript plugin, so my popup.html looks like:
<head>
<title>Simple Extension</title>
<link rel='stylesheet' href='spectrum.css' />
</head>
<body>
<section>
<input type=‘text' class="picker"/>
<em id=‘picker-log'></em>
</section>
<script src="jquery.js"></script>
<script src='spectrum.js'></script>
<script src="popup.js"></script>
</body>
As you can see, all I really did was add a section that contains the two necessary elements to get spectrum working and then called all the files like jQuery, the spectrum js file, the CSS file and also our popup.js file where we will place the code to initialize spectrum.
Our JavaScript file is only 6 lines long because of the simplicity of this plugin:
$(".picker").spectrum({
color: "#fff",
change: function(color) {
$("#picker-log").text("The Color is: " + color.toHexString());
}
});
(This code is just an example, it doesn’t touch the Chrome API’s, it’s merely a demonstration of how you can use simple HTML/CSS and JavaScript to create virtually anything you want and place it in your Chrome browser.)
TEST THE APPLICATION
You have your simple application created, but it’s probably something personal that you created to help your workflow and you don’t want to upload it to the Google Store.
So to test locally, firstly go to chrome://extensions and make sure Developer Mode is enabled. If it is, you can click load unpacked extension or drag the folder from your desktop and your application will show up immediately on the toolbar.
This only works in developer mode. If you wish to upload your extensions to the Google Store you also need to Pack your extension because the Chrome Store only accepts extensions that come in .crx files and that is also how you usually download the extensions.
Post a Comment