In this quick tutorial, we are going to start to build the super simple Buzz This Chrome Extension.
At the end of each tutorial, you will have something that works.
In this tutorial, we are going to create the basic manifest,
First thing to do is to create a folder where you are going to store your extension. I am not going to tell you how to do that, you should know.
Inside this folder, create a file called manifest.json. This manifest is the true heart of your extension. Without it, you have nothing that Chrome can load and work with. The manifest simply defines some basic information about your extension including it's name, description and version number.
In the manifest add the following:
{
"name": "Buzz This",
"version" : "0.0.0.1"
}Thats it. Honest. If you visit chrome://extensions, click 'Developer Mode' and click 'Load unpacked extension…' and select the folder with your manifest in, you will see that it loads….. Although it doesn't do anything.
Lets add a little something, so at least I can show you something cool (ish).
This extension wouldn't be much without a button that was alway visible to the user so that they can click on it to post the current page to Buzz. So lets do that.
Lets go back to the manifest.json, and add a section called 'browser_action' as follows:
{
"name": "Buzz This",
"version" : "0.0.0.1",
"browser_action": {
"default_icon" : "buzz-little.png",
"default_title" : "Post to Google Buzz"
}
}This is pretty simple, and self explanatory. We are just giving the browser_action a tooltip title and a nice icon (19x19px); note, the icon must be included in the directory of the manifest.
Visit chrome://extensions, find your extension and click re-load. Boom! You now have a nice little icon in the top right corner of the browser. Click on it and see what happens! Nothing? Thats correct, no code is hooked up yet.
Lets make it do something when the user clicks on it.
We need to do two things now. First we need to create a “background page”; the background page allows you to add logic to your extension and is considered the 'brains' of your extension. We also need to link to the background page from the manifest.json file.
Add a file named what ever you want to your extension directory, and then modify the manifest so it looks like:
{
"name": "Buzz This",
"version" : "0.0.0.1",
"browser_action": {
"default_icon" : "buzz-little.png",
"default_title" : "Post to Google Buzz"
},
"background_page": "background.html"
}Now lets add some code to the background.html page, so that it actually does something.
<html> <head> <script> chrome.browserAction.onClicked.addListener(function (t) { alert(t.url); }); </script> </head> </html>
This is great, we now have user interaction. If you reload your extension and click it, it tells you the url that the user is currently on. But still it doesn't do anything that useful.
Now lets make it useful. We are going to use the API exposed by the Buzz system, to allow you create html widgets and hack it a little so that we can open a new tab to allow the user of the extension to post to Buzz. However, to open a new tab you need to use the chrome.tabs API and this requires special permission, so the first thing to do is ask for it in the manifest.
{
"name": "Buzz This",
"version" : "0.0.0.1",
"browser_action": {
"default_icon" : "buzz-little.png",
"default_title" : "Post to Google Buzz"
},
"background_page": "background.html",
"permissions": ["tabs"]
}The Chrome Extension sub-system has a robust security model that requires you to declare upfront the systems (such as tabs) that your extension will need access to. This is designed to allow the user to understand the implications of installing your extension and to stop extensions from accessing information without the users consent. Luckily the whole process is as simple as specifing the permissions you require in the 'permissions' array.
Now that you have access to the 'tabs' privilege, we can now open tabs, so lets modify our background page.
<html> <head> <script> chrome.browserAction.onClicked.addListener(function (t) { chrome.tabs.create( {"url" : "http://www.google.com/buzz/post?url=" + encodeURI(t.url) }); }); </script> </head> </html>
That's pretty cool, one line of extra code to call the chrome.tabs.create API and we have our first version of the extension working.
In the next tutorial I will add in the ability to get the stats for the number of buzzes for the current URL. This will show you how to do Cross domain request and also show you how to interact with the browser_action.
I lead the Chrome Developer Relations team at Google.
We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.
Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.
I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.
I'm trialing a newsletter, you can subscribe below (thank you!)
