Primeiros passos para o desenvolvimento de um plugin para o Chrome (Hello, World!)

Esse tutorial vai lhe guiar na criação de uma extensão simples para o Chrome. Você irá adicionar um ícone ao Google Chrome que, ao ser clicado, exibe uma página gerada automaticamente.

O ícone e a página irão se parecer com isso:

Você pode desenvolver extensões usando qualquer versão do Google Ghrome, no Windows, Mac ou Linux. As extensões que você desenvolver em uma plataforma devem rodar sem alterações em todas as plataformas suportadas pelo Chrome.

Criando e carregando uma extensão

A extensão que iremos acompanhar a criação aqui será uma Browser Action, que adiciona um botão a barra de ferramentas do Chrome cujo comportamento você poderá controlar.

  1. Crie uma pasta em algum lugar de seu computador para guardas o código de sua extensão.
  2. Dentre dessa pasta, crie um arquivo de texto chamado manifest.json, e cole nele o seguinte código:
    {
      "name": "My First Extension",
      "version": "1.0",
      "manifest_version": 2,
      "description": "The first extension that I made.",
      "browser_action": {
        "default_icon": "icon.png"
      },
      "permissions": [
        "http://api.flickr.com/"
      ]
    }
  3. Copie o ícone abaixo para a mesma pasta:
  4. Carregue a extensão.
    1. Abra a página de gerenciamento de extensões clicando no botão  e escolhendo Tools > Extensions.
    2. Se Developer mode tiver um sinal de mais próximo a ele, clique no sinal de mais para adicionar  a informação do desenvolvedor a página. O sinal de mais vira um sinal de menos e mais botões e informações aparecem.
    3. Clique no botão Load unpacked extension. Uma caixa de dialogo aparece.
    4. Nessa caixa de dialogo, navegue até a pasta de sua extensão e clique em  OK.

Se a extensão for válida. seu ícone irá aparecer próximo a barra de endereço, e informações sobre a extensão irão aparecer na página de extensões, como segue na tela abaixo.

Adicione código à extensão

Nesse passo, você fará com que a sua extensão faça algo além de exibir um ícone na barra de ferramentas.

  1. Edite o arquivo manifest.json para adicionar a seguinte linha:
    ...
      "browser_action": {
        "default_icon": "icon.png", "default_popup": "popup.html"
      },
      ...

    Dentro da pasta da extensão, crie dois arquivos de texto chamados popup.html e popup.js. Adicione o seguinte código a esses arquivos:

    popup.html

    <!doctype html>
    <html>
      <head>
        <title>Getting Started Extension's Popup</title>
        <style>
          body {
            min-width:357px;
            overflow-x:hidden;
          }
    
          img {
            margin:5px;
            border:2px solid black;
            vertical-align:middle;
            width:75px;
            height:75px;
          }
        </style>
    
        <!-- JavaScript and HTML must be in separate files for security. -->
        <script src="popup.js"></script>
      </head>
      <body>
      </body>
    </html>

    popup.js

    // Copyright (c) 2012 The Chromium Authors. All rights reserved.
    // Use of this source code is governed by a BSD-style license that can be
    // found in the LICENSE file.
    
    var req = new XMLHttpRequest();
    req.open(
        "GET",
        "http://api.flickr.com/services/rest/?" +
            "method=flickr.photos.search&" +
            "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
            "text=hello%20world&" +
            "safe_search=1&" +  // 1 is "safe"
            "content_type=1&" +  // 1 is "photos only"
            "sort=relevance&" +  // another good one is "interestingness-desc"
            "per_page=20",
        true);
    req.onload = showPhotos;
    req.send(null);
    
    function showPhotos() {
      var photos = req.responseXML.getElementsByTagName("photo");
    
      for (var i = 0, photo; photo = photos[i]; i++) {
        var img = document.createElement("image");
        img.src = constructImageURL(photo);
        document.body.appendChild(img);
      }
    }
    
    // See: http://www.flickr.com/services/api/misc.urls.html
    function constructImageURL(photo) {
      return "http://farm" + photo.getAttribute("farm") +
          ".static.flickr.com/" + photo.getAttribute("server") +
          "/" + photo.getAttribute("id") +
          "_" + photo.getAttribute("secret") +
          "_s.jpg";
    }
  2. Retorne a página de gerenciamento de extensão, e clique no botão Reload para carregar a nova versão da extensão.
  3. Clique no ícone da extensão. Um popup deve aparecer e exibir o conteúdo do arquivo  popup.html.

Deve se parecer com algo como isso:

Se você não conseguir ver o popup, tente executar as instruções novamente, seguindo elas exatamente. Não tente carregar um arquivo HTML que não esteja na pasta da extensão – isso não funciona!

E agora?

Aqui vão algumas sugestões para continuar se aprofundando no assunto:

  • O artigo Overview, que tem informações práticas e conceituais importantes
  • O artigo debugging tutorial, que inicia de onde esse artigo termina
  • A página de hospedagem (hosting), que fala as opções de como distribuir a sua extensão.