Substituir apenas uma fonte especificada no Chrome

Question

Acho que a Geórgia está sobrecarregada, já que se tornou motivo de raiva em muitos sites no último ano. Eu tenho folhas de estilo personalizadas configuradas no Chrome para ajustar vários sites que eu gosto, mas torna-se proibitivo fazer uma folha de estilo personalizada para todos os sites, e eu realmente só quero fazer uma substituição onde eles usei a Geórgia. Igualmente irritante é o pop-up do inspetor sempre que eu mudo uma página para definir as fontes novamente. Alguém sabe como fazer isto? Infelizmente, parece não haver um plugin que tenha isso - ou eles substituem todas as fontes em uma página, ou são muito estreitas em foco.

Se não houver nada lá fora, eu posso considerar escrever um bookmarklet para fazer exatamente isso, e talvez eventualmente expandi-lo para o (s) plugin (s) para os vários navegadores, mas prefiro não duplicar o trabalho que alguém já fez. / p>     

Answer 1

Crie uma extensão do Chrome que examine as tags listadas na matriz types em qualquer página aberta. Se o processo encontrou um nó com o atributo de estilo font-family igual a fontin , ele será substituído por fontout .

• Crie uma nova pasta chamada, por exemplo, myplugin

• Na pasta, crie um novo arquivo chamado manifest.json e adicione este código dentro:

{
  "name": "Font change",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Font change.",  
  "content_scripts": [ {
      "all_frames": true,
      "exclude_globs": [  ],
      "include_globs": [ "*" ],  
      "js": [ "script.js" ],
      "matches": [ "http://*/", "https://*/", "https://*/*", "http://*/*" ],
      "run_at": "document_end"
   } ],
  "permissions": [ "tabs", "http://*/", "https://*/", "https://*/*", "http://*/*", "contextMenus" ]      
}

• Nessa pasta, crie um novo arquivo chamado script.js e adicione esse código dentro:

var types = new Array("textarea","input","div","h1","h2","h3","span","p");
var fontin ="Verdana";
var fontout = "\'Courier New\'";

(function(){    
    chrome.extension.sendRequest({
        set:"font"
    },function(response){
        for(var i=0;i<types.length;i++){        
            var node = document.getElementsByTagName(types[i]);
                for(var y=0;y<node.length;y++){                             
                    if(node[y].style.fontFamily==fontin){
                       node[y].style.fontFamily = fontout;
                }
           }
        }
  });
})();

• Vá para o menu do Google Chrome »Configurações» Extensões.

• Agora clicamos no botão "Carregar extensões descompactadas".

• Por fim, marcamos nossa pasta e clicamos no botão de abertura.

Você pode ver que o sistema é muito simples e pode personalizar o arquivo script.js com seu próprio código de controle. No futuro, você pode adicionar outros scripts, CSS, páginas de configuração, etc.

Lembre-se que toda vez que você fizer mudanças no arquivo script.js você deve recarregar o plugin com + R .

Além disso, você pode obter um guia mais detalhado sobre como criar extensões do Chrome .