Chrome Extension “Post to Buzz”: The basics

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

In this quick tutorial, we are going to start to build the super simple <a href="https://chrome.google.com/extensions/detail/dnkpofojlncaepnglinmdjkfolgabldj">Buzz This Chrome Extension</a>. 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 <a href="http://code.google.com/chrome/extensions/manifest.html">manifest.json</a>. 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: <div class="CodeRay"> <div class="code"><pre>{ "name": "Buzz This", "version" : "0.0.0.1" }</pre></div> </div> 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 <a href="http://code.google.com/chrome/extensions/browserAction.html">'browser_action'</a> as follows: <div class="CodeRay"> <div class="code"><pre>{ "name": "Buzz This", "version" : "0.0.0.1", "browser_action": { "default_icon" : "buzz-little.png", "default_title" : "Post to Google Buzz" } }</pre></div> </div> 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 <a href="http://code.google.com/chrome/extensions/background_pages.html">“background page”</a>; 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: <div class="CodeRay"> <div class="code"><pre>{ "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" }</pre></div> </div> Now lets add some code to the background.html page, so that it actually does something. <div class="CodeRay"> <div class="code"><pre><html> <head> <script> chrome.browserAction.onClicked.addListener(function (t) { alert(t.url); }); </script> </head> </html></pre></div> </div> 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 <a href="http://code.google.com/apis/buzz/buttons_and_gadgets.html#hyperlink_api">create html widgets</a> 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 <code>chrome.tabs</code> <a href="http://code.google.com/chrome/extensions/tabs.html">API</a> and this requires special permission, so the first thing to do is ask for it in the manifest. <div class="CodeRay"> <div class="code"><pre>{ "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"] }</pre></div> </div> 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. <div class="CodeRay"> <div class="code"><pre><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></pre></div> </div> 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.

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

Print Share Comment Cite Upload Translate Updates

APA

Paul Kinlan | Sciencx (2010-11-30T00:00:00+00:00) Chrome Extension “Post to Buzz”: The basics. Retrieved from https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/

MLA

" » Chrome Extension “Post to Buzz”: The basics." Paul Kinlan | Sciencx - Tuesday November 30, 2010, https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/

HARVARD

Paul Kinlan | Sciencx Tuesday November 30, 2010 » Chrome Extension “Post to Buzz”: The basics., viewed ,<https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/>

VANCOUVER

Paul Kinlan | Sciencx - » Chrome Extension “Post to Buzz”: The basics. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/

CHICAGO

" » Chrome Extension “Post to Buzz”: The basics." Paul Kinlan | Sciencx - Accessed . https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/

IEEE

" » Chrome Extension “Post to Buzz”: The basics." Paul Kinlan | Sciencx [Online]. Available: https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/. [Accessed: ]

rf:citation

» Chrome Extension “Post to Buzz”: The basics | Paul Kinlan | Sciencx | https://www.scien.cx/2010/11/30/chrome-extension-post-to-buzz-the-basics/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts