In just a few minutes, you can can have a working understanding of how to create a custom Chrome extension from scratch. In this walkthrough, you will create a simple extension for Chrome, when clicked will show “Hello, World!”

Ready? Start!

  1. Create a new folder called my-chrome-project (arbitrary name)
  2. In that folder, create a file strictly called manifest.json. This is the minimum required file. Add the following code to the file:

     {
       "name": "Hello World",
       "version": "1.0",
       "description": "My first Chrome extension.",
       "manifest_version": 2,
       "browser_action": {
         "default_icon": "my-icon.png",
         "default_popup": "my-popup.html"
       }
     }
    
  3. In the same folder, create and add a 48x48 PNG called my-icon.png.
  4. In the same folder, create a file called my-popup.html and type “Hello World” in the file.
  5. All the code is now done for the “hello world” project. Now, open Chrome and type chrome://extensions into the omnibar.
  6. On the Extensions page that appears, enable “Developer mode”.
  7. Click “Load unpacked extension…” and navigate to the folder that was created on step one.

Congrats! You have created your first Chrome extension. The icon.png button should appear at the top-right, and when clicked will show the popup.html. Share this straightforward walkthrough if you found it useful. More quick walkthroughs coming soon. :)

For more information, you can check out my “Chrome Extensions Cheat Sheet” on Github.

Now a quick word from a tech company who helps support me and this site: