Pesquisar no TabNews - Extensão Simples para Google Chrome · nauva

Olá pessoal, eu sinto falta de uma barrinha de pesquisa aqui no TabNews e enquanto ela não chega, eu fiz uma pequena e simples extensão do Google Chrome para facilitar minha pesquisa por assuntos específicos.

Sim, eu sei que o que eu vou compartilhar é algo extremamente simples e eu poderia fazer o mesmo apenas digitando as palavras no buscador do Google, mas fiz isso para fins de estudo, sou iniciante nessa jornada e gostaria muito da opinião de vocês sobre o que poderia ser melhorado ou adicionado nessa pequena brincadeira.

O que a extensão faz:

Ao clicar no ícone da extensão na barra de ferramentas do Chrome, uma janela pop-up será exibida, permitindo que você digite palavras-chave para pesquisa. Ao clicar no botão "Pesquisar", será aberta uma nova guia com os resultados da pesquisa do Google para https://www.tabnews.com.br/.

Faça e teste você mesmo:

1 - Crie uma pasta e nela adicione os seguintes arquivos:

manifest.json - Conteúdo:

{
    "manifest_version": 3,
    "name": "TabNews Pesquisa",
    "version": "1.0",
    "action": {
      "default_popup": "popup.html"
    },
    "permissions": [
      "activeTab",
      "scripting"
    ]
  }

popup.html - Conteúdo:

<!DOCTYPE html>
<html>
<head>
  <title>Pesquisa TabNews</title>
  <style>
    body {
      width: 400px;
      padding: 10px;
    }
  </style>
  <script src="popup.js"></script>
</head>
<body>
  <h1>Pesquisa TabNews</h1>
  <input type="text" id="keyword" placeholder="Digite uma palavra-chave">
  <button id="searchBtn">Pesquisar</button>
  <div id="results"></div>
</body>
</html>

popup.js - Conteúdo:

document.addEventListener("DOMContentLoaded", function() {
    var searchBtn = document.getElementById("searchBtn");
    searchBtn.addEventListener("click", function() {
      var keyword = document.getElementById("keyword").value;
      search(keyword);
    });
  
    function search(keyword) {
      chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        var currentTab = tabs[0];
        var googleUrl = "https://www.google.com/search?q=inurl:tabnews.com.br+" + encodeURIComponent(keyword);
        chrome.tabs.create({ url: googleUrl, index: currentTab.index + 1 });
      });
    }
  });

2 - Instalando a extensão: Abra o Google Chrome e acesse a página de extensões em chrome://extensions.

Ative o "Modo do desenvolvedor" no canto superior direito da página.

Clique no botão "Carregar sem compactação" e selecione a pasta do projeto.

A extensão será instalada e exibida na lista de extensões.

Recaptulando:

Agora, quando você clicar no ícone da extensão na barra de ferramentas do Chrome, uma janela pop-up será exibida, permitindo que você digite palavras-chave para pesquisa. Ao clicar no botão "Pesquisar", será aberta uma nova guia com os resultados da pesquisa do Google para https://www.tabnews.com.br/.

Sou apenas um iniciante e sei que vocês serão gentis em suas manifestações, por isso eu agradeço desde já.