Como fazer um complemento de navegador usando javascript. Escrevendo uma extensão para o Google Chrome

iMacros é uma extensão que auxilia no teste de páginas da web. Em vez de ter que realizar as mesmas ações na página, o desenvolvedor só precisa registrar a sequência necessária de ações no iMacros e iniciar a extensão quando necessário.

A extensão é capaz de funcionar com sites implementados nas tecnologias Java, Flash, Flex, Ajax e Silverlight.

Uma extensão para quem gosta de “brincar com fontes” - permite experimentar toda a gama de fontes da biblioteca do Google Fonts sem fazer alterações no código da página. Você pode alterar não apenas a fonte em si, mas também seu tamanho, estilo de escrita e assim por diante.

Uma extensão para Google Chrome, que permite selecionar e copiar texto até mesmo de imagens, será útil, segundo Cretive Bloq, para quem já teve que lidar com texto incorporado pelo menos uma vez em seu trabalho.

Uma extensão que permite determinar instantaneamente qual fonte é usada em uma página específica, sem realizar quase nenhuma ação adicional - passando o cursor do mouse sobre a inscrição.

YSlow é uma ferramenta que não apenas verifica a velocidade de carregamento de uma determinada página da web, mas também informa ao desenvolvedor o que a está retardando. Para fazer isso, a extensão verifica se o site está em conformidade com 23 das 34 regras de desempenho formuladas pela equipe do Yahoo.

Um conjunto completo de ferramentas úteis para gerenciar elementos de sites - por exemplo, para analisar recursos e layouts da web, testar código e alterar parâmetros instantaneamente e aparência páginas.

Uma extensão para verificar automaticamente se um site atende aos princípios básicos de SEO, se tem desempenho suficiente e é fácil de usar. Os resultados dos testes são apresentados em forma de uma espécie de checklist – você pode ver mais informações detalhadas e recomendações para cada um dos itens não cumpridos, bem como corrigir erros instantaneamente.

Permite que você salve automaticamente quaisquer alterações feitas no código da página usando o Chrome DevTools. Conforme observa o autor do material, a ferramenta ajuda os desenvolvedores a economizar dinheiro grande número tempo.

Uma extensão com a qual você pode “transformar” qualquer página em um diagrama estrutural do layout do material - wireframe. Permite que desenvolvedores e web designers se familiarizem com o layout de qualquer página da Internet sem sair do navegador.

Ripple Emulator é uma extensão de emulador para Google Chrome que permite testar sites em vários plataformas móveis com diferentes resoluções de tela. Pode ser usado em combinação com outras extensões para testar e depurar recursos.

Streak é uma extensão que permite transformar caixa de correio para o Gmail no sistema CRM. Você pode acompanhar o status das transações e negociações em andamento no e-mail com contrapartes, use o Streak para processar solicitações de usuários de produtos e rastrear correções de erros enviados e assim por diante.

Extensão para pesquisa rápida no recurso popular para desenvolvedores Stack Overflow.

Permite que você acesse instantaneamente a documentação do PHP 5.5 no seu navegador.

PerfectPixel é uma extensão para o Google Chrome. Ele permite que você “sobreponha” uma grade translúcida em uma página da web e verifique distâncias especificadas em relação a ela. Você pode sobrepor outras imagens - como o layout original - para garantir que a página resultante corresponda exatamente a ela:

Uma ferramenta para visualizar o código-fonte das páginas e editar o código CSS.

Você pode alterar as sombras, as circunferências da caixa e assim por diante arrastando o controle deslizante. Após fazer as alterações, você pode copiar o código resultante e substituí-lo no código do site.

Uma extensão de navegador que detecta quais bibliotecas JavaScript, estrutura ou CMS são usados ​​em um recurso.

User-Agent Switcher é uma extensão que permite “mascarar” o navegador Google Chrome como Internet Explorer, Opera ou qualquer outro navegador.

Emulador integrado do Internet Explorer para Chrome.

Simples e editor on-line gratuito imagens. Permite “capturar” imagens ou fazer capturas de tela do navegador – e editá-las imediatamente usando uma extensão do Chrome.

Uma extensão que ajuda a adequar serviços web para usuários que sofrem de daltonismo - mostrando ao desenvolvedor como o site é visto por quem sofre dessa doença. Permite que web designers e desenvolvedores criem serviços mais acessíveis.

Uma ferramenta simples que ajuda a determinar a altura, largura e posição de qualquer elemento na página.

Uma extensão que verifica uma página da web em busca de links quebrados ou incorretos.

Uma extensão que ajuda não tanto no desenvolvimento, mas na busca de inspiração e boas fotos. Mostra uma imagem do Flickr em cada nova aba do Google Chrome. Ao clicar nele, o usuário vai para a página do autor, onde pode se familiarizar com suas outras obras.

Uma extensão de navegador semelhante ao plugin anterior desta lista - só que em vez de fotos do Flickr na nova aba, o usuário vê obras de arte reconhecidas - por exemplo, pinturas de Van Gogh ou Manet.

Extensão oficial do Google para compactação de tráfego, que permite economizar tráfego no navegador Google Chrome.

Extensões e plug-ins são acréscimos úteis às funções existentes no site e no navegador. Com a ajuda deles, você pode gravar áudio e vídeo da tela, ativar a detecção de erros e muito mais.
Neste artigo veremos como criar a extensão mais simples - o inicializador de sites favoritos. Embora o aplicativo seja primitivo, ele ainda revelará o processo de criação e download de uma extensão para o Google Chrome.

É aconselhável conhecer HTML, CSS e JS (se precisar ampliar o conjunto de funções) em um nível bem básico para entender melhor o material, mas em qualquer caso explicaremos o código.

Cada extensão do Chrome deve ter um arquivo manifest.json. Serve apenas para descrever as funcionalidades da aplicação, descrição geral, número de versão e permissões. Você pode ler mais sobre esse arquivo no blog da equipe do Chrome.

Tudo é muito simples aqui:

( "manifest_version": 2, "nome": "Tproger Launcher", "descrição": "Tproger Launcher", "versão": "1.0.0", "icons": ("128": "icon_128.png" ) , "browser_action": ( "default_icon": "icon.png", "default_popup": "popup.html" ), "permissions": ["activeTab"] )

Depois de descrevermos nossa extensão no arquivo manifest.json, podemos passar com segurança para o próximo estágio, ou seja, marcação.

Primeiro, vamos escrever um código HTML básico:

Acima escrevemos um framework para o plugin, agora ele está completamente vazio e você precisa especificar o nome, links para ícones e fonte. Isso pode ser feito usando a tag link, observe que ela não está fechada:

Lançador rápido de mídia Tproger

Não se esqueça de especificar a codificação, caso contrário as letras cirílicas não serão exibidas.

Vamos passar para o segundo bloco de código, ou seja, a tag body e seu conteúdo.

Para tornar a extensão mais bonita e conveniente do que é agora, você precisa adicionar estilos CSS.

/* Estrutura modal do documento */ /*configurações gerais para todo o documento*/ html, body ( font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding : 0; width: 380px ) /*definir as configurações para os títulos de primeiro nível*/ h1 (font-family: "Menlo", monospace; font-size: 22px; font-weight: 400; margin: 0; color : #2f5876 ; ) a:link, a:visited ( color: #000000; contorno: 0; text-decoration: none; ) /*definir a largura da imagem*/ img ( largura: 30px; /*largura da imagem*/ ) .modal-header (align-items: center; /*alinhar elementos ao centro*/ border-bottom: 0,5px solid #dadada; /*propriedades da linha divisória inferior*/ height: 50px; ) .modal-content ( padding: 0 22px; /* preenchimento superior e inferior, superior e esquerdo*/ .modal-icons ( border-top: 0,5px solid #dadada; /*propriedades da linha divisória superior*/ height: 50px; width: 100%; ) .logo ( preenchimento: 16px ; /*preenchimento em todos os lados*/ ) .logo-icon ( vertical-align: text-bottom; /*alinhar ao final do texto*/ margin-right: 12px; /*define o recuo dos elementos da imagem*/ ) .version ( color: #444; font-size: 18px; )

As configurações básicas do documento estão definidas, vamos passar para o próximo trecho de código, no qual será utilizado o Flexbox, que foi discutido no início do artigo.

Flex-container ( display: flex; /*exibe o contêiner como um elemento de bloco*/ justify-content: space-between; /*alinhamento uniforme de elementos*/ padding: 10px 22px; ) /*definir configurações para contêineres com ícones* / .flex ( opacidade: 1; /*parâmetro de opacidade do ícone*/ largura: 120px; ) .flex:hover ( opacidade: 0,4; /*nível de opacidade ao passar o mouse sobre um elemento*/ ) .flex .fa ( tamanho da fonte: 40px cor: #2f5876;

Tentamos explicar questões relativamente complexas com o máximo de detalhes possível nos comentários. Agora só precisamos carregar nossa extensão em Navegador Chrome e funcionará, e se passar na moderação, aparecerá no armazenamento de extensões (plugin).

Agora vamos adicionar um arquivo com extensão .js, caso precisemos repentinamente expandir a funcionalidade do complemento do navegador.

Tproger Media Quick Launcher /*aqui adicionamos estilos*/

Tproger launcher /* Estrutura modal do documento */ /*configurações gerais para todo o documento*/ html, body ( font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0; min-height: 180px ; padding: 0; width: 380px ) /*definir as configurações para os títulos de primeiro nível*/ h1 ( font-family: "Menlo", monospace; font-size: 22px; font-weight: 400; margin: 0 ; color: #2f5876; ) a:link, a:visited ( color: #000000; contorno: 0; text-decoration: none; ) /*definir a largura da imagem*/ img ( largura: 30px; /*largura da imagem* / ) .modal -header (align-items: center; /*alinhar elementos ao centro*/ border-bottom: 0,5px solid #dadada; /*propriedades da linha divisória inferior*/ height: 50px; ) .modal-content ( padding: 0 22px; /*preenchimento acima e abaixo, superior e esquerdo*/ .modal-icons ( border-top: 0.5px solid #dadada; /*propriedades da linha divisória superior*/ height: 50px; width: 100%; ) .logo ( preenchimento : 16px; /*preenchimento em todos os lados*/ ) .logo-icon ( vertical-align: text-bottom; /*alinhar ao final do texto*/ margin-right: 12px; /*define o recuo dos elementos da imagem*/ .version ( color: #444; font-size: 18px; ) .flex-container ( display: flex; /*exibe o container como um elemento de bloco*/ justifique-content : espaço entre; /*alinhamento uniforme de elementos*/ preenchimento: 10px 22px ) /*definir configurações para contêineres com ícones*/ .flex ( opacity: 1; /* parâmetro de opacidade do ícone */ largura: 120px; ) .flex :hover ( opacity : 0.4; /*nível de opacidade ao passar o mouse sobre um elemento*/ ) .flex .fa ( font-size: 40px; color: #2f5876; ) Lançador Tproger (1.0.0)

Acesso rápido para os sites de conteúdo de um programador típico

Após a verificação, você pode começar a publicar a extensão. Para fazer isso, você deve ter os seguintes arquivos e pastas:

Para baixar a extensão para a loja, precisamos ir ao menu, passar o mouse sobre “ configurações adicionais" e selecione "extensões" ou digite chrome://extensions/ na barra de endereço.

Eu sempre quis contar às pessoas sobre oportunidades interessantes(tecnologias) que podem agora estar disponíveis para todos, mas por alguma razão não estão disponíveis para todos. Sim, acabou sendo uma tautologia, mas reflete plenamente minha indignação interior com esse tema candente para mim. Seja como for, a conversa agora não será sobre como dizem. Hoje falaremos sobre como criar extensões para Navegador Google Chrome (doravante denominado Chrome).

A extensão que iremos desenvolver ao longo deste artigo pode ser encontrada na Google Chrome Web Store, com a única diferença de que possui funcionalidades avançadas. Além disso, há código fonte no GitHub, novamente com a ressalva de que tudo lá está escrito em CoffeeScript, e aqui a história será contada em JavaScript. A propósito, não sou fã ou defensor do CoffeeScript, mas é algo bastante interessante e útil - aconselho você a experimentá-lo.

Se você já considerou a ideia de criar uma extensão para Chrome, Firefox, Maxthon e outros navegadores, provavelmente já percebeu que o mínimo de esforço necessário é para o Chrome. Você pode verificar isso consultando a documentação dos navegadores correspondentes.

A escrita de uma extensão começa com sua descrição e definição das tarefas que ela resolverá. Como sou meu próprio patrão e posso perder prazos quantas vezes quiser, não preciso escrever especificações técnicas - basta entender que:

• A extensão deve ocultar todos os comentários em rede social"VC";
• A extensão deve ser capaz de exibir comentários;
• A extensão deve ser capaz de exibir comentários em páginas específicas;

À primeira vista tudo é simples e podemos fazê-lo. No entanto, no âmbito do artigo implementaremos apenas os dois primeiros pontos.

Prevejo perguntas cujo conteúdo pode ser mais ou menos assim: “Por que ocultar comentários se esse é o objetivo de uma rede social?!” Bem, é uma pergunta justa que merece uma resposta detalhada:

Circunstâncias aconteceram que ultimamente, quando vejo comentários no VK, quero dar montanhas de palmas para os comentaristas. Assino um grande número de páginas públicas diferentes, temáticas (desenvolvimento web) e nem tanto. E por mais estranho que pareça, torno-me o mais generoso em grupos com conteúdos que me interessam, e não em gatos (no meu caso, pandas). Nunca vi tanta informação pouco profissional e feia fluir nos comentários em nenhum outro lugar, e eles até pensam em discutir. Além disso, comentários em feed de notícias Eles não parecem esteticamente agradáveis. Em geral, dito e feito.

A surpresa mais agradável para mim foi que logo no início da viagem somos recebidos pelo caráter descritivo das ações. Simplificando, precisamos descrever nosso aplicativo, seus direitos e capacidades - o arquivo manifest.json é usado para isso.

Primeiro de tudo, você precisa preencher três campos obrigatórios:

( "manifest_version": 2, // A partir do Chrome 18 conjunto 2, caso contrário 1 (esse material antigo não é suportado) "name": "My Extension", // Nome da extensão "version": "versionString" // Versão da extensão )

Se tudo estiver claro com o nome e a versão do manifesto for ainda mais simples, então você precisa dar uma olhada mais de perto na versão da extensão.

Então, estamos todos acostumados com o fato de que uma versão de algo consiste em três números separados por pontos - Major.Minor.Patch (significando número). Com npm, caramanchão e outras delícias a conversa é curta: ou é assim ou não é assim. Mas o Google oferece as seguintes opções:

"versão": "1" "versão": "1.0" "versão": "2.10.2" "versão": "3.1.2.4567"

Você pode aprender mais sobre todos os campos do arquivo de manifesto na documentação.

No nosso caso, o arquivo de manifesto ficará assim:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " permissões": ["activeTab"], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "background": ( "persistent": false, "page": "background.html" ), "content_scripts": [ ( "corresponde" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "estilos /commentblocker_on.css" ] )

Do que não foi considerado antes

• __MSG_key__ é a abordagem do Chrome sobre a internacionalização de aplicativos (i18n). Pode ser usado tanto no arquivo de manifesto quanto em outros arquivos (até mesmo CSS).
• web_accessible_resources - uma matriz de caminhos de recursos que serão posteriormente usados ​​no contexto de páginas da web. Sem especificar o caminho, nada poderá ser usado nas páginas do site se tal comportamento for esperado.

Uma grande vantagem para o Chrome Karma é que agora podemos ativar a extensão, é claro, se todos os recursos especificados em manifest.json tiverem sido criados.

Não acho que valha a pena focar no que está nos arquivos commentblocker.css e commentblocker_on.css. Darei apenas o primeiro, que lista todos os seletores que contêm comentários:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link (visibilidade: oculto! Importante;) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_comment ( display: none !im visibilidade importante: oculta ! importante; ) body:after ( posição: fixa; conteúdo: "__MSG_mode_enable__"; topo: 5px; direita: 5px; preenchimento: 6px 12px; cor de fundo: #ffc; borda: 1px sólido #ddd; índice z: 9999 ;

No arquivo commentblocker_on.css, como você pode imaginar, o oposto é verdadeiro. Observe que logo no CSS estou usando uma linha com a chave da linguagem content: "__MSG_mode_enable__" . É hora de criar um arquivo onde essas chaves serão armazenadas.

Na raiz da nossa extensão, criamos o diretório _locales e os diretórios en e ru aninhados nele. A seguir, descrevemos nossas chaves no arquivo messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "Uma maneira conveniente de ocultar comentários no feed de notícias e grupos." ), "browser_action": ( "message ": "Alterar tipo de comentário" ), "mode_enable": ( "message": "Sem comentários!" ), "mode_disable": ( "message": "Com comentários!" ) )

Além do campo de mensagem, existem outros campos que você pode conhecer na documentação.

Agora criamos os arquivos background.html, primeiro assim:

Fundo

Tudo aqui é igual ao HTML normal - nada incomum. A propósito, você não precisa criar o arquivo background.html, pois ele é gerado automaticamente com base nos campos do manifest.json .

Você pode executar a extensão sem escrever uma única linha de JavaScript. Para fazer isso, você precisa passar pelo menu:

• Configurando e gerenciando o Google Chrome (Hamburger)
• Ferramentas adicionais
• Extensões
• Marque a caixa ao lado de “modo de desenvolvedor”
• Baixe a extensão descompactada
• Selecione a pasta com extensão

A extensão foi carregada e apareceu no menu. Sim, sim, este é este “B”.

Parece que a extensão que acabamos de criar não tem nada na cabeça (não há lógica), e todos os comentários nas páginas da rede social com a letra “B” agora estão ocultos. A resposta está em manifest.json, onde no campo "content_scripts":() indicamos em quais páginas (http://vk.com/* e https://vk.com/*) o arquivo commentblocker.css irá ser incluído automaticamente, o que oculta todos os comentários. Aconselho você a ler mais sobre padrões matemáticos. Tem uma aparência tão simples, mas sob o capô é quase um cavalo castrado cinza, com todos os sinos e assobios.

Assim, sem escrever uma única linha de código, já temos uma extensão que executa a tarefa principal que lhe foi atribuída.

Resta completar o segundo ponto da tarefa, nomeadamente implementar a capacidade de exibir comentários. Resumindo, precisamos enviar um arquivo commentblocker_on.css, que substituirá as regras do arquivo commentblocker.css. E aqui nosso todo-poderoso JavaScript corre em nosso auxílio.

Lembra do que eu disse sobre background.html? Sim, sim, sobre o fato de não precisar ser criado. Vamos mudar um pouco o manifest.json:

... "background": ( "persistent": false, "scripts": [ "scripts/commentblocker.js" ] ), ...

Acabei de conectar o arquivo JavaScript. Nada de especial. Vamos para este arquivo.

Você não pode simplesmente colocar JS em uma página. E o mesmo problema não existe apenas com scripts. Portanto, precisamos usar uma injeção especial de executeScript.

Primeiro você precisa adicionar um manipulador de eventos click ao ícone da extensão:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, (código: "(" + toggleComments.toString() + ")();" )); ));

Onde toggleComments é uma função que injetará nosso arquivo CSS na página:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extensão") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "extensão", extensionLink.type = "text/css", extensionLink.rel = "folha de estilo", document.getElementsByTagName("head").appendChild(extensionLink)) : (document. getElementsByTagName("cabeça").removeChild(document.getElementById("extensão"))) );

Acho que serão suficientes as palavras que este trecho de código verifica se nosso CSS está conectado na página e tira conclusões sobre a necessidade de habilitá-lo ou desabilitá-lo.

A propósito, não existem muitos eventos disponíveis que cubram uma gama diferente de necessidades. Por exemplo, existem tais eventos:

• onCreated - criando uma guia.
• onUpdated - atualizando a guia.
• onRemoved - fechando uma guia.

Vale ressaltar que o evento onUpdated é chamado duas vezes:

• Atualização de página;

No StackOverflow eles aconselham verificar o status da página:

Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) ( if (changeInfo && changeInfo.status === "completo") ( ... ) ));

Agora, ao clicar no ícone, será conectado um arquivo de estilo que exibirá os comentários, e clicar novamente no ícone irá ocultá-los novamente.

Aliás, vale a pena mencionar meu versão completa Extensão VK Comment Blocker, que está disponível em

Escreva uma extensão para Google Chrome não é difícil. Mas ao escrever a primeira extensão, podem surgir (e surgem) questões. A maioria dos manuais para escrever a primeira extensão são projetados para usar o manifesto da primeira versão, que não terá mais suporte em um futuro próximo.

Este artigo abordará:

• Como criar um manifesto v.2
• Como trabalhar com recursos remotos
• Como trabalhar com cookies
• Como trabalhar com armazenamento local
• Como trabalhar com notificações

Ao final do artigo teremos uma extensão do organizador pronta, que terá um campo para adicionar uma nova tarefa, além de uma lista de tarefas do dia atual. Vamos descrever todos os requisitos para o organizador:

• Deve ter um campo para adicionar um evento (data, hora, evento)
• Deve exibir todas as tarefas do dia atual, classificadas por hora
• Todos os eventos passados ​​devem ser exibidos riscados
• Deverá ter um campo para inserir o tempo de exibição da notificação, bem como uma caixa de seleção que permite e proíbe a exibição de notificações
• Deve exibir uma notificação de um evento futuro em um horário específico antes do evento

Vamos começar a criar a extensão desde o início, ou seja, desde o manifesto. O manifesto é o mesmo arquivo no qual todos os parâmetros de extensão são gravados. Nome, descrição, versão, permissão de acesso a sites, permissão de uso de cookies, notificações, armazenamento local. Em geral, o manifesto é o cérebro da expansão. Crie um arquivo manifest.json. O manifesto é o único arquivo que deve ter um nome predefinido; todos os outros arquivos podem ser chamados como você quiser. Este arquivo possui três campos obrigatórios:

manifesto.json

(“nome”: “Extensão do organizador”, // Nome da extensão “versão”: “1.0”, // Versão da extensão. “manifest_version”: 2 // Versão do manifesto)

Existem algumas regras aqui:

• A versão do manifesto deve ser um número inteiro, ou seja, deve ser escrita como 2, e não “2”.
• A versão da extensão deve ser uma string, mas conter apenas números e pontos, ou seja, “1.0” é bom, mas 1.0 e “0.9 beta” são ruins.

Com os campos obrigatórios preenchidos, vamos prosseguir para a criação da janela pop-up da extensão. Para que uma janela seja aberta ao clicar em um ícone, você precisa adicionar o campo “browser_action” ao manifesto.

manifesto.json

( … "browser_action": ( "default_title": "Abrir organizador", // Título. É visível se você passar o mouse sobre o ícone no navegador "default_icon": "icon_small.png", // Caminho para o ícone da extensão " default_popup": " popup.html" // Caminho para a página com o popup ) )

Agora vamos criar uma janela pop-up. Isso é normal página HTML, que pode ser de qualquer tamanho e cor, sem truques. Vamos chamar o arquivo de “popup.html”. Não basta criar este arquivo - ele deve ser especificado no manifesto. Foi o que fizemos: "default_popup": "popup.html".

pop-up.html

Funciona!

Agora é hora de testar a funcionalidade da nossa extensão. Para fazer isso, baixe a extensão para o navegador. Abra o menu de extensões no Chrome. Colocamos o pássaro no “modo desenvolvedor”.

Depois disso, três botões aparecerão. Clique em “Carregar extensão descompactada...”. Selecione a pasta com os arquivos de extensão. Depois disso, nossa extensão aparecerá. Se tudo estiver correto, ao clicar no ícone aparecerá uma janela:

Agora podemos chegar à parte divertida. Vamos conectar dois arquivos javascript. O primeiro é popup.js, o segundo é jquery. Não haverá problemas com o primeiro, mas conectaremos não o jquery local, mas o remoto, retirado do endereço ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Os problemas surgem do fato de que por padrão a extensão não tem acesso a recursos de terceiros. Para obter acesso, você deve indicá-lo no manifesto. O acesso a algo é indicado no campo “permissões”. Além disso, para scripts remotos e CSS, você deve indicar os recursos remotos disponíveis.

manifesto.json

( ... "permissões": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self "" )

Agora vamos conectar esses scripts ao popup.html

pop-up.html

Usando o armazenamento no Chrome, você pode armazenar dados do usuário. E é no armazenamento que nossa extensão irá armazenar eventos futuros. Existem duas razões para isso. Em primeiro lugar, os dados armazenados podem ser sincronizados se você fizer login no navegador. E em segundo lugar, os dados podem ser armazenados não apenas como uma string, como nos cookies, mas em qualquer formato, ou seja, tanto arrays quanto objetos podem ser armazenados. Para que isso funcione, vamos abrir o acesso ao armazenamento no manifesto.

manifesto.json

( ... "permissões": [ ... "armazenamento" ] ... )

Agora vamos redesenhar a janela pop-up. Na janela pop-up haverá um campo com a data de hoje, três entradas para data, hora e descrição do novo evento, um botão para adicionar um novo evento, além de uma lista de todos os eventos de hoje.

pop-up.html

Data

E adicione imediatamente uma exibição de data no bloco #today_date.

pop-up.js

$(function())( var hoje = new Date(); $("#today_date").html(today.getDate()+"."+(parseInt(today.getMonth())+1)+". " + hoje.getFullYear());

Deveria ficar assim:

Assim, ao clicarmos no botão “+”, um evento deverá ser adicionado. No início do arquivo declararemos uma variável de armazenamento global - um objeto para trabalhar com armazenamento, bem como um array global de tarefas para armazenar eventos.

pop-up.js

Var armazenamento = chrome.storage.sync; var tarefas = new Array(); $(function())( … $("#add_task").click(function())( var new_task = new Object(); new_task.date = validarField($("#new_date").val(), " data"); new_task.time = validarField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); new_task.date || !new_task .task)( return false; ) tarefas = new_task; storage.set(( tarefas:tarefas ));

A função de validação verifica se a data está escrita no formato d.m.yyyy, e a hora no formato hh:mm, e também se a descrição do evento contém pelo menos três caracteres.

pop-up.js

Var validField = function(val, tipo)( if(type == "data")( var data = val.split("."); var ano = nova Data(); ano = ano.getFullYear(); if( date.length == 3 && parseInt(date) == date && date = 3)( return val; ) return null )

Resolvemos a adição, vamos passar ao recebimento dos eventos de hoje. Para fazer isso, precisamos obter todos os eventos do banco de dados, selecionar apenas os eventos de hoje de todos eles e classificá-los por hora em ordem crescente.

pop-up.js

$(função())(… var agora_horas = hoje.getHours()< 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0)( for(var i em tarefas_hoje)( var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+today_tasks[i].time+" "+today_tasks[i].task+""; $("ul").append(add_html); ) ) ) )); … ));

