{"id":17195,"date":"2022-10-23T13:49:44","date_gmt":"2022-10-23T13:49:44","guid":{"rendered":"https:\/\/soloweb.com.br\/blog\/?p=17195"},"modified":"2023-04-02T12:57:40","modified_gmt":"2023-04-02T12:57:40","slug":"construindo-uma-extensao-do-google-chrome-para-obter-cotacao-do-dolar","status":"publish","type":"post","link":"https:\/\/soloweb.com.br\/blog\/2022\/10\/23\/construindo-uma-extensao-do-google-chrome-para-obter-cotacao-do-dolar\/","title":{"rendered":"Construindo uma extens\u00e3o do Google Chrome para obter cota\u00e7\u00e3o do d\u00f3lar"},"content":{"rendered":"\n
O Google Chrome \u00e9 um dos navegadores de internet mais utilizado no planeta e este oferece um recurso que o permite expandir suas funcionalidades infinitamente, este recurso chama-se extens\u00e3o. E por meio dela podemos criar funcionalidades para diversos fins.<\/p>\n\n\n\n
O que \u00e9 uma extens\u00e3o do Chrome? <\/strong>Uma extens\u00e3o do Chrome \u00e9 um programa instalado no navegador Chrome que aprimora a funcionalidade do navegador. Voc\u00ea pode criar um facilmente usando tecnologias da Web como HTML, CSS e JavaScript.<\/p>\n\n\n\n
Criar uma extens\u00e3o chrome \u00e9 semelhante a criar um aplicativo da web, mas requer um manifest.json<\/strong> arquivo que discutiremos na \u00faltima se\u00e7\u00e3o deste post.<\/p>\n\n\n\n
Como ser\u00e1 nossa extens\u00e3o do Chrome?<\/strong><\/p>\n\n\n\n
Ser\u00e1 uma extens\u00e3o simples que mostrar\u00e1 a cota\u00e7\u00e3o atual do d\u00f3lar a partir de uma requisi\u00e7\u00e3o a uma API<\/strong>, mas a partir deste pequeno exemplo simples, poder\u00e1 criar projeto maiores e com in\u00fameras funcionalidades.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Observe o icone da nossa extens\u00e3o agora fixada em nosso navegador e ao clicar mostra a cota\u00e7\u00e3o atual do d\u00f3lar.<\/p>\n\n\n\n
Ent\u00e3o vamos \u00e0 constru\u00e7\u00e3o da nossa extens\u00e3o.<\/p>\n\n\n\n
Vamos primeiro criar nosso arquivo HTML<\/strong>, e chama-lo de index.html<\/strong> com o seguinte conte\u00fado inicial.<\/p>\n\n\n\n
Definimo apenas uma estrutura b\u00e1sica com uma TABLE<\/strong> e uma TR<\/strong> onde iremos carregar o conte\u00fado da API que vamos requisitar a cota\u00e7\u00e3o do d\u00f3lar.<\/p>\n\n\n\n
Para finalizar vamos concluir nosso html<\/strong> com o carregamento do nosso arquivo javascript.<\/p>\n\n\n\n
Nosso arquivo html<\/strong> est\u00e1 conclu\u00eddo e ficar\u00e1 algo como isso:<\/p>\n\n\n\n<\/figure>\n\n\n\n
Com a conclus\u00e3o do nosso HTML, vamos agora codificar nosso arquivo javascript, chamado de script.js<\/p>\n\n\n\n
\"use strict\";\n\nconst info = document.getElementById('info');\n\nasync function getURL(url) {\n return (await fetch(url)).json();\n}\n\nasync function fetchData() {\n let from = 'USD';\n let to = 'BRL';\n let url = `https:\/\/api.exchangerate-api.com\/v4\/latest\/${from}`;\n let { rates } = await getURL(url);\n let rate = rates[to];\n info.innerText = `1 ${from} = ${rate} ${to}`\n}\n\nfetchData();<\/code><\/pre>\n\n\n\n
Nosso javascript \u00e9 bem simples e em resumo:<\/p>\n\n\n\n
\n
Ativa o modo strict ao javascript;<\/li>\n\n\n\n
Criamos uma constante onde obtemos a TR do nosso HTML para usar posteriormente;<\/li>\n\n\n\n
Criamos uma fun\u00e7\u00e3o ass\u00edncrona para fazer o fetch a URL da nossa API;<\/li>\n\n\n\n
Criamo mais uma fun\u00e7\u00e3o ass\u00edncrona que em seguida vamos chama-la para processa a requisis\u00e3o;<\/li>\n<\/ul>\n\n\n\n
Ficando assim nosso c\u00f3digo.<\/p>\n\n\n\n<\/figure>\n\n\n\n
A pr\u00f3xima etapa agora \u00e9 criar e codificar o arquivo manifest.json<\/strong><\/p>\n\n\n\n
Arquivo manifest.json <\/strong>Como discutimos anteriormente, criar uma extens\u00e3o do Chrome \u00e9 semelhante a criar qualquer aplicativo da web. A \u00fanica diferen\u00e7a \u00e9 que a extens\u00e3o do Chrome requer um manifest.json arquivo onde guardamos todas as configura\u00e7\u00f5es.<\/p>\n\n\n\n
O arquivo manifest.json cont\u00e9m todas as informa\u00e7\u00f5es necess\u00e1rias para criar a extens\u00e3o do Chrome. \u00c9 o primeiro arquivo que a extens\u00e3o verifica e tudo \u00e9 carregado a partir deste \u00fanico arquivo.<\/p>\n\n\n\n
Nosso manifest.json<\/strong> arquivo cont\u00e9m o valor de name<\/strong>, version<\/strong>, description<\/strong>, manifest_version<\/strong>(3 neste caso, que \u00e9 a vers\u00e3o mais recente do manifesto), author<\/strong>, e action<\/strong>. No campo de a\u00e7\u00e3o, h\u00e1 o valor para o default_popupqual cont\u00e9m o caminho para o arquivo HTML que est\u00e1 index.html neste exemplo.<\/p>\n\n\n\n
![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-26.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-28-1024x572.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-29.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-30.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-25.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-27.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-19.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-18.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-20.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-24.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-23.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/soloweb.com.br\/blog\/wp-content\/uploads\/2022\/10\/image-31.png\")
<\/figure>\n\n\n\n