Writing a Chrome extension is incredibly easy! You don't need any special tools either, just a text editor and Chrome. Create a folder and make a manifest.json and an index.html file. Fill them in with the information below and you are ready to go!
Here is the most basic manifest.json file. This will create a button to click on that will appear next to all the other extensions. Technically, the browser_action is not required, but then there would be no button to click. That may be useful if you want an extension that does nothing but implement an omni-box option and doesn't have a button to click. In our example we want a button to click.
{
"manifest_version": 2,
"name": "Chrome Extension Template",
"version": "1.0",
"browser_action": {
"default_popup": "index.html"
}
}Here is another manifest.json example but with more options. You only need to put the contents from the file above. I am only showing this one below to give you an idea of some other possibilities. If you try to use this manifest it will fail unless you have all the resources like icon.png.
{
"manifest_version": 2,
"name": "Chrome Extension Template",
"description": "Extension base template ready for development",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
"default_popup": "index.html"
}
"options_page": "options.html",
"permissions": [
"http://example.com",
"notifications"
],
"omnibox": { "keyword" : "kw" },
}The default_popup value is the HTML file you want to open when you click on the extension button. The HTML file is nothing special. You can put in anything you normally would like links to JavaScript files, stylesheets, images, etc.
The contents of index.html can be as simple as this.
<!-- index.html -->
<html>
<body>
<h1>Hello</h1>
</body>
</html>You can also throw whatever other resources you want in to your folder. There are additional things that become available to you through JavaScript though. The Chrome API lets you hook in to things like creating tabs, reading URLs, and accessing bookmarks. Check the official API for more details.
To install your plugin go to Chrome's Settings->Extentions. Check the box to turn on Developer Mode. Then click on Load unpacked extension and choose the folder with your files. You can pack an extension in to a single file that can be shared as well, but is not necessary for developing. Once it is installed, a new icon will appear in your extension list, which is typically in the top right next to the menu. Without an icon, it uses the default icon of a puzzle piece. Just click it and it will open your index.html file.