A função getTodayTasks() retorna apenas eventos com data de hoje da lista geral.

pop-up.js

Var getTodayTasks = function(tarefas)( var hoje_tarefas = new Array(); var hoje = nova data(); var hoje_data = hoje.getDate()+"."+(today.getMonth() + 1)+ "." + hoje.getFullYear(); for(var i em tarefas)( if(tasks[i].date == hoje_data)( hoje_tasks = tarefas[i]; ) ) if(today_tasks.length > 0)( hoje_tasks = sortTasks( hoje_tarefas); retorne hoje_tarefas)

A função sortTasks() classifica os eventos em ordem crescente de tempo.

pop-up.js

Var sortTasks = function(tasks)( if(tasks.length > 0)( var swapped = true; while (trocado) ( swapped = false; for (var i=0; i< tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks.time.replace(":", ""); if (this_time >next_time) ( var temp = tarefas[i]; tarefas[i] = tarefas; tarefas = temp; trocadas = true; ) ) ) retorna tarefas; )

É hora de configurar a exibição de notificações na tela. Vamos adicionar uma caixa de seleção especial à janela pop-up. Se esta caixa de seleção estiver marcada, as notificações serão mostradas; se não estiver marcada, elas não serão mostradas. Também adicionaremos uma entrada de texto. O número nesta entrada mostrará quanto tempo antes do evento a notificação será mostrada. Ou seja, se tivermos um evento agendado para as 19h, esta entrada de texto conterá 5, o que significa que uma notificação aparecerá às 18h55. Vamos adicionar código com essas entradas ao popup.html

pop-up.html

Mostrar notificações

Agora vamos descobrir como isso funcionará. Ao clicar em uma caixa de seleção, seu atributo marcado será verificado e o valor do atributo será gravado no cookie “show_notifications”. Vamos passar para a entrada de texto. Quando o seu valor mudar, o novo valor será validado, se for um número inteiro e não maior que 120, escrevemos o novo valor no cookie “when_to_notify”.

Mas para que isso funcione para nós, precisamos abrir o acesso aos cookies. Para fazer isso, acesse manifest.json e adicione-o em “permissions”

manifesto.json

( ... "permissões": [ ... “cookies” ] ... )

Agora você pode iniciar o script. Vamos para popup.js. Primeiro, vamos definir os valores iniciais nas entradas. Por padrão, a caixa de seleção não está marcada, ou seja, as notificações não são mostradas e o tempo é 0. Ao clicar na caixa de seleção, o valor do cookie “show_notifications” será alterado. Ao alterar o valor no campo de texto, o valor do cookie “when_to_notify” será alterado.

pop-up.js

$(function())( setCheckbox(); setWhenToNotify(getCookie("when_to_notify")); ... $("#show_notifications").click(function())( setCookie("show_notifications", document.getElementById(" show_notifications" .checked); $("#when_to_notify").change(function())( setWhenToNotify($(this).val()); ));

Vamos dar uma olhada mais de perto nas funções. Vamos começar com as funções de trabalhar com cookies. EM nesse caso funções prontas foram retiradas de w3schools.com.

pop-up.js

Var setCookie = function(c_name,value,exdays)( /* *Retirado de http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdias); var c_value=escape(valor) + ((exdias==nulo) ? "" : "; expira="+exdate.toUTCString()); getCookie = function(c_name)(Ligue para Vasya P. /* *Retirado de http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); para (i=0;eu

Para ficar mais claro, inseri uma descrição do código no próprio HTML. Organizo o menu de forma simples: coloco um link de extensão interna na imagem.

Desde que comecei com popup.html, falarei sobre popup.js imediatamente

Parece bastante simples para mim:

pop-up.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["login perdido"], verdadeiro); // aqui há uma solicitação GET para a página especificada xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // se tudo correu bem, execute o que está entre colchetes ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // adicione o código recebido ao bloco com id=dannie ) ) xhr.send();

Também incluí uma descrição do código.

É o design descrito acima que permite extrair e exibir conteúdo do seu site, ou talvez não. Mas o que é importante saber:
- No arquivo de manifesto, certifique-se de escrever no campo de permissões o endereço do site de onde as informações serão retiradas.
- O arquivo popup.js está vinculado ao script de fundo background.js, pois os dados inseridos no armazenamento local em background.js também são visíveis em popup.js.

Antes de examinar o arquivo de script de fundo background.js, vamos dar uma olhada no arquivo de script que é executado em cada página separadamente: content.js

Para mim é assim:

conteúdo.js
function onBlur() ( // janela perde o foco chrome.runtime.sendMessage((site:sait,time:localStorage)); // envia uma mensagem para background.js localStorage = "0"; ) window.onblur = onBlur; // se a janela perder o foco function sec() // executada a cada segundo ( if(document.webkitVisibilityState == "visible") // se a página estiver ativa ( localStorage = parseInt(localStorage,10) +1; // atualização dados do site no armazenamento local ) ) var sait=location.hostname; // em qual site o script está localizado localStorage = "0";

setInterval(sec, 1000); // executa a função a cada segundo
O ponto mais interessante do meu roteiro, eu acho, deveria ser:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Aqui é enviada uma mensagem para o script de fundo, nomeadamente duas variáveis: site:sait - contém o endereço do site no qual o script

time:localStorage – a quantidade de tempo gasto neste script.
plano de fundo.js

Aqui, de fato, ela está. Não vou entrar em detalhes sobre nada, porque... em princípio, isso não é necessário. Basta conhecer um exemplo claro para implementar seus planos. Se você adicionar quaisquer dados ao armazenamento local no script background.js (assim como cookies, web sql), os mesmos dados poderão ser usados ​​no script popup.js.

Isso é basicamente tudo que eu queria falar sobre a criação da extensão, mas vou tocar em mais um ponto em que tive dificuldades.

Na página de configurações, precisei organizar o arrastar e soltar de sites em colunas diferentes.

Porque Se os dados forem inseridos usando InnerHtml, esta opção não aparecerá assim. Aqui está o que tivemos que organizar:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"3px sólido #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px preto sólido")); )); $("#dannie").on("mousedown", ".sait", function() ( $(this).css(("border":"3px preto sólido")); )); $("#dannie").on("mouseover", ".sait", function() ( $(".sait").draggable(( helper:"clone" )); ));
em vez do habitual:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px sólido #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px preto sólido")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("border":"0px preto sólido")); ));