Neste post, vamos nos aprofundar na criação de uma extensão do Chrome que nos permitirá aprimorar nossa experiência de navegação no site “medium.com”. Ao utilizar o poder do JavaScript, injetaremos código personalizado diretamente na página da Web, permitindo ocultar ou destacar postagens premium. Com a extensão do Chrome à nossa disposição, poderemos manipular a aparência da página de acordo com nossas preferências. Se você acha as postagens premium uma distração e prefira ocultá-las completamente ou deseje enfatizá-las com destaques atraentes, esta extensão fornecerá a você a flexibilidade de adaptar sua experiência de navegação ao seu gosto. O processo de desenvolvimento desta extensão do Chrome envolverá escrever o código necessário para interagir com a estrutura subjacente de “medium.com” e modificá-lo para atender às nossas necessidades.

Ao injetar JavaScript, podemos acessar e manipular os vários elementos da página da Web. Ao final deste tutorial, você terá uma extensão do Chrome totalmente funcional que concede a você o poder de ocultar ou destacar seletivamente postagens premium no “medium.com”.

Vamos começar:

Para criar a estrutura de arquivo necessária, copie e cole o seguinte código em seu terminal:

mkdir medium_ext
cd medium_ext
mkdir images
touch manifest.json script.js

Para criar uma extensão do Chrome, é essencial gerar um arquivo manifest.json no diretório raiz do projeto (pasta medium_ext). O arquivo manifest.json serve como um arquivo de configuração crucial para sua extensão, fornecendo informações sobre seu nome, versão, permissões e outros detalhes importantes exigidos pelo navegador Chrome.

{
  "manifest_version": 3,
  "name": "Hide or Highlight | for Medium.com",
  "description": "Extension for Medium.com",
  "version": "1.0",

  "web_accessible_resources": [{
    "matches": ["<all_urls>"],
    "resources": ["images/hide.svg", "images/highlight.svg"]
}],


  "content_scripts": [
    {
      "js": ["script.js"],
      "matches": [
        "https://medium.com/**"
    ]
    }]
}

Agora, vamos fazer o script.js:

console.log("Hello Medium");

Para instalar extensões no Google Chrome, você precisa ativar o Modo Desenvolvedor no Gerenciador de Extensões. Depois que o modo de desenvolvedor estiver ativado, siga estas etapas:

1. • Carregar extensões descompactadas: Selecione o caminho do arquivo do seu projeto.
2. • Navegue até medium.com em seu navegador Chrome e pressione F12 para abrir o console do desenvolvedor.
3. • Recarregue a página.

Se tudo estiver configurado corretamente, você verá a mensagem “Hello Medium” no log. Ativar o modo de desenvolvedor permite que você instale e teste extensões que estão em desenvolvimento ou ainda não publicadas na Chrome Web Store. Seguindo estas etapas, você poderá carregar sua extensão no Chrome e verificar sua funcionalidade no site medium.com

Criando a nossa primeira função:

No script.js, escreveremos o seguinte código:

const modifyPost = (mode) => {


if (document.querySelector("article div div section") === null) 
{   
    //Select all tags article in page
    const articles = document.querySelectorAll("article");
    
    // For each premium article
    articles.forEach((article) => {
        if ((article.querySelector("button div"))) {
            // Apply Highlight Style
            if (mode === "highlight"){
              article.style.display = "block";
              article.style.background = "linear-gradient(90deg, rgba(238,174,202,0.5) 0%, rgba(148,187,233,0.5) 100%)";
              article.style.marginTop = "5px";
              article.style.marginBottom = "15px";
              article.style.borderRadius = "15px";
              article.style.boxShadow = "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)";
            }
            //Apply Hide Style
            else if (mode === "hide"){
                article.style.display = "none";

            }

    })
}

}

Para verificar se as postagens premium estão sendo ocultadas, adicionarei um addEventListener provisório no código. Se tudo estiver configurado corretamente, a função será executada toda vez que você clicar na página. Aqui está o código:

document.addEventListener('click', () =>{
    modifyPost("hide");
    console.log("modifyPost Executed - Hide Premium Posts")
  });

Para verificar se as postagens premium estão no modo destaque, modificarei o addEventListener:

document.addEventListener('click', () =>{
    modifyPost("highlight");
    console.log("modifyPost Executed - Highlight Premium Posts")
  });

Primeira Execução - Persistencia e Controle

Para garantir a persistência e controlar o estado inicial de ocultar ou destacar postagens premium, podemos definir o item “modeView” no armazenamento local durante a primeira execução.

const firstExecution = () => {
    if (localStorage.getItem("modeView") != ("highlight" || "hide")) {
        localStorage.setItem("modeView", "highlight");
    }
}

Criando e injetando o botão:

Para criarmos um botão com dois estados, “hide” ou “highlight” e usar os ícones correspondentes, você pode utilizar ícones de fontes como flaticon.com ou criar/personalizar seus próprios ícones.

Highlight: https://www.flaticon.com/free-icon-font/bulb_3914393?term=light&related_id=3914393
Hide: https://www.flaticon.com/free-icon-font/bulb_3914417?term=light&related_id=3914417

Para usar os ícones, é recomendável criar um diretório “images” onde você pode armazenar os arquivos dos ícones

Voltando ao Código:

const stdBtn = () => {
    //Create Element <img>
    let btn = document.createElement("img");    
    // Get on local storage a state and set the image
    btn.src = chrome.runtime.getURL(`images/${localStorage.getItem("modeView")}.svg`);
   
    //Define btn styles
    btn.style.width = "25px";
    btn.style.height = "25px";
    btn.id = "stdBtn";
    btn.style.cursor = "pointer";
    btn.style.margin = "5px";
    btn.style.border = "1px solid transparent";
    btn.style.borderRadius = "20px";


    //Define Click Event
    btn.addEventListener("click", () => {
        //Get the State, execute the modify post and invert state
        stateButton = localStorage.getItem("modeView");
         
        if (stateButton === "highlight"){
            {
                btn.src = chrome.runtime.getURL(`images/hide.svg`);
                
                modifyPost("hide");
                localStorage.setItem("modeView", "hide");   
                
            }
            
        }
        else if (stateButton === "hide"){
            {
                btn.src = chrome.runtime.getURL(`images/highlight.svg`);
                modifyPost("highlight");
                localStorage.setItem("modeView", "highlight");
            }
            
        }

})

    //Inject the Button on the page
    let panel = document.querySelectorAll("#root > div > div.s.c > div.s.t.u.v.c > div.av.o.x.n.aw > div.n.o.ax");
    panel[0].appendChild(btn);
}

Faça um evento personalizado

Para fazer a função funcionar automaticamente, você pode criar um evento personalizado acionado pela presença de uma nova tag

no DOM.

    
// Make the MutationObserver
var observer = new MutationObserver(function(mutationsList) {
    // Verify all mutations observer
    for (var mutation of mutationsList) {
      // Verify if add node on DOM
      if (mutation.type === 'childList') {
        // Verify each add node
        for (var addedNode of mutation.addedNodes) {
          // Verify if add node is a element <article>
          if (addedNode instanceof HTMLElement && addedNode.tagName === 'ARTICLE') {
            // Let the custom event
            var articleEvent = new CustomEvent('articleCreated', { detail: addedNode });
            document.dispatchEvent(articleEvent);
          }
        }
      }
    }
  });

  // Configure the Observer to observe add nodes on the DOM
  observer.observe(document.body, { childList: true, subtree: true });

    document.addEventListener('articleCreated', () => {

        modifyPost(localStorage.getItem("modeView"));
    });

Recapitulando

Este artigo nos guiou pelo processo de criação de uma extensão do Chrome para ocultar ou destacar postagens premium em “medium.com”.
Começamos configurando a estrutura de arquivo necessária, incluindo um arquivo script.js para implementar a funcionalidade da extensão.
Ao ativar o Modo de desenvolvedor no Gerenciador de extensões, pudemos carregar nossa extensão descompactada no Chrome, permitindo testar e refinar seus recursos.
Aprendemos sobre a importância do armazenamento local para persistir e controlar o estado de ocultar ou destacar postagens premium.
Ao definir o item “modeView” no armazenamento local, garantimos que a extensão retivesse o modo de visualização preferido do usuário nas sessões do navegador. Adicionalmente, discutimos a implementação de um botão com dois estados, incorporando ícones para representar os modos “ocultar” e “realçar”. Utilizando arquivos de imagem armazenados no diretório “images”, conseguimos personalizar a aparência do botão e fornecer uma indicação visual do modo ativo. Para aprimorar a experiência do usuário e automatizar a funcionalidade, criamos um evento personalizado acionado pela adição de uma nova tag

no DOM.
Isso nos permitiu executar determinadas ações automaticamente sempre que um novo artigo era detectado na página. Ao seguir as etapas e os conceitos descritos neste artigo, os leitores adquiriram o conhecimento e as habilidades necessárias para desenvolver suas próprias extensões do Chrome, capacitando-os a personalizar sua experiência de navegação e adaptá-la às suas preferências em plataformas como “medium.com”.

**OBS:**O código ainda conta com alguns Bugs. Tal qual: quando você vem de algum artigo para a pagina inicial a Extensão não inicia, tem que atualizar a página para voltar a funcionar. A correção desse Bug pode ser um desafio. E aí topa resolver?

---

Artigo em Inglês