Results

See more...

How to Create Your First Google Chrome Extension?

This tutorial will walk you through creating a simple Google Chrome extensions that adds a button to a toolbar along the bottom of the browser window. First of all, you will need to be using either the developer channel of Chromium or else a recent trunk build. Once you're using one of those, follow these instructions to create and add a basic extension.

Google Chrome Hello World

  1. Create a folder somewhere on your computer to contain your work. For discussion, we'll assume the folder is located a c:\myextension, but it can be anywhere.
  2. Inside this folder, create a text file called manifest.json and put this in it:
  3. {
      "name": "My First Extension",
      "version": "1.0",
      "description": "The first extension that I made.",
      "toolstrips": [
        "my_toolstrip.html"
      ]
    }
  4. Add a text file to the folder called my_toolstrip.html, and put the following code in it:
  5. <div class="toolstrip-button">
      <span>Hello, World!</span>
    </div>
  6. Find your chrome shortcut (for example, right-click the Chrome icon on your desktop and choose Properties) and add the --enable-extensions and --load-extension flags to it:
  7. chrome.exe --enable-extensions --load-extension="c:\myextension"
  8. Restart Chrome. You should see your button in a new toolbar along the bottom of the browser window.
  9. Perhaps you would like it better if the button did something? Ok, create a new text file in the same place called hello_world.html, and put this code in it.
  10. Now change the code in my_toolstrip.html so that it looks like this:
  11. <div class="toolstrip-button" onclick="window.open('hello_world.html')">
      <span>Hello, World!</span>
    </div>
  12. Restart Chrome and click the button.
  13. Do a little dance, you earned it!

Note: --enable-extensions is only needed while the extensions system is in development and will be removed.

Contact Us for News Tips, Corrections and Feedback

Related posts

0 comments
Leave a message...