core error

Creating extensions for Chrome

Posted on: 17/08/2011


In this sample we will create a button to the right of the address bar which will display a fancy popup showing a clock

  1. Create a folder in your hard drive containing two files: manifest.json and popup.html
  2. Add into manifest.json all the information related to your extension. For example: 
      "name": "My First Extension",
      "browser_action": {
        "default_icon": "icon.png",
        "popup": "popup.html"
  3. Add the logic of the extension inside the popup.html file. You can use regular HTML, javascript and CSS. For Example:
    <script type="text/javascript">
       //javascript code to display a clock inside the div
  4. Go to Chrome, click on the    icon, go to Tools > Extensions and load  your unpacked extension from the folder you created
Using Chrome API
Going to this url you can read about all the modules and methods that you can use to enrich your application. For example:
  • chrome.browserAction.setPopup(object details) will let you choose which HTML page to show in the popup (in case you provided more than one)
  • chrome.tabs.executeScript(null, object details) will inject javascript code into the page currently showing in the active tab
  • chrome.tabs.update(null, object updateProperties) will change the properties of the active tab. For example, the url displayed on it

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s


  • None
  • Justin Cooney: Great comic, this made me laugh!
  • Justin Cooney: Interesting, I didn't know about the Google App Engine, I'm glad I found your article on it!


%d bloggers like this: