O que são extensões?

Extensões são pequenos programas de software que personalizam a experiência de navegação. Com elas, os usuários podem adaptar a funcionalidade e o comportamento do Chrome de acordo com necessidades ou preferências individuais. Eles são criados com base em tecnologias da Web, como HTML, JavaScript e CSS.

Uma extensão precisa atender a um único propósito que seja estritamente definido e fácil de entender. Uma única extensão pode incluir vários componentes e uma variedade de funcionalidades, desde que tudo contribua para uma finalidade comum.

Uma captura de tela do ícone de uma extensão na barra do navegador

As interfaces do usuário precisam ser mínimas e ter intenções. Eles podem variar de um ícone simples, como a extensão Google Mail Checker mostrada acima, até a substituição de uma página inteira.

Os arquivos de extensão são compactados em um único pacote .crx, que o usuário faz o download e instala. Isso significa que as extensões não dependem do conteúdo da Web, ao contrário dos apps comuns da Web.

As extensões são distribuídas pelo Painel de desenvolvedor do Google Chrome e publicadas na Chrome Web Store. Para mais informações, consulte a documentação do desenvolvedor da loja.

Extensões do Hello

Comece a usar as extensões com este exemplo rápido de extensões do Hello. Comece criando um novo diretório para armazenar os arquivos da extensão ou faça o download deles na página de amostra.

Em seguida, adicione um arquivo chamado manifest.json e inclua o seguinte código:

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2
}

Todas as extensões exigem um manifesto, mas a maioria delas não tem muitas funções apenas com o manifesto. Para este início rápido, a extensão tem um arquivo pop-up e um ícone declarados no campo browser_action:

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Faça o download de hello_extensions.png aqui e crie um arquivo com o título hello.html:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

Agora, a extensão mostra hello.html quando o ícone é clicado. A próxima etapa é incluir um comando na manifest.json que ative um atalho de teclado. Esta etapa é divertida, mas não necessária:

{
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  },
  "commands": {
    "_execute_browser_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

A última etapa é instalar a extensão na sua máquina local.

  1. Acesse chrome://extensions no navegador. Você também pode acessar essa página clicando no menu do Google Chrome no canto superior direito da omnibox, passando o mouse sobre Mais ferramentas e selecionando Extensões.
  2. Marque a caixa ao lado de Modo de desenvolvedor.
  3. Clique em Load Unpack Extension e selecione o diretório da sua extensão "Hello Extensions".

Parabéns! Agora você pode usar sua extensão baseada em pop-up clicando no ícone hello_world.png ou pressionando Ctrl+Shift+F no teclado.

E agora?

  1. Siga o tutorial para iniciantes
  2. Leia a Visão geral.
  3. Leia o blog do Chromium para ficar por dentro das novidades
  4. Inscreva-se no grupo chromium-extensions.