Este tutorial será dividido em 3 seções: Uma primeira seção onde explicaremos vários conceitos sobre extensões no Chrome, sua estrutura e a criação básica de uma extensão. Na segunda seção, vamos nos concentrar na criação de extensões para este grande navegador como o Google Chrome, fazendo vários exemplos práticos. Finalmente, na terceira seção, explicaremos as opções avançadas ao criar extensões e como publicá-las na loja da web do Google Chrome para que estejam disponíveis ao público em geral.
O que são extensões no Google Chrome?Extensões são pequenos programas que podem modificar e melhorar a funcionalidade do navegador, neste caso o Chrome. Estes são desenvolvidos usando tecnologias web como HTML, Javascript e CSS.
As extensões têm pouca ou nenhuma interface de usuário. Por exemplo, a imagem abaixo mostra o ícone de um cadeado que ao ser clicado abre uma pequena interface.
Esta extensão específica é usada para criptografar e descriptografar seus e-mails com uma chave PGP. Extensões são arquivos empacotados em um, que o usuário baixa e instala. Esse pacote, ao contrário dos aplicativos da web normais, não precisa depender do conteúdo da web.
Conforme discutido acima, as extensões permitem adicionar funcionalidade ao Chrome sem mergulhar fundo no código nativo. Novas extensões podem ser criadas com tecnologias básicas com as quais a maioria dos programadores de desenvolvimento web trabalha: HTML, CSS e Javascript.
1. Como criar e programar uma extensão do Chrome
Para começar, faremos uma extensão simples que recupera uma imagem do Google usando o URL da página atual como termo de pesquisa. Faremos isso implementando um elemento de interface do usuário que chamamos chrome.browserAction, que nos permite colocar um ícone ao lado do menu do cromo, no qual você pode clicar para acesso rápido. Clicar nesse ícone abrirá uma janela pop-up contendo uma imagem obtida na página atual, que terá a seguinte aparência:
Para iniciar nossa prática, vamos criar um diretório chamado Visualizador de imagens, dentro disso incluiremos todos os arquivos com os quais vamos trabalhar. Como editor de desenvolvimento você pode usar o de sua preferência, no meu caso irei usar o Chrome Dev Editor, que você pode baixar no seguinte endereço:
Chrome Dev Editor
A primeira coisa que precisamos é criar um arquivo de manifesto chamado manifest.json. Este manifesto nada mais é do que um arquivo de metadados no formato JSON que contém propriedades como nome, descrição, número da versão de sua extensão e assim por diante. Em um nível avançado, vamos usá-lo para declarar ao Chrome o que a extensão fará e as permissões necessárias para fazer certas coisas.
O formato do arquivo de manifesto é o seguinte:
{// Obrigatório "manifest_version": 2, "name": "Minha Extensão", "version": "versionString", // Recomendado "default_locale": "es", "description": "Uma descrição em texto simples", " icons ": {…}, // Selecione um (ou nenhum)" browser_action ": {…}," page_action ": {…}, // Opcional" autor ":…," automação ":…," plano de fundo ": {// Recomendado "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," comandos ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," converted_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"corresponde": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "rede"}, " homepage_url ":" http: // path / to / homepage "" importação ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incógnito ":" abrangendo ou split "" input_components ": …," chave " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optional_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " plataformas ":…," plugins ": […]," requisitos ": {…}," sandbox ": […]," short_name ":" Nome abreviado "," assinatura ":…," verificação ortográfica ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]} A seguir, descreverei a função que cumpre os rótulos mais importantes:
Necessário:
- manifest_version: É a versão do manifesto, é representado por um número inteiro que especifica a versão do formato do arquivo. A partir do Chrome 18, os desenvolvedores devem especificar o número 2.
- inhame: É o nome que seu ramal terá. Deve ter no máximo 45 caracteres, o nome é o principal elemento de definição da extensão e é um campo obrigatório. É exibido nos seguintes locais:
a) Na caixa de instalação.
b) Na interface do usuário onde o ramal é administrado.
c) Na loja virtual do Chrome.
- versão: Deve ser composto de um a quatro números inteiros separados por pontos que identificam a versão da extensão. Aqui estão alguns exemplos de versões válidas:
"Versão 1"
"Versão": "1.0"
"Versão": "2.10.2"
"Versão": "3.1.2.4567"
Recomendado:
- default_locale: Especifica o subdiretório de _locales (idiomas) que contém as strings padrão para esta extensão. Você deve colocar todas as strings visíveis para o usuário dentro de um arquivo chamado messages.json. Cada vez que você inclui um novo idioma, você deve adicionar um novo arquivo messages.json sob o diretório _locales / localecode onde localecode é o código do idioma, assim como en é o inglês e é para o idioma espanhol.
Um exemplo de extensão internacionalizada com suporte para inglês (en), espanhol (es) e coreano (ko) seria o seguinte:
- Descrição: É composto por uma string em texto simples (sem HTML ou outro formato) com no máximo 132 caracteres que descreve a funcionalidade da extensão.
- Ícones: Permite adicionar um ou mais ícones que representam a extensão. Um ícone de 128x128 px sempre deve ser fornecido. Isso será usado durante a instalação e na Chrome Web Store. As extensões também devem fornecer um ícone de 48 x 48, que é usado na página de gerenciamento de extensões do Chrome (chrome: // extensions). Você também pode especificar um ícone de 16 x 16 para ser usado como favicon para as páginas de uma extensão.
Os ícones geralmente devem estar no formato PNG, porque tem o melhor suporte para transparência. No entanto, eles podem estar em qualquer formato compatível com o WebKit, incluindo BMP.webp, GIF.webp, ICO e JPEG.webp. Aqui está um exemplo da especificação dos ícones:
"icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},Exemplo
Selecione um (ou nenhum):
- browser_action: Use browser_action para colocar ícones na barra de ferramentas principal na parte superior do navegador Google Chrome, à direita da barra de endereço. Além disso, você pode adicionar dica de ferramenta (mensagem flutuante), emblema (texto flutuante no ícone) e pop-up (janela flutuante).
Exemplo de uso browser_action:
{"name": "My extension",… "browser_action": {"default_icon": {// opcional "19": "images / icon19.png.webp", // opcional "38": "images / icon38.png.webp" // opcional}, "default_title": "Google Mail", // opcional; mostra uma dica de ferramenta "default_popup": "popup.html" // opcional}, …}
- page_action: Use esta API para colocar seu ícone dentro da barra de endereço.
Exemplo de uso:
{"nome": "Minha extensão",… "page_action": {"default_icon": {// opcional "19": "images / icon19.png.webp", // opcional "38": "images / icon38. png" // opcional}, "default_title": "Google mail", // opcional; mostrar na descrição "default_popup": "popup.html" // opcional},…} Ex
Opcional:
- Fundo: Uma necessidade comum em extensões é ter uma única página para a execução de longas sequências para gerenciar alguma tarefa ou status. Esta é uma página HTML executada em conjunto com a extensão. Ele começa quando a extensão começa a ser executada e ativa apenas uma instância dela por vez. Em vez de usar o plano de fundo, é recomendável usar uma página de evento.
Em uma extensão típica com uma página em segundo plano, a interface do usuário, por exemplo, browser_action ou page_action, e algumas opções de página atuam como a visualização da extensão. Quando a view precisa conhecer algum estado (fechou a janela, atualizou a página …), ela faz a solicitação do estado para a página que se encontra como Background. Quando a página Background notifica que houve uma mudança no estado, ela informa que a view deve ser atualizada ou realizar alguma ação.
Seu formato é o seguinte:
{"nome": "Minha extensão",… "background": {"scripts": ["background.js"]},…} Formato- Páginas de eventos: Antes de definir o seguinte atributo, é necessário explicar do que tratam as Páginas de Eventos. Uma necessidade comum de aplicativos e extensões é ter um único script de longa execução para lidar com alguma tarefa ou estado. Este é o objetivo das páginas de eventos. As páginas de eventos são carregadas apenas quando necessário. Quando não está fazendo algo ativamente, ele é descarregado do cache, liberando memória e outros recursos do sistema.
Os benefícios de desempenho são significativos, especialmente em dispositivos de baixo consumo de energia. É por isso que é recomendado usar mais páginas de eventos do que de fundo.
A declaração de uma página de evento no arquivo de manifesto seria a seguinte:
{"nome": "Minha extensão", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}Como você pode ver, a diferença que ele tem com o Background é o atributo persistent, que terá um status falso.
- chrome_settings_overrides: É usado para substituir alguma configuração selecionada no Chrome. Esta API está disponível apenas para Windows.
Algumas dessas configurações podem ser a página inicial (página inicial do navegador, provedor de pesquisa (o provedor de pesquisa), etc.
Exemplo de configuração:
{"name": "My extension",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "palavra-chave ":" palavra-chave .__ MSG_url_domain__ "," search_url ":" http: //www.foo.__MSG_url_domain__/s? q = {searchTerms} "," favicon_url ":" http: //www.foo.__MSG_url_domain__/favicon. ico "," sugest_url ":" http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms} "," instant_url ":" http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms} " , "image_url": "http: //www.foo.__MSG_url_domain__/image? q = {searchTerms}", "search_url_post_params": "search_lang = __ MSG_url_domain__", "sugest_url_post_params": "sugest_lang = __ MSG_domain_langl": "sugestão_lang = __ MSG_lang_domain": MSG_url_domain = "instant_url_params_url_domain" __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__MSG_url_domain? .noo .__ MSG_url_url_? q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}
- chrome_ui_overrides: Esta propriedade da extensão é usada para substituir algumas configurações na interface de usuário do Chrome. Como por exemplo os marcadores. Sua configuração é a seguinte:
{"name": "My extension",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…} Nesse caso, a estrela que o navegador tem como favoritos está sendo eliminada.
- chrome_url_overrides: Esta é uma maneira de substituir o arquivo HTML da extensão de uma página que o navegador Google Chrome normalmente fornece. Além disso, você também pode sobrescrever seu código CSS e JavaScript.
Uma extensão com esta configuração pode substituir uma das seguintes páginas do Chrome:
- Gerenciador de favoritos: É a página que aparece quando o usuário escolhe a opção do menu do gerenciador de favoritos no menu do Chrome ou, para Mac, o item Gerenciador de favoritos no menu Favoritos.
PROLONGAR
- História (história): É a página que aparece quando o usuário escolhe o histórico no menu do Chrome ou, no Mac, o item mostra o histórico completo do menu encontrado na opção histórico.
PROLONGAR
- Nova guia (newtab): É a página que aparece quando o usuário cria uma nova guia ou janela no navegador. Você também pode acessar esta página colocando o seguinte endereço na barra de endereço: chrome: // newtab
PROLONGAR
ObservaçãoUma única extensão pode substituir apenas uma página. Por exemplo, uma extensão não pode substituir os favoritos e, por sua vez, a página do histórico.
{"name": "My extension",… "chrome_url_overrides": {"newtab": "mypage.html" // as opções são newtab, histórico, favoritos},…}
- comandos: Esta API de comando é usada para adicionar os atalhos de teclado que acionam uma ação em sua extensão. Por exemplo, uma ação para abrir a ação do navegador ou enviar um comando para a extensão.
{"nome": "Minha extensão",… "comandos": {"toggle-feature-foo": {"suggested_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Toggle feature foo "}," _execute_browser_action ": {" suggested_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"suggested_key": {"default": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…} Em sua página de plano de fundo, você pode vincular um controlador para cada um dos comandos definidos no manifest.js (exceto para '_execute_browser_action'Y'_execute_page_action') através da onCommand.addListener.
Por exemplo:
chrome.commands.onCommand.addListener (function (command) {console.log ('Comando pressionado:', comando);});
- content_scripts: Eles são arquivos javascript executados no contexto de páginas da web. Usando o Document Object Model (DOM) padrão, eles podem ler os detalhes das páginas da web das visitas do navegador ou fazer alterações nelas.
{"nome": "Minha extensão",… "content_scripts": [{"corresponde": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}
- content_scripts: Para tornar nossas extensões mais seguras e evitar possíveis problemas de script entre sites, o sistema de extensão do Chrome incorporou o conceito geral de Política de segurança de conteúdo (CSP). Isso introduz políticas muito rígidas que tornarão as extensões mais seguras por padrão. Em geral, o CSP funciona como um mecanismo de lista negra e branca para os recursos carregados ou executados por suas extensões.
{…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}Esses foram alguns dos atributos mais importantes. Para nossa prática inicial, definiremos nosso arquivo manifest.json da seguinte maneira:
{"manifest_version": 2, "name": "Startup example", "description": "Esta extensão mostra uma imagem de imagens do google da página atual", "version": "1.0", "browser_action": {"default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissões ": [" activeTab "," https://www.googleapis.com/ "]}Como você pode ver em nosso manifesto de exemplo, declaramos um browser_action, a permissão activeTab para ver a URL da guia atual, e o host recebeu permissão, desta forma a API do Google pode ser acessada para realizar a pesquisa de imagens externas.
Por sua vez, 2 arquivos de recurso são encontrados ao definir browser_action: icon.png.webp e popup.html. Ambos os recursos devem existir dentro do pacote de extensão, então vamos criá-los agora:
- icon.png.webp Ele será exibido ao lado da caixa multifuncional, aguardando a interação do usuário. É apenas um arquivo PNG de 19 px x 19 px.
- popup.html será exibido na janela pop-up criada em resposta ao clique do usuário no ícone. É um arquivo HTML padrão e seu conteúdo é o seguinte:
Popup da extensão de primeiros passosPROLONGAR
2. Certifique-se de que a caixa de seleção do modo de desenvolvedor no canto superior direito esteja marcada.
3. Clique em Upload Unzipped (Unpacked) Extension para abrir uma caixa de diálogo de seleção de arquivo.
PROLONGAR
4. Navegue até o diretório onde seus arquivos de extensão estão localizados e selecione-o.
Como alternativa, você pode arrastar o diretório que contém seu projeto e soltá-lo na janela de extensões do Chrome. Isso irá carregar a extensão em seu navegador.
Desta forma, teremos feito uma extensão simples para o Google Chrome. Em nossa próxima edição, vamos nos aprofundar na construção de extensões em conjunto com estruturas de desenvolvimento como jquery e Bootstrap, que nos permitirão agilizar nosso desenvolvimento.
2. Exemplo de extensões para Chrome
Nesta seção faremos vários exemplos que nos permitirão entender completamente muitas das funcionalidades que existem ao construir uma extensão para Google Chrome.Prática 1 - Fundo Azul
Neste exemplo vamos fazer uma extensão simples onde aprenderemos como podemos modificar o conteúdo das páginas que carregamos em nosso navegador. Neste caso, vamos modificar a cor de fundo da página carregada e mudá-la para azul.Como expliquei na primeira parte deste tutorial, você pode usar qualquer IDE de desenvolvimento, no meu caso, usarei o Chrome Dev Editor.
PROLONGAR
Para começar, vamos criar um novo diretório com o nome Fundo azul e vamos criar um projeto com o mesmo nome.
PROLONGAR
PROLONGAR
Dentro, iremos criar nosso primeiro arquivo manifest.json que conterá as definições de nossa extensão.
PROLONGAR
Nosso arquivo manifest.json deve conter o seguinte código:
{"manifest_version": 2, "name": "Blue Background", "description": "Esta extensão mudou a cor de fundo da página atual", "version": "1.0", "browser_action": {"default_icon": "icon.png.webp", "default_title": "Tornar esta página azul"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}Como nossa extensão é simples, ela conterá apenas um ícone que, quando pressionado, executará uma ação. Como você pode ver no arquivo manifest.json definimos um nome e sua descrição, no browser_action Definimos o ícone que será exibido na barra de nosso navegador Google Chrome e um título que será exibido quando o ponteiro do mouse for posicionado sobre o referido ícone. Em relação às permissões definiremos que isso será feito apenas na aba ativa. O arquivo que será executado em segundo plano será o nosso arquivo background.js que não será persistente, pois será executado apenas quando clicarmos na extensão.Criamos nosso ícone e o salvamos dentro do diretório do projeto, conforme definido em manifest.json. Neste caso, na raiz do projeto.
Em seguida, criamos um arquivo JavaScript chamado background.js dentro do mesmo diretório com o seguinte código:
// chamado quando o usuário clica na extensão chrome.browserAction.onClicked.addListener (function (tab) {console.log ('Changing' + tab.url + 'to blue!'); chrome.tabs.executeScript ({code: ' document.body.style.backgroundColor = "blue" '});});Saindo de todo o projeto da seguinte forma:
PROLONGAR
Para executar nossa extensão, tudo que você precisa fazer é pressionar o botão play localizado na barra superior do Chrome Dev Editor.
PROLONGAR
Ao pressioná-lo, a extensão será carregada automaticamente no navegador Google Chrome.
Vamos ver nossa extensão em ação, clicando no ícone que fiz (fundo azul com a letra A em branco), a página que carreguei na aba atual, no meu caso minha conta de usuário em Solvetic (http: // www .solvetic… .berth-ramncgev /) mudará seu fundo para azul. Deve-se notar que apenas a cor do elemento BODY mudará, e não os DIVs que ele contém, pois é assim que eu o defini em meu background.js.
PROLONGAR
Prática 2 - MultipleColor
Para este exemplo, mostrarei como otimizar nosso trabalho a partir do IDE de desenvolvimento e do código. No Chrome Dev Editor, clicamos no botão +, para criar um novo projeto, desta vez iremos alterar o tipo de projeto, selecionando a opção Aplicativo JavaScript do Chrome.
PROLONGAR
Como você pode ver, ele gera automaticamente toda a estrutura do nosso projeto. Com nosso arquivo manifest.json com as definições mais comuns.
PROLONGAR
A este arquivo iremos adicionar uma breve descrição na etiqueta Descrição colocando o texto que deseja, no meu caso “Extensão que permite alterar a cor de fundo”. Para este projeto iremos criar 2 ícones, um de 16x16 pixels e outro de 128x128 pixels, como você pode ver na estrutura, estes serão salvos dentro do diretório ativos.
Vamos adicionar o seguinte código sob a tag minimum_chrome_version:
"permission": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Alterar a página para várias cores.", " default_popup ":" popup.html "},Como você pode ver, estamos definindo um popup ou view que conterá todo o html que o usuário verá ao clicar em nossa extensão. Em seguida, adicionaremos o seguinte código:"content_scripts": [{"corresponde": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]content_scripts- Contém os arquivos JavaScript (js) e de folha de estilo (css) que serão executados no contexto da página da web. Ele pode conter as seguintes propriedades:
- fósforos: Obrigatoriedade. Específico em qual página o script será injetado.
- exclude_matches: Opcional. Páginas que serão excluídas para que o script não seja injetado.
- match_about_blank: Opcional. Este valor é booleano e indica se o script será inserido na página em branco (about: blank e about: srcdoc).
- css: Opcional. É um arranjo que indica a lista de arquivos css que serão inseridos na página solicitada no navegador.
- js: Opcional. É um arranjo com a lista de arquivos JavaScript que serão inseridos na página solicitada no navegador.
- run_at: Opcional. É uma string de texto que controla quando os arquivos js serão carregados. Seu valor pode ser:
- document_start: Os arquivos são injetados após qualquer arquivo css, mas antes que qualquer DOM seja construído ou qualquer outro script seja executado.
- document_end: Os arquivos são injetados imediatamente após a conclusão do DOM, mas antes que quaisquer recursos, como imagens e quadros, sejam carregados.
- document_idle: O navegador escolhe o momento para injetar scripts entre document_end, e imediatamente após o window.onload disparar o evento.Esta opção é a que é configurada por padrão.
No final do nosso arquivo manifest.json Deve ser o seguinte:
PROLONGAR
Como você pode ver, adicionamos algumas coisas novas na propriedade css Definimos a estrutura Bootstrap que não tornará o desenvolvimento no nível de estilo mais fácil. Seguido na propriedade js Definimos a biblioteca JQUERY JavaScript, que não nos permitirá trabalhar de forma mais rápida e fácil tudo o que tem a ver com JavaScript. Nosso arquivo index.html deve ter a seguinte aparência:
Popup MultipleColorvermelhoAzulVerdeAmareloNo arquivo index.html, simplesmente fazemos as referências aos nossos arquivos Bootstrap, Jquery e main.js. No corpo, definimos um contêiner de bootstrap com seus divs que servirão como botões para as diferentes opções de cores.
Para o arquivo main.js usaremos o evento click que será executado ao pressionar o botão do mouse sobre cada classe "col-md-12", pegando a cor de fundo do elemento que foi selecionado e atribuindo ao corpo do página. foi aberta. Em seguida, o evento window.close () será executado; que fecham a janela de nossa extensão. O código definido para main.js é o seguinte:
$ (document) .ready (function () {$ (". col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});}); O resultado ao executar nossa extensão poderemos visualizar o ícone que criamos para ela na barra superior.
Clicar em nossa extensão irá mostrar o seguinte pop-up:
E ao selecionar uma das opções o resultado será o seguinte:
PROLONGAR
Prática 3 - História Principal
Neste exemplo aplicaremos tudo o que foi visto acima, criaremos uma extensão que ao clicar nela nos mostrará um popup com a lista das páginas mais visitadas de nosso navegador, dando acesso direto a essas páginas. A única coisa diferente neste exemplo é que solicitaremos permissão de uma das APIs do Chrome para acessar as páginas mais visualizadas do Chrome. O nome desta api é chrome.topSites.
Para começar, vamos Chrome Dev Editor e criamos nosso projeto com o nome TopHistorial e no tipo de projeto, selecionamos a opção JavaScript Chrome App.
Então nosso arquivo manifest.json Deve ser o seguinte:
{"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Mostrar lista das páginas mais visualizadas em nosso navegador", "version": "0.0.1", " minimum_chrome_version ":" 38 "," permissions ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" corresponde a ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]} Como você pode ver, adicionamos um novo atributo ao manifesto para poder obter permissão na API do Chrome: Declarar permissões, é usado na maioria das APIs do Chrome em sua extensão, você deve primeiro declará-lo colocando o campo permissões em seu manifesto. Cada permissão pode ser uma string de texto pertencente à seguinte lista (dividida em 3 imagens):
Em relação ao nosso arquivo popup.html Deve ser o seguinte:
Popup MultipleColorNosso arquivo main.js que conterá a consulta da API e o tratamento do evento click, será representado da seguinte forma:
$ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Append ('
Ao executar nossa extensão poderemos ver um ícone no topo do navegador, que no meu caso o desenha em azul, ao clicar nele abre um popup com a lista de páginas que mais acessei do meu navegador ordenado pelo número de visitas que fiz.
PROLONGAR
