iniciar

as extensões são feitas de componentes diferentes, mas coesos. Os componentes podem incluir scripts de fundo, scripts de conteúdo, uma página de opções, elementos UI e vários arquivos lógicos. Componentes de extensão são criados com tecnologias de desenvolvimento web: HTML, CSS e JavaScript. Os componentes de uma extensão dependem da sua funcionalidade e podem não necessitar de todas as opções.,

Este tutorial irá criar uma extensão que permite ao utilizador alterar a cor de fundo de qualquer página sobre developer.chrome.com. ele vai usar muitos componentes essenciais para dar uma demonstração introdutória de suas relações.

para iniciar, crie um novo diretório para manter os arquivos da extensão ” S.

a extensão completa pode ser obtida aqui.

Crie o manifesto #

as extensões começam com o seu manifesto. Crie um arquivo chamado manifest.json e inclua o seguinte código, ou baixe o arquivo aqui.,

a pasta que contém o ficheiro Manifesto pode ser adicionada como uma extensão no modo de desenvolvimento no seu estado actual.

1. abra a página de gestão de extensões navegando para chrome://extensions.
   • a página de gestão de extensões também pode ser aberta se carregar no menu Chrome, passando por cima de mais ferramentas e seleccionando as extensões.
2. activar o modo de desenvolvimento, Carregando na comutação ao lado do modo de desenvolvimento.
3. carregue no botão Carregar a pasta de extensões e seleccione a pasta de extensões.

Ta-da!, A extensão foi instalada com sucesso. Como não foram incluídos ícones no manifesto, um ícone genérico da barra de ferramentas será criado para a extensão.

adicionar instrução #

embora a extensão tenha sido instalada, não tem instrução. Introduza um script de fundo, criando um arquivo intitulado background.js, ou baixando-o aqui, e colocando-o dentro do Diretório de extensão.

Background scripts, and many other important components, must be registered in the manifest., O registro de um script de fundo no manifesto diz a extensão que Arquivo de referência, e como esse arquivo deve se comportar.

a extensão está agora ciente de que ele inclui um script de fundo não-persistente e vai digitalizar o arquivo registrado para eventos importantes que ele precisa ouvir.

esta extensão necessitará de informação de uma variável persistente logo que esteja instalada. Comece por incluir um evento de escuta para runtime.onInstalled no programa de fundo. Dentro do onInstalled ouvinte, a extensão irá definir um valor usando a API de armazenamento., Isso permitirá que vários componentes de extensão para acessar esse valor e atualizá-lo.

A Maioria Das API, incluindo a API de armazenamento, deve ser registada sob o campo"permissions" no manifesto para a extensão a usá-las.

Navegue de volta para a página de gestão de extensões e carregue na ligação de recarga. Um novo campo, inspecionar vistas, torna-se disponível com um link azul, página de fundo.,

Click the link to view the background script “s console log,”The color is green. ”

introduza uma interface de utilizador #

as extensões podem ter muitas formas de uma interface de utilizador, mas esta irá usar um popup. Crie e adicione um arquivo intitulado popup.html para o diretório, ou baixe-o aqui. Esta extensão usa um botão para mudar a cor de fundo.

tal como o programa de fundo, este ficheiro precisa de ser designado como um popup no manifesto sob page_action.,

A designação para ícones da barra de ferramentas também está incluída no campo page_action no campo default_icons. Faça o Download da pasta de imagens aqui, abra o fecho e coloque-a no directório da extensão. Atualize o manifesto para que a extensão saiba como usar as imagens.

As Extensões também mostram imagens na página de gestão de extensões, o aviso de permissões e favicon. Estas imagens são designadas no manifesto sob icons.,

Se a extensão for recarregada nesta fase, ela incluirá um ícone de escala cinza, mas não conterá quaisquer diferenças de funcionalidade. Porque page_action é declarado no manifesto, ele é a extensão para dizer ao navegador quando o usuário pode interagir com popup.html.

Add declared rules to the background script with the declarativeContent API within the runtime.onInstalled listener event.

a extensão precisará de permissão para acessar o id

API em seu manifesto.,

o navegador irá agora mostrar um ícone de acção de página a cores na barra de navegação quando os utilizadores navegam para um URL que contém "developer.chrome.com". Quando o ícone é de cor completa, os usuários podem clicar nele para ver o popup.galeria.

o último passo para a UI popup é adicionar cor ao botão. Crie e adicione um arquivo chamado https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js com o seguinte código para a extensão diretório, ou transferido aqui.

este código agarra o botão de popup.html e solicita o valor da cor do armazenamento., Ele então aplica a cor como o fundo do botão. Include a script tag to https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js inpopup.html.

recarregue a extensão para ver o botão verde.

Layer logic #

the extension now knows the popup should be available to users on developer.chrome.com e exibe um botão colorido, mas precisa de lógica para uma maior interação do Usuário. Update https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js to include the following code.,

o código actualizado adiciona um evento

evento no botão, que despoleta um programa de conteúdo injectado programaticamente. Isto muda a cor de fundo da página da mesma cor que o botão. O uso de injeção programática permite scripts de conteúdo invocados pelo usuário, em vez de inserir automaticamente código indesejado em páginas web.

O Manifesto vai precisar do activeTab Permissão para permitir a extensão de acesso temporário ao API. Isto permite à Extensão chamar tabs.executeScript.,

a extensão está agora totalmente funcional! Recarregue a extensão, atualize esta página, abra o popup e clique no botão para torná-la Verde! No entanto, alguns usuários podem querer mudar o fundo para uma cor diferente.

dar opções aos usuários #

a extensão atualmente só permite que os usuários mudem o fundo para verde. Including an options page gives users more control over the extension ” s functionality, further customizing their browsing experience.,

iniciar criando um arquivo no diretório chamado options.html e incluir o seguinte código, ou baixá-lo aqui.

em seguida, registe a página de opções no manifesto,

recarregue a extensão e clique em detalhes.

Role a página de detalhes e seleccione as opções de extensão para ver a página de opções, embora esta apareça em branco.

o último passo é adicionar a lógica das opções., Crie um arquivo chamado options.js no diretório de extensão com o seguinte código, ou baixe-o aqui.

Quatro opções de cores são fornecidas, em seguida, geradas como botões na página de opções com ouvintes de eventos onclick. Quando o usuário clica um botão, ele atualiza o valor de cor no armazenamento global da extensão. Desde que todos os arquivos da extensão ” s puxar a informação da cor do armazenamento global nenhum outro valor precisa ser atualizado.Parabéns! O diretório agora possui uma extensão cromática totalmente funcional, embora simplista.o que se segue?,

• A Visão Geral da extensão Chrome faz um backup de um pouco, e preenche um monte de detalhes sobre a arquitetura de extensões em geral, e alguns conceitos específicos que os desenvolvedores querem estar familiarizados.
• Aprenda sobre as opções disponíveis para as extensões de depuração no tutorial de depuração.as extensões Chrome têm acesso a APIs poderosas acima e além do que está disponível na web aberta. Cromo.* A documentação do APIs percorre cada API.
• O Guia do desenvolvedor tem dezenas de links adicionais para peças de documentação relevantes para a criação de extensão avançada.,

---