#desenvolvimento, #projetos

No Comments – Extensão pro Chrome


Olá pessoas.

Após muito tempo sem posts resolvi escrever sobre uma extensão para o Chrome que fiz recentemente. Não irei me ater aos detalhes de como criar a extensão porque acredito que uma lida na documentação é suficiente para este fim.

Meu objetivo é discorrer sobre a motivação para criá-la e os recursos que utilizei.

Alguns sabem que a Web 2.0  trouxe a possibilidade dos usuários colaborarem com o conteúdo publicado através da inclusão de comentários, avaliações, personalização e compartilhamento. A ideia é linda mas o fato é que na maioria dos sites os comentários não adicionam nenhum valor ao conteúdo.

Hoje em uma lista de comentários é raro não ter pelo menos um comentário escrito com o intuito de ofender alguém. Nos grandes sites de notícias do nosso lindo país é comum ver centenas de comentários que nos fazem desacreditar na humanidade.  Às vezes a gente nem quer ler mas acaba lendo involuntariamente ao navegar pela página. E neste caso eu concordo plenamente com a frase: “A ignorância é um dom”. E não, eu não estou sendo contra a liberdade de expressão, só acho que não sou obrigada a ler esses lixos certas opiniões.

Partindo daí eu procurei por alguma extensão, pro Chrome, que bloqueasse a visualização dos comentários. Encontrei algumas, testei mas não funcionaram exatamente como eu queria e por isso eu resolvi desenvolvê-la :D.

O objetivo da extensão é bem simples: ocultar todos os comentários de todas as páginas assim que a página for carregada. Como um plus eu adicionei a possibilidade de reverter o processo porque apesar de tudo ainda tem alguns casos que queremos ver os comentários, mesmo que seja só para rir ou passar raiva.

Talk is cheap. Show me the code.

Torvalds, Linus

Então vamos ver como essa tal extensão foi feita, né.

Para que o seu código seja visto como uma extensão você precisa adicionar um arquivo chamado manifest.json que conterá as definições das propriedades.

{
  ...

  "background": {
    // Define qual é o JS principal da extensão.
    "scripts": ["background.js"]
  },

  "icons": {
    // Define o ícone exibido na lista de extensões (chrome://extensions).
    "128": "icon128.png";
  },

  "browser_action": {
    // Define o ícone exibido na omnibox.
    "default_icon": "icon.png"
  },

  "content_scripts": [ {
    // Define quais JS serão utilizados pela extensão.
    "js": [ "jquery-2.0.3.min.js", "functions.js" ],
    // Define para quais sites a extensão será carregada.
    "matches": [ "http://*/*", "https://*/*" ],
    // Define para quais sites a extensão NÃO será carregada.
    "exclude_matches": [ "https://*.github.com/*" ]
  }]

  ...
}

Como definimos o arquivo background.js como JS principal, ele será executado assim que a extensão for carregada.

// Adiciona o ouvinte para o clique no ícone da extensão.
chrome.browserAction.onClicked.addListener(function(tab) {
  // Define qual JS será executado quando receber o clique.
  chrome.tabs.executeScript(tab.id, {file: 'onclick_script.js'});
});

O arquivo onclick_script.js contém apenas uma verificação para identificar se os comentários serão exibidos ou ocultados no momento em que receber o clique.

if (show){
  show = false;
  showComments();
} else {
  show = true;
  hideComments();
}

E a ~~mágica~~ toda está acontecendo no arquivo functions.js. Aqui eu utilizei o jQuery para facilitar a vida juntamente com este sagaz código que seleciona os elementos utilizando expressão regular. A intenção era encontrar todos os elementos que tivessem nos atributos id e class o conteúdo coment(ario) ou comment. Por fim eu adicionei também um critério para buscar pelos comentários que utilizam o Disqus.

function showComments() {
  // Percorre os elementos encontrados exibindo-os.
  jQuery.each(elementsToShowById, function() {
    $(this).show();
  });
}

function hideComments() {

  var disqusExpression = '.*disqus_thread.*';
  var commentExpression = '.*[Cc]o(m|mm)ent.*';

  getVisibleElements('id', commentExpression);
  getVisibleElements('class', commentExpression);
  getVisibleElements('id', disqusExpression);

  // Percorre os elementos encontrados ocultando-os.
  jQuery.each(elementsToShowById, function() {
    $(this).hide();
  });
}

function getVisibleElements(attribute, expression) {
  // Seleciona os elementos pela expressão regular.
  $(':regex(' + attribute + ', ' + expression + ')').filter(function() {
    // Armazena apenas os elementos que estão visíveis.
    if ($(this).is(':visible')){
      elementsToShowById.push($(this));
    }
  });
}

Claro que esta é somente uma das inúmeras maneiras de fazer isto e que pretendo continuar evoluindo a extensão. De pronto já informo que a primeira melhoria a ser implementada é fazer a extensão ocultar os comentários do Youtube que não utiliza a palavra comments para definir seus elementos relacionados aos comentários.

É isso! Fiquem à vontade para instalar, testar e colaborar com a extensão.

Até breve.

PS.: Como eu disse tem casos que convém ler os comentários por isso mesmo que pareça contraditório eu leio e libero todos os comentários do blog, exceto os de spam ;).

Anúncios
Padrão

Um comentário sobre “No Comments – Extensão pro Chrome

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s