As extensões do navegador nada mais são do que plug-ins que aprimoram a funcionalidade do navegador. Em outras palavras, eles adicionam mais recursos à funcionalidade básica do navegador.
Mas como uma extensão é mais útil do que um aplicativo da web? Bem, porque uma extensão pode acessar todas as APIs do navegador, o que lhe dá mais controle sobre o navegador.
Com a ajuda de uma extensão, você pode:
✅ Personalize a interface do usuário do navegador e das guias.
✅ Adicione novos atalhos para ações do navegador.
✅ Monitore de perto o navegador e a web.
O Google Chrome também possui uma loja na web onde você pode hospedar suas extensões do Chrome para qualquer pessoa usar. Você pode pensar que construir uma extensão do Chrome é uma tarefa difícil, mas na realidade, é apenas HTML, CSS e JavaScript.
Sim, você pode criar uma extensão do Chrome usando tecnologias simples da web, como JavaScript, e aqui está um tutorial sobre o mesmo!
últimas postagens
Construindo uma extensão do Chrome
Neste tutorial, você aprenderá como construir uma extensão do Chrome que analisa o histórico do seu navegador e o apresenta por meio de um pop-up.
Arquivos necessários
O único arquivo necessário para construir uma extensão do Chrome é o arquivo manifest.json. Descansar tudo que você codifica é idêntico à construção de um aplicativo da web.
Criando arquivo Manifest.json
Este arquivo específico define a configuração e funcionalidades da extensão. Aqui está um exemplo de como o arquivo de manifesto normalmente se parece:
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
}
}
A versão mais recente do arquivo de manifesto no momento da escrita é v3, que, de acordo com o Chromeintroduz melhorias na segurança, privacidade e desempenho das extensões e permite que as extensões usem tecnologias abertas da Web, como service workers e promessas.
Você também pode ver uma propriedade de ação no arquivo de manifesto. Ele define qual arquivo HTML você deseja abrir no popup quando o usuário clicar no ícone da extensão. Há também uma propriedade default_icon que permite definir o ícone de extensão padrão a ser exibido.
Construindo o Aplicativo
É hora de construir o aplicativo, que será mostrado ao usuário final como um pop-up. Não tem nada a ver com extensões. Em vez disso, é um aplicativo da web normal.
Primeiro, você deve criar um arquivo de entrada que possa listar na propriedade default_popup do manifesto. Eu criei index.html como ponto de entrada para esta extensão.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chrome Extension</title>
<link rel="stylesheet" href="https://wilku.top/how-to-create-a-chrome-extension-from-scratch-in-3-steps/style.css">
</head>
<body>
<h2>Browsing History</h2>
<ul class="list"></ul>
<script src="./app.js"></script>
</body>
</html>
Vinculei uma folha de estilo para estilizar a página para que fique bem em um pop-up. Além disso, há também um arquivo javascript vinculado para lidar com a funcionalidade da extensão.
function searchHistory() {
chrome.history.search({
text: '',
startTime: new Date("2023-10-01").getMilliseconds()
}, (results) => {
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
})
}
document.addEventListener("DOMContentLoaded", () => {
searchHistory()
})
O que este arquivo faz é usar API de histórico do Chrome para consultar o histórico do navegador e exibi-lo no pop-up. Quando o usuário clica no ícone da extensão, o evento DOMContentLoaded será acionado e chamará a função searchHistory, que contém o código real.
O método de pesquisa na API de histórico aceita um texto de parâmetro obrigatório, que é o texto de pesquisa com base no qual você deseja filtrar o histórico. Se você deixar uma string vazia, o histórico será retornado sem nenhum filtro.
Outro parâmetro útil é o parâmetro startTime. Ele filtra os resultados do histórico com base no tempo decorrido desde a hora de início. Por exemplo, se você fornecer o horário de início de uma semana, ele buscará apenas o histórico da semana anterior. É um parâmetro opcional e o padrão é as últimas 24 horas.
Para buscar os resultados, a API fornece uma função de retorno de chamada que contém os resultados em um array. Você pode percorrer o array e fazer uma lista dele.
for (const result of results) {
let liItem = document.createElement("li")
let link = document.createElement("a")
link.innerText = result.title
link.href = result.url
liItem.appendChild(link)
document.querySelector(".list").appendChild(liItem)
}
Agora, a API de histórico no Chrome requer permissão de “histórico”, que precisa ser definida em nosso arquivo de manifesto.
{
"manifest_version": 3,
"name": "History",
"description": "View Browsing History",
"version": "0.1",
"action": {
"default_popup": "index.html"
},
"permissions": [
"history"
]
}
Executando a extensão
Esta é a etapa mais fácil para criar e executar uma extensão do Chrome. Clique nas reticências na barra de ação do Chrome e vá para Gerenciar extensões em Extensões. Você também pode acessar este link chrome://extensions/ diretamente.
Ative o modo de desenvolvedor se não estiver ativado.
Em seguida, clique em Carregar descompactado e selecione a pasta do projeto onde você acabou de criar sua extensão. Ao fazer isso, você poderá ver sua extensão na lista.
Para executar a extensão, vá até a barra de ação do Chrome e clique na sua extensão para ver a lista.
É isso; você acabou de criar uma extensão simples do Chrome. Se você quiser mais exemplos, você pode conferir mais Exemplos de extensões do Chrome no repositório oficial do Google Chrome.
Se quiser publicar sua extensão do Chrome na Chrome Web Store, você pode Siga esses passos e pague uma taxa única para registrar sua extensão na loja.
Palavras Finais
Criar uma extensão do Chrome é muito fácil se você conhece o básico de qualquer aplicativo da web. É apenas uma questão de criar um arquivo de manifesto e seu aplicativo será convertido em uma extensão.
Agora que você sabe como construir uma extensão do Chrome, confira as melhores extensões do Chrome para ajudar os desenvolvedores.