Desativar todas as folhas de estilo CSS
Dado que a maioria das páginas modernas define todos os estilos nos arquivos CSS externos incluídos no <head>, a remoção da headmarca removerá efetivamente todos os estilos (exceto os estilos embutidos explícitos e os definidos pelos scripts). Clique com o botão direito do mouse em uma página, escolha Inspecionar no menu de contexto e cole-o na guia Console:
document.head.parentNode.removeChild(document.head);
E aqui está a versão do bookmarklet do código acima, que pode ser colada como o URL de um favorito (alterne a barra de favoritos no Chrome com ⌘+ shift+ bno Mac ou ctrl+ shift+ bno Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
Você também pode digitar o código acima diretamente na barra de endereços, mas leia a nota no final da resposta antes de fazer isso. .
A remoção do <head>também pode ser feita na guia Elementos do devtools , clicando com o botão direito do mouse na tag head e excluindo-a através do menu de contexto:
NOTA: A remoção da tag head é uma abordagem de força bruta, pois mata todos os estilos, javascript, fontes da web etc., e se o conteúdo da página for renderizado por javascript, é provável que você obtenha uma página vazia. Na maioria dos sites, provavelmente ele fornecerá os resultados esperados.
Um caso de uso mais frequente é remover itens irritantes específicos de uma página, como cores, margens, iframes etc. Nesse caso, um dos seguintes bookmarklets fornecerá um controle mais granular.
Remova cores, planos de fundo, margens, preenchimentos, larguras
Crie um marcador e adicione o seguinte snippet como o URL:
javascript:(function(){for(i=0;i<document.styleSheets.length;i++){document.styleSheets.item(i).disabled=true;}all=document.getElementsByTagName('*');for(i=0;i<all.length;i++){el=all[i];el.style.cssText='';el.style.width='';el.style.padding='0px';el.style.margin='2px';el.style.backgroundImage='none';el.style.backgroundColor='#fff';el.style.color='#000';}})()
Agora você pode clicar no seu bookmarklet para limpar o estilo CSS na página atual para algo mais legível.
Nota: Na verdade, é possível que uma página tenha um <style>bloco dentro da <body>tag - o padrão HTML5 permite que isso e a maioria dos navegadores sejam compatíveis. Até o momento, isso não é uma prática comum, mas, à medida que as estruturas da Web evoluem, podemos ver mais 'folhas de estilos locais' na futura Web.
Se você simplesmente deseja melhorar a legibilidade, desabilitar todo o CSS pode não fornecer a melhor experiência. Nesses casos, os bookmarklets abaixo podem fornecer melhores resultados:
Remover cabeçalhos / rodapés sem rolagem (aumenta a área de leitura)
javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()
Remova iframes (mata a maioria dos banners, etc.)
javascript:var frames %3D document.getElementsByTagName%28"iframe"%29%3Bfor %28%3Bframes.length%3B%29 %7Bframes%5Bframes.length-1%5D.parentNode.removeChild%28frames%5Bframes.length-1%5D%29%3B%7Dvoid%280%29
Isso também matará a maioria dos vídeos incorporados, widgets de comentários etc.
Remover todas as imagens (navegação no modo escritório)
javascript:(function(){function toArray(c){var a,k;a=new Array;for(k=0;k<c.length;++k)a[k]=c[k];return a;}var images,img,altText;images=toArray(document.images);for(var i=0;i<images.length;++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,img)}var alle=document.getElementsByTagName("*");for(var i=0,max=alle.length;i<max;i++){alle[i].style.backgroundImage='none';}})();
Nota: este precisa ser usado em combinação com Remover iframes acima, pois a maioria das imagens de banner geralmente está dentro de iframes e este bookmarklet funciona apenas com o documento de nível superior.
Os bookmarklets também podem ser usados para sites que não exibem conteúdo quando são usados bloqueadores de anúncios.
Você pode usar o Bookmarklet Builder para desinstalar o código (o botão Formatar ), editá-lo para atender às suas necessidades e reduzi-lo novamente (o botão Compactar ) para algo que você possa colar como o URL do marcador.
Os bookmarklets listados acima também funcionarão na maioria dos navegadores da web móveis para iOS e Android. Os navegadores móveis não executam javascript na barra de endereços, mas você pode adicionar um marcador, colar o código js como URL, definir um rótulo, por exemplo clean, e depois executá-lo tocando no item no menu de marcadores (para IOS Safari) ou digitando cleanna barra de endereço e tocando no marcador correspondente no menu suspenso de sugestão automática. Isso pode melhorar a legibilidade de páginas que não têm modo de leitura .
NOTA: Se você copiar e colar os bookmarklets acima diretamente na barra de endereços, notará que os navegadores removem ojavascript: prefixo - esse é um recurso de segurança do navegador; portanto, se você quiser testar os bookmarklets diretamente da barra de endereços, poderá precisa anexar javascript:manualmente antes do código js.
Extensões do Chrome
Se você está procurando uma extensão do Chrome, existe o uMatrix, no qual você pode clicar na coluna CSS para desativar todos os estilos e CSS, e o Web Developer, na guia CSS, na opção Desativar todos os estilos .
