Criando uma extensão para Google Chrome

[Owner 7]

Fazer uma extensão para um navegador não é difícil. Ainda mais para Chrome que usa linguagem html para a criação dessas. Só basta um conhecimento básico dessa plataforma.

Vamos dividir o desenvolvimento em algumas etapas:

 

 

• Entender o arquivo Manifest.json
  
• Criando Popup
  
• Como adicionar sua extensão ao navegador
  

 

 

Basicamente, os navegadores de hoje bloqueiam várias funções para extensões, aplicativos e outros por questão de segurança, ou seja, não deixar uma extensão manipular todo o navegador. Por isso deve-se entender das permissões que você terá que solicitar ao usuário para que a extensão funcione.

 

 

Arquivo Manifes.json

 

Esse arquivo é uma introdução à sua extensão. Pois é ela que indica o ícone, nome, versão, site e afins da mesma. É nela que você seta as páginas como Popup e Options, e também as Permissions, como citei acima.

Indico que use um editor básico como o NotePad++, pois ele não lhe entrega código pronto, e te ajuda a aprender mais.

Nesse arquivo será posto as informações básicas primeiro:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Logo abaixo você acrescentar as ações, ou seja, indicar cada páginas padrões. Indique cada uma no local que o arquivo manifest.json esta. Caso crie uma pasta e coloque o arquivo lá, deve ser editado e indicado, pois depois ele não encontrará.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

O Icone pode estar em qualquer formato. Apesar tome cuidado com o tamanho, tente manter o padrão: 18x18, 48x48, 128x128 e assim por diante, nesse anterior, deve ser setado o menor, ou seja, 18x18. Esse que estamos indicando será o ícone que aparece no lado da barra de endereço. O ícone menor, logo vamos indicar os outros tamanhos:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Vê? Deve ser seguido os tamanhos. Não tente colocar um ícone para todos.

E para finalizar o Manifest.json, colocamos as permissões que pediremos ao usuário:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Deve-se colocar a versão do manifest, pois se não compilará. E a permissão que usaremos aqui será básica, que é acesso a linhas http e https.

Você pode conferir todas as permissões que o Google Chrome disponibiliza no próprio site deles para desenvolvedores.

 

Seu arquivo Manifest está pronto. Salve como Manifest.json e coloque em uma pasta.

 

 

Criando um Popup

 

Popup é a janela que abre quando se clica no ícone da extensão. Ele é feita toda em HTML, ou seja, não há segredo. O que faremos aqui será somente explicativo. Como pedimos somente acesso a links, vamos criar uma extensão de acesso a links rápidos. Que vão funcionar como atalhos. Então depois criaremos um design para a página com css. Eu usei o arquivo jquery para liberar alguns funções. Vocês podem encontra-lo na internet mesmo. O Js bordertable é somente um efeito que eu adicionei, não muda nada.

A página que vou usar será essa:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Salve essa página como Popup.html, pois no manifest eu coloquei como Popup_Default este nome. Então deve ser seguido assim.

E então podemos fazer o design com o css. Vou fazer em um arquivo separado e depois chama-lo no html da página, como eu fiz acima

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Essa linha chama e aplica o seu arquivo css na página. Vou fazer um css simples.

 

Preste atenção no code body em que eu usei width e determinei o tamanho da largura do popup. Isso serve para ficar sempre um tamanho constante, pois o Chrome faz variar esse tamanho caso não seja determinado.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Salve esse css como Style.css, pois como disse acima, eu o chamei assim na página, caso tenha alguma diferença, o Estilo não funcionará.

Depois de ter salvo tudo corretamente, você pode abrir seu Popup em um navegador, aliás, ele é um arquivo html e pode ser aberto normalmente como uma página.

Talvez explicando de um jeito mais facil para entendimento, esse Popup serve como um frame, ou seja, naquela janela quando aperta o ícone da extensão, será carregada a página que você desenvolveu só que atendendo algumas exigências do Chrome, como largura e altura.

Agora, devemos fazer a extensão ser reconhecida pelo chrome e assim rodar normalmente. Entenda bem como funciona abaixo.

 

Essa extensão por final, ficará assim:

 

 

Pode ser baixada para estudos:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

 

 

 

 

Instalando de forma offline

 

Bem, o Google Chrome tem uma política muito rígida sobre segurança e usuário. Logo, ele o bloqueia qualquer tipo de extensão seja instalada offline no navegador, ou seja, aquelas extensões que não estão na Loja do WebChrome será desinstalado quando reiniciado.

Mas isso só acontece quando você compila/comprime sua extensão para o formato CRX. Que é o formato de extensão para o chrome.

Logo, existe uma forma de instalação dessas extensões de forma que ela não seja desinstalada ao reiniciar. Mas esse método faz com que todos os seus arquivos fique vulnerável para aqueles que baixarem e então têm poderes de edita-los. É uma forma alternativa para quem não quer pagar à Google a hospedagem na Loja.

Para fazer essa instalação:

 

(Obs: A pasta não pode ser movida depois, senão, terá que instalar novamente).

 

1. Abra as Extensões . Clique aqui para abrir se você estiver no Chrome.
   
2. Habilite a opção Modo do desenvolvedor.
   
3. Clique em Carregar extensão expandida ...
   
4. Será aberta uma janela de Procurar pasta, vá até o local onde esta a pasta com os arquivos e a selecione, clique em OK.
   

 

Pronto. Ao lado do campo de endereço aparecerá o seu ícone, clique para abrir o Popup.

Detalhe: Ao reiniciar seu navegador, uma mensagem irá aparecer como esta:

 

 

Isso acontece por ser uma extensão externa, ou seja, não esta na loja do Chrome. Apenas ignore apertando em Cancelar.

A outra opção é pagando 5 doláres para o Google e hospedar na loja WebChrome. Nela os arquivos não são vulneráveis, somente o CRX.

 

É isso, é o básico para criação de uma extensão mais elabora, sempre que deve ter solicitado permissões sempre que pedir algo que o chrome bloqueie. Pois, as vezes, algumas funções não funcionam, mas com algumas permissões, você consegue desbloquear as funções.

 

 

Abraços.

[Dotfile 0]

Interessante, eu tinha pensado em postar ainda bem que esperei um pouco antes de escrever o tópico haha.

 

Só estou quebrando a cabeça pra fazer um clipboard na extensão pois os chrome atualmente não está dando suporte por questões de segurança, se não fosse isso teria terminado minha extensão de reports.

 

Enfim, muito bom owner :rock:

[Owner 7]

Interessante, eu tinha pensado em postar ainda bem que esperei um pouco antes de escrever o tópico haha.

 

Só estou quebrando a cabeça pra fazer um clipboard na extensão pois os chrome atualmente não está dando suporte por questões de segurança, se não fosse isso teria terminado minha extensão de reports.

 

Enfim, muito bom owner :rock:

 

É só usar permissão "clipboardRead" e "clipboardWrite", é bem complicado. Demorei muito pra conseguir isso. Mas só dar uma pesquisada que aqui no fórum mesmo tem um tutorial explicando Dot.

 

Abraços

[SoftwareS 2.015]

Sem comentários amigo você fez um excelente trabalho sem duvidas e inclusivel já até deixei meu like parabêns amigo continue assim :)

[rnxn 2]

Esse amor pelo hex #d73939 vai longe, nasss.

Achei ofensivo construir a extensão somente com html, css e javascript enquanto no firefox o desenvolvedor tem que se virar do avesso.

De qualquer forma, tutorial muito bem detalhado e com uma linguagem fácil de entender, parabéns. Acho que seria uma boa começarmos a trazer esse tipo de conteúdo pra esta área, normalmente a primeira coisa que pensam sobre o assunto é "criar sites" e acho que seria interessante abrir a cabeça do pessoal e mostrar que pode ser feito bem mais com html e javascript.

 

Por off, próximo desafio: Criar uma extensão pra navegadores Opera, topa?

 

Só estou quebrando a cabeça pra fazer um clipboard na extensão pois os chrome atualmente não está dando suporte por questões de segurança, se não fosse isso teria terminado minha extensão de reports.

 

Eu também pensei que não fosse possível até que o Owner surgiu no skype dizendo que havia criado uma extensão onde o texto era copiado para o clipboard, muito mito. Depois de algumas pesquisas deu pra entender como funciona essa segurança dos browsers não permitirem usar javascript para salvar informações no clipboard. Resumidamente, não é permitido que sites, páginas, etc usem esse recurso, mas extensões tem total liberdade - no firefox, você pode usar até o banco de dados do navegador para armazenar informações.

 

PS: Se não me engano tem uma forma de copiar info pro clipboard no Internet Explorer, mas nos outros navegadores é bloqueado.

[Dotfile 0]

Esse amor pelo hex #d73939 vai longe, nasss.

Achei ofensivo construir a extensão somente com html, css e javascript enquanto no firefox o desenvolvedor tem que se virar do avesso.

De qualquer forma, tutorial muito bem detalhado e com uma linguagem fácil de entender, parabéns. Acho que seria uma boa começarmos a trazer esse tipo de conteúdo pra esta área, normalmente a primeira coisa que pensam sobre o assunto é "criar sites" e acho que seria interessante abrir a cabeça do pessoal e mostrar que pode ser feito bem mais com html e javascript.

 

Por off, próximo desafio: Criar uma extensão pra navegadores Opera, topa?

 

 

 

Eu também pensei que não fosse possível até que o Owner surgiu no skype dizendo que havia criado uma extensão onde o texto era copiado para o clipboard, muito mito. Depois de algumas pesquisas deu pra entender como funciona essa segurança dos browsers não permitirem usar javascript para salvar informações no clipboard. Resumidamente, não é permitido que sites, páginas, etc usem esse recurso, mas extensões tem total liberdade - no firefox, você pode usar até o banco de dados do navegador para armazenar informações.

 

PS: Se não me engano tem uma forma de copiar info pro clipboard no Internet Explorer, mas nos outros navegadores é bloqueado.

 

Então da pra usar a API de localstorage.

 

Vou ver a documentação do google pra ver se consigo usar o clipboard.

[Owner 7]

rnxn, o amor por #d73939 será eterno rs.

 

Então da pra usar a API de localstorage.

Vou ver a documentação do google pra ver se consigo usar o clipboard.

Dot, para o chrome não é localstorage, são as permissões "clipboardRead" e "clipboardWrite".

[Dotfile 0]

rnxn, o amor por #d73939 será eterno rs.

 

 

Dot, para o chrome não é localstorage, são as permissões "clipboardRead" e "clipboardWrite".

 

Eu sei. O localstorage é pra fazer o armazenamento de informações.

[Owner 7]

Eu sei. O localstorage é pra fazer o armazenamento de informações.

Sim, mas mesmo assim não funcionará se você não usar essas permissões.

[rnxn 2]

Owner, a API Local Storage não está relacionada ao clipboard. É como se fosse um 'cookie do futuro', qualquer página pode armazenar informações no browser client por essa API. Um exemplo bem simples pra mostrar:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Clique no botão central antes de depois de ter salvo a informação para ver a mensagem do alert.

 

Edit:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

.

[Kaiser Chief 0]

Muito bom! aprendi aqui direitinho, parabéns pelo tutorial

[Owner 7]

To ligado como funciona o localstorage. Eu o uso para salvar informações numa função da minha extensão.

Imagino que você esta dizendo que irá mandar o texto para a storage e então copiar. Mas pra funcionar, as permissions tem que estar lá.

Na primeira vez eu usei uma textarea, e depois a storage, que faz ficar mais "inteligente e menos cambiara". Como no caso de textarea, é só usar uma função que dê foco na caixa, selecione todo o texto e então, por fim, copiar.

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

E para essas execCommand funcione, a permissão write e read devem estar no manisfest.json. Independente se estiver salvo na localstorage.

[rnxn 2]

É ai que você começa a perceber que desenvolver para o chrome tem suas dificuldades também :v

[VmsMama? 0]

Tem como usar incorporando o Facebook , por exemplo , quando eu receber uma notifação a extensão já alerta?

[rnxn 2]

Tem como usar incorporando o Facebook , por exemplo , quando eu receber uma notifação a extensão já alerta?

 

Funciona normalmente, basta ver como trabalha a api do facebook.