jueves, 31 de octubre de 2013

Hello World en Chrome App

Hello World en Chrome App

  • Crear el directorio helloworld y colocarse ahí
  • Crear manifest.json:
    {
      "manifest_version": 2,
    
      "name": "Hello World",
      "description": "Hello World Chrome Extension",
      "version": "1.0",
    
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
      }
    }
    
  • Crear popup.html
    <!doctype html>
    <html>
    <head>
      <title>Hello World</title>
    </head>
    <body>
    <script src="popup.js"></script>
    </body>
    </html>
    
  • Crear popup.js
    document.addEventListener('DOMContentLoaded', function() {
      var h = document.createElement('h1');
      var greeting = document.createTextNode('Hello World!');
      h.appendChild(greeting);
      document.body.appendChild(h);
    });
    
  • Crear / colocar icon.png. Un archivo de 19px por 19px
  • Instalar el app localmente. Entrar al menú de Chrome, Tools, Extensions, marcar el check Developer mode, y usar el botón Load unpacked extension... para cargar el directorio helloworld.