Se você está se perguntando como fazer uma extensão Chrome, a extensiondocumentation do Chrome é ótima para implementações básicas. No entanto, para usar mais advancedfeatures requer um monte de pesquisa no Google e Stack Overflow. Vamos fazer uma extensão cromática intermediária que interage com a Página: ela vai encontrar o primeiro link externo na página e abri-lo em uma nova página.Manifesto.json

o manifesto.o json file diz ao Chrome informações importantes sobre o yourextension, como o seu nome e as permissões de que necessita.,

a extensão mais básica possível é uma pasta com um ficheiro manifest.json.Vamos criar um diretório e coloque o seguinte JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

esse é o mais básico possível manifest.json, com todos os campos necessários filledin. O manifest_version deve ser sempre 2, porque a versão 1 não é suportada a partir de janeiro de 2014. Até agora a nossa extensão não faz absolutamente nada,mas vamos carregá-lo no cromado de qualquer maneira.,

carregue a sua extensão no Chrome

para carregar a sua extensão no Chrome, abra chrome://extensions/ no seu navegador e carregue em “Modo de desenvolvimento” no canto superior direito. Agora carregue em” Carregar a extensão por pacotes… ” e seleccione a pasta da extensão. Deve agora ver a sua extensão na lista.

Quando você alterar ou adicionar código em sua extensão, basta voltar para esta página e carregar a página. O Chrome vai recarregar a extensão.

Content scripts

a content script is “a JavaScript file that runs in the context of web pages.,”Isto significa que um script de conteúdo pode interagir com páginas web que os browservisits. Nem todos os arquivos JavaScript em uma extensão Chrome podem fazer isso; veremos porquê mais tarde.

Vamos adicionar um conteúdo script chamado content.js:

// content.js alert("Hello from your Chrome extension!")

Para injetar o script, nós precisamos contar nossa manifest.json arquivo sobre ele.,

Adicionar isso ao seu manifest.json arquivo:

"content_scripts": , "js": } ]

Isto diz o Chrome para injetar content.js em cada página que visita utilizando o thespecial <all_urls> padrão de URL. Se queremos injectar o script em apenas algumas páginas, podemos usar padrões de correspondência. Aqui estão alguns exemplos de valores para"matches":

Reload your Chrome extension. Cada página que você visita agora aparece um alerta. Vamos colocar o primeiro URL na página.,

registar o URL

jQuery não é necessário, mas torna tudo mais fácil. Primeiro, Baixe aversão ao jQuery do CDN jQuery e coloque-o na pasta da sua extensão. Idownloaded the latest minified version, jquery-2.1.3.min.js. To load it, addit to manifest.json bef7dc888a6″>., Todo o seu manifest.json deve looklike este:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

Agora que temos o jQuery, vamos usá-lo para fazer o URL da primeira externo linkon a página content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

Observe que não precisamos de usar jQuery para verificar se o documento foi carregado. Bydefault, o Chrome injecta scripts de conteúdo após o DOM estar completo.

Experimente-o-deverá ver o resultado na sua consola em cada página que visitar.,

acções do navegador

quando uma extensão adiciona um pequeno ícone ao lado da sua barra de endereço, Isso é uma acção de navegação. A sua extensão pode ouvir cliques nesse botão e depois qualquer coisa.

coloque o ícone.png do tutorial de extensão do Google na sua pasta de extensão EADD isto para manifest.json:

"browser_action": { "default_icon": "icon.png" }

para utilizar a acção do navegador, é necessário adicionar a passagem de mensagens.

a mensagem passa

um script de conteúdo tem acesso à página atual, mas é limitado no acesso itcan APIs., Por exemplo, ele não pode ouvir por cliques na ação do navegador. Precisamos adicionar um tipo diferente de script à nossa extensão, um script de fundo,que tem acesso a cada API Chrome, mas não pode acessar a página atual. AsGoogle coloca:

Content scripts have some limitations. Eles não podem usar chrome.* APIs, com exceção de extension i18n runtime e storage.,

assim o script de conteúdo será capaz de puxar um URL para fora da página atual, mas terá que entregar esse URL para o script de fundo para fazer algo útil com ele. A fim de se comunicar, vamos usar o que o Google chama de passar mensagem, que permite scripts para enviar e ouvir mensagens. É a única maneira para scriptscontent e scripts de fundo interagirem.,

Adicione o seguinte para dizer o manifest.json sobre o fundo de script:

"background": { "scripts": }

Agora nós vamos adicionar background.js:

Este envia um arbitrário JSON carga para o separador actual. As chaves do JSONpayload podem ser qualquer coisa, mas eu escolhi "message" para simplicidade. Agora precisamos tolisten para que a mensagem no content.js:

Observe que todas as nossas código anterior foi movido para o ouvinte, então, thatit é só executar quando a carga é recebida., Sempre que carregar no ícone de navegação, deverá ver um URL a ser ligado à consola. Se não estiver funcionando, tente recarregar a extensão e, em seguida, recarregar a página.

Abrir uma nova guia

podemos usar o chrome.tabs API para abrir uma nova guia:

chrome.tabs.create({"url": "http://google.com"});

Mas chrome.tabs pode ser usado apenas por background.js então, nós vamos ter que adicionar somemore a mensagem que passa desde background.js pode abrir o guia, mas não consegue pegar theURL., Aqui está a ideia:

  1. ouvir um clique na Acção do navegador em background.js. Quando estiver ligado, envie umclicked_browser_action evento paracontent.js.
  2. When content.js receives the event, it grabs the URL of the first link on theepage. Em seguida, envia open_new_tab de volta para background.js com o URL toopen.
  3. background.jsouveopen_new_tab e abre uma nova página com o givenURL quando recebe a mensagem.,

Clicar no navegador ação será desencadeada background.js, que irá enviar uma message para content.js, que irá enviar uma URL de volta para background.js, que willopen uma nova aba com a URL fornecida.

primeiro, precisamos dizer a content.jspara enviar o URL para background.js., Altere ocontent.js para usar este código:

Agora precisamos adicionar algum código para dizer background.js para ouvir para que o evento:

Agora, quando você clicar no navegador ação do ícone, ele abre uma nova aba com o firstexternal URL na página.

resumindo

total content.js e background.js estão acima., Aqui está o completo manifest.json:

E aqui está a estrutura de diretório completa:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

Mais sobre como fazer uma extensão do google Chrome

Para mais informações, visite o oficial extensão do google Chrome documentação.