Chrome extension 101

A quick introduction to create your own Chrome Extension

Some tipps for development

You can use all the dev tools you know and love from web developing such as

• Gulp / Grunt
• Sass
• Bower

I'd also recommend to create a json linting task for your manifest.json. It's just enoying and time consuming to reload your extension just to realize you have some linting errors in your manifest.json

If you are using gulp, you could use:

• https://github.com/rogeriopvl/gulp-jsonlint

Examples

You can install the following extensions as follows:

1. Go to chrome://extensions
2. Activate the developer mode
3. Click on "load unpacked extension"
4. Select the folder where your extension under development lives

extension-01

Smallest possible extension

Go to extension

extension-02

Overwrite Chrome's default New Tab page. Add a icon.

Go to extension

extension-03

Example for a background script. It also shows how to use the Chrome Extension Api: We ask for the permission to access the system.cpu Api and show the number of processors of the CPU.

Go to extension

extension-04

browser_action example. Open a popup when icon is clicked and show processor information.

Go to extension

Resources

• Chrome Extension: https://developer.chrome.com/extensions
• Api Overview: https://developer.chrome.com/extensions/api_index
• Manifest: https://developer.chrome.com/extensions/manifest