Como eu criei uma extensão para o Google Chrome para salvar posts do TabNews
Sempre tive a vontade de saber como era desenvolvida uma extensão para o Google Chrome, porém, nunca tive ideias que achei interessantes o suficiente para criar uma extensão, até agora.
Pode ser algo proposital, mas o TabNews não possui uma opção de salvar posts para ver em outro momento, então resolvi tentar implementar essa funcionalidade com uma extensão.
Como funciona?
A ideia é ser algo simples, com apenas uma lista com os posts que foram salvos e um botão para adicionar um post quando estiver na página dele.
Ou seja, você entra no TabNews normalmente, assim que encontrar um post que chame sua anteção e queira salvar para depois, basta entrar nele e clicar no ícone da extensão, assim surgiria um botão para você conseguir salvar aquele post.
Pesquisando como criar a extensão.
Basicamente eu utilizei a documentação do próprio Google para entender como funciona a criação de uma extensão.
Então meu primeiro passo foi criar um arquivo para guardar as informações da extensão, o tal manifest.json e ele ficou com essa cara:
{
"name": "TabNews Save",
"description": "Salve os posts do TabNews para ler mais tarde.",
"version": "1.0.0",
"manifest_version": 3,
"permissions": ["activeTab", "scripting", "tabs", "storage"],
"action": {
"default_popup": "index.html"
},
"icons": {
"16": "assets/icons/icon16.png",
"32": "assets/icons/icon32.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
}
}
A propriedade mais interessante aqui é a action junto com a default_popup elas definem qual arquivo HTML será chamado quando o ícone da extensão for clicado, ou seja, o próximo passo é criar esse arquivo HTML.
Eu criei um arquivo HTML normal, como se fosse fazer uma página qualquer para web, depois eu adicionei referências para meu arquivo de estilização, de ícones e meu script.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
No final o arquivo fica mais ou menos assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<link href="css/styles.css" rel="stylesheet" />
<link href="css/fontawesome.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<header class="header">
<div class="logo">
<img src="assets/dark-filled.svg" class="tabnewsIcon" />
<h1>TabNews Save</h1>
</div>
<a href="https://github.com/SilvanoGPM/tabnews-save" target="_blank">
<i class="fa-brands fa-github"></i>
</a>
</header>
<section class="content">
<ul data-js="post-list" class="postList"></ul>
<p data-js="message" class="message">Carregando...</p>
<button data-js="save-post" class="savePost disabled">
<i class="fa-solid fa-plus"></i>
Salvar Post
</button>
</section>
</div>
<script src="script.js"></script>
</body>
</html>
Outro arquivo importante é o script.js, porém para mais detalhes sobre o código fonte acesse o repositório do projeto.
Como instalar a extensão?
Atualmente a extensão funciona apenas no Google Chrome, e infelizmente não consegui realizar o envio para o Chrome Web Store(aparentemente precisa pagar $5 para ter o acesso), então a instalação precisa ser manual.
Passo a passo
- Baixe o código fonte no repositório do projeto.
- Abra o seu Google Chrome.
- Vá em
/ Mais Ferramentas / Extensões. - Ative o modo desenvolvedor.
- Clique em carregar sem compactação, escolha a pasta onde você salvou o código e pronto, tudo deve estar funcionando.
Pontos negativos
- Somente funciona no Google Chrome.
- Instalação Manual.
- Dados são salvos localmente.
(Prováveis) próximas funcionalides
- Filtragem de posts salvos.
- Adicionar um post apenas com o link para ele.
- Adicionar um post sem precisar entrar nele.
Considerações
Foi algo legal de estudar como funciona, gostaria de saber estruturar melhor os arquivos e conseguir fazer funcionar no Firefox, então se você tem mais experiência na criação de extensões, por favor, comente como eu poderia fazer essas coisas.