RSS 2.0
2010.10.13. 13:45
Google Chrome Extensions - The first steps
In this tutorial we will go through the first steps of creating a simple Google Chrome Extension.
This extension will have a button in the browser and a popup with some content.
We need to create 3 files:
1. icon.png - I created a simple icon image, 32x32 in an image editor
2. manifest.json - description of the extension
3. index.html - content of the popup
Content of manifest.json:
{ "name": "Extension Example", "version": "0.1", "description": "Extension Example Description", "browser_action": {"default_icon": "icon.png", "popup": "index.html"}}
Content of index.html
<html><head></head><body><button onclick="alert('yes.');">Something</button></body></html>
Put these files in a folder and go to Google Chrome. Go to the controls menu and select Tools/Extensions (or alternately navigate to: chrome://extensions). Here you can see the installed extensions, plus there is a plus sign saying: "Developer mode". Click this sign and you will see three buttons to choose from. We are interested in the one saying "Load unpacked extension". Navigate to the folder you have your files in, and select it. Your extension is installed now, the icon image you selected should appear in your browser. Click it and you will see the content of the popup (index.html).
That's for the first steps.
