How to build a Chrome extension, Part 1: Basics

image

Building Chrome extensions is super-easy. I’ve already made two: ChromeMilk and Postponer. I wanted so share my method of building extensions, so I’m going to write a series of posts. This one will cover the basics on how to set up a good development environment and how to begin writing the extensions.

1. Install Chrome dev channel

The Chrome dev channel has the latest technologies and the best developing tools. Install it and use it to debug extensions.

2. Get a text editor to write the code in

If you’re really Spartan you can use regular Notepad. I use Notepad2 because it’s light but has syntax highlighting and other features. There are many available, so take your pick.

3. Learn HTML, CSS and JavaScript

Chrome extensions are made using the same techniques used to make web pages. HTML for content, CSS for presentation and JavaScript for behavior and interaction. I highly recommend the tutorials at W3Schools if you are just starting out. If you’ve been building web pages for a while, you can probably skip this step.

4. Follow the official Getting Started tutorial

Google has a very good tutorial for writing your first extension. This tutorial shows you how to build a simple extension and test in on your browser. After this, you should be ready to build your own extension!

5. Now what?

Now that you know how to build a basic Chrome extension, it’s time to let your imagination run wild! Read the extension documentation and see what you can build with it. Start small and don’t be afraid to be wrong. When your extension is ready, you can submit it to the Chrome Extensions Gallery so that everyone can use it!

I’ll be writing more posts on this, so stay tuned.

Do you have any tips for building Chrome extensions? Have your made an extension after following these steps? What other resources do you use to make extensions? Leave a comment and tell us all about it!

  • Aditya

    I love Chrome… Thanks for the tutorial.. I've made up my mind to be good at programming…
    Learning JAVA right now..

  • Pingback: uberVU - social comments

  • Pingback: Cómo hacer una extensión de Chrome, Parte 1: Básicos | Hogargeek

  • http://www.argado.com Argado

    Good articel …
    I want to try first!

  • Lorry

    I have a problem with step 4, when i try to upload the manifest.json (notepad-file) Google Chrome always shows a message with the text:
    “Could not load extension from C:UsersLorryDesktopgooglechromeextension. Manifest-file is missing
    or unreadable.”

    Can you tell me a solution to my problem?

    Thank You

    • guest

      By default Windows hides the file extensions of your files so that “file.txt” appears just as “file”. So when you save a file as manifest.json from notepad Windows tacks on a secret “.txt” to it because it thinks that “manifest.json” is just the NAME of the file. To see the extensions of your files see below:

      http://windows.microsoft.com/en-US/windows-vista/Show-or-hide-file-name-extensions

      And then just edit the file name by removing the “.txt” and hopefully that works for you.

  • Lorry

    I have a problem with step 4, when i try to upload the manifest.json (notepad-file) Google Chrome always shows a message with the text:
    “Could not load extension from C:UsersLorryDesktopgooglechromeextension. Manifest-file is missing
    or unreadable.”

    Can you tell me a solution to my problem?

    Thank You

  • http://twitter.com/hotnerdnews Single Malt

    What made you choose disgus over say intensedebate or echo for comment systems?

  • Anonymous

    thanks..mind if i add you email
    i have a few things i want to ask regarding chrome extensions.
    are the the same format as Firefox extensions.?

  • http://webreignited.com/ Manendra

    Thank Q for the tutorial. I am planning to learn how to create a chrome extension and the link which you provide here are really use full. 

  • Anonymous

    Thanks Juliana.. Your readers might be interested in reading a similar post by me at http://www.dahotre.com/programmings/chrome-extension-tutorial/

  • Anonymous

    wffew

  • Anonymous
  • hugo lpz

    Juliana, as of May 2012, your tutorial is still the best I found online for my Master thesis ! Thanks you : )
    (You get full citations, as an academic !)

  • Muhammad Irfan

    good but let see these free download wordpress premium themes
    http://freewppremiumthemes.blogspot.com