6

Fiz uma extensão para o Google Chrome que está a funcionar. O objetivo é alterar a cor dos píxeis das imagens, em todas as páginas web.

Para fazer isso nas páginas carregadas nos tabs já abertos, uso o seguinte código (no ficheiro background.js):

function executeScriptsInExistingTabs(){
  chrome.windows.getAll(null, function(wins) {
    for (var j = 0; j < wins.length; ++j) {
      chrome.tabs.getAllInWindow(wins[j].id, function(tabs) {
        for (var i = 0; i < tabs.length; ++i) {
          if (tabs[i].url.indexOf("chrome://") != 0) {
            chrome.tabs.executeScript(tabs[i].id, { file: 'muda_conteudo.js' });
            chrome.browserAction.setIcon({path: "on.png", tabId:tabs[i].id});
          }
        }
      });
     }
   });
 }

Para alterar a cor, nos tabs que venham a ser abertos posteriormente à ativação da extensão, uso o seguinte código (in the background.js file):

chrome.tabs.onUpdated.addListener(function(tabid, info, tab) {
  if (flag){
    if (info.status == "complete") {
       chrome.tabs.executeScript(tabid, {file:"muda_conteudo.js"});
       chrome.browserAction.setIcon({path: "on.png", tabId:tab.id})
    }
  }
});

Tudo funciona perfeitamente, mas quando um novo tab é aberto, vê-se primeiro as imagens originais e só uns microsegundos depois são substituídas pelas imagens recoloridas. Gostaria de corrigir esse facto. Alguém tem uma ideia de como fazê-lo ?

3
  • 1
    O evento que você está usando espera o conteúdo terminar de carregar na tab para em seguida aplicar o script. Como a operação que quer fazer depende do conteúdo carregado, não sei se existe outra maneira.
    – bfavaretto
    23/04/2014 às 12:23
  • Não sei se isso funciona mas, acho que você pode adicionar um "visible:hidden" nas tags de imagem, assim elas continuam carregando e você pode aguardar todo conteúdo terminar de carregar para executar seu script e mostra-las. 25/04/2014 às 3:09
  • Obrigada pela sugestão, mas não serve, neste caso. A extensão está preparada para funcionar com qualquer página web que é carregada no browser, particularmente todas as que não são criadas por mim. Por isso não posso definir o estado das imagens. 27/04/2014 às 15:19

1 Resposta 1

2

Como bfavaretto mencionou você só trabalha com as imagens quando o site está completamente carregado, o que fazer o navegador desenhar a tela novamente.

O que você fazer é remover todas as imagens enquanto o site carrega, como mencionado pelo Jan Cássio. Para fazer isso, você pode utilizar de varias estratégias, sendo uma delas criar um script que defina display: none, sabendo que nem todas as páginas estão sobre o seu controle, você pode criar uma pequena função em Javascript e executar antes do site carregar por completo.

(function () {
    var imagens = document.querySelectorAll("img");

    for(var i=0; i< imagens.length;i++) {
        imagens[i].style.display = "none";
    }
}());

O problema é que este script funciona somente para as imagens dentro da tag img, além disso ele só consegue esconder as imagens que já estão presentes no página até o momento de execução, o que pode ser um problema em sites com vários elementos de imagens. Esta solução também não deve funcionar quando utilizando Lazy Loading, provavelmente você teria que chamar a função diversas vezes para conseguir o resultado esperado.

Uma solução mais completa pode ser conseguida utilizando CSS, ao definir que as imagens devem ter o display: none logo no inicio do body, ao carregar as páginas tudo deve funcionar de forma normal. E quando terminar de carregar todo o conteúdo, você ativar novamente a visualização.

Por exemplo:

img{
    display: none !important; 
}

Perceba o uso de !important, utilizamos isso para garantir a sobre escrita das propriedades das imagens já definidas dentro de outros arquivos CSS. Ao adicionar este CSS no inicio do body podemos garantir que as imagens não serão visiveis.

Agora para adicionar nosso estilo css devemos colocar no topo da página, ou dentro do head logo após os estilos CSS do proprio site ou no inicio do body. De acordo com a documentação da Google você tem que definir o seguinte no seu arquivo manifest.

"run_at": "document_start"

Feito isso basta apenas fazer algo como:

function escondeImagens() {
    var conteudo   =    "<style id='fix_imagens'>img{display: none !important;}</style>";
    var head       = document.querySelector("head");
    head.innerHTML = head.innerHTML +  conteudo;
}

Vale lembrar que como o seu script vai executar antes da tag head existir, se você chamar muito cedo a função nada ira acontecer, então provavelmente terá que fazer uso do setTimeout para garantir que o head já existe.

Para exibir as imagens novamente para selecionar o elemento com id fix_imagens e remover o seu conteúdo.

var elem = document.querySelector('#fix_imagens');
elem.innerHTML = '';
1
  • Muito obrigada :-) 2/05/2016 às 15:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .