Wyłącz wszystkie arkusze stylów CSS
Biorąc pod uwagę, że większość współczesnych stron definiuje wszystkie style w zewnętrznych plikach CSS, które są zawarte w <head>, usunięcie headznacznika skutecznie usunie wszystkie style (z wyjątkiem jawnych stylów wstawianych i ustawionych przez skrypty). Kliknij stronę prawym przyciskiem myszy, wybierz polecenie Inspect z menu kontekstowego i wklej to do zakładki Console:
document.head.parentNode.removeChild(document.head);
A oto wersja kodu z zakładki powyżej, którą można wkleić jako adres URL zakładki (przełącz pasek zakładek w Chrome za pomocą ⌘+ shift+ bna Macu lub ctrl+ shift+ bna Linux / Windows) :
javascript:(function(){document.head.parentNode.removeChild(document.head);})()
Możesz także wpisać powyższy kod bezpośrednio w pasku adresu, ale zanim to zrobisz, przeczytaj notatkę na końcu odpowiedzi. .
Usunięcie <head>można również wykonać na karcie Elementy devtools , klikając prawym przyciskiem myszy znacznik head i usuwając go za pomocą menu kontekstowego:
UWAGA: Usunięcie tagu głowy jest trochę brutalną metodą, ponieważ zabije wszystkie style, javascript, czcionki internetowe itp., A jeśli zawartość strony jest renderowana przez javascript, najprawdopodobniej otrzymasz pustą stronę. W większości witryn prawdopodobnie przyniesie to oczekiwane rezultaty.
Częstszym przypadkiem użycia jest usunięcie określonych irytujących rzeczy na stronie, takich jak kolory, marginesy, ramki iframe itp. W takim przypadku jedna z poniższych zakładek zapewni bardziej szczegółową kontrolę.
Usuń kolory, tła, marginesy, wypełnienia, szerokości
Utwórz zakładkę i dodaj następujący fragment jako adres 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';}})()
Teraz możesz kliknąć bookmarklet, aby oczyścić styl CSS na bieżącej stronie z czegoś bardziej czytelnego.
Uwaga: W rzeczywistości strona może mieć <style>blok wewnątrz <body>tagu - standard HTML5 pozwala na to i większość przeglądarek obsługuje go. Jak dotąd nie jest to powszechna praktyka, ale w miarę ewolucji frameworków internetowych możemy zobaczyć w przyszłości więcej „lokalnych arkuszy stylów”.
Jeśli chcesz po prostu poprawić czytelność, wyłączenie całego CSS może nie zapewnić najlepszej jakości. W takich przypadkach poniższe zakładki mogą dać lepsze wyniki:
Usuń nieprzewijające się nagłówki / stopki (zwiększa obszar czytania)
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);}}})()
Usuń iframe (zabija większość banerów itp.)
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
Zabije to również większość osadzonych filmów, widżety komentarzy itp.
Usuń wszystkie obrazy (przeglądanie w trybie biurowym)
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';}})();
Uwaga: należy użyć tego w połączeniu z powyższym opcją Usuń iframe , ponieważ większość obrazów banerów zwykle znajduje się w elementach iframe, a ta broszura działa tylko z dokumentem najwyższego poziomu.
Bookmarklety mogą być również używane w witrynach, które nie wyświetlają treści, gdy stosowane są blokery reklam.
Możesz użyć Kreatora zakładek do unminify kodu ( przycisk Format ), edytować go zgodnie z własnymi potrzebami i zminimalizować go ( przycisk Kompresuj ) do czegoś, co możesz wkleić jako adres URL zakładki.
Bookmarklety wymienione powyżej będą również działać w większości przeglądarek mobilnych na iOS i Androidzie. Przeglądarki mobilne nie uruchamiają javascript z paska adresu, ale możesz dodać zakładkę, wkleić kod js jako adres URL, ustawić etykietę, np. clean, A następnie uruchomić ją, dotykając elementu w menu zakładek (dla IOS safari) lub wpisując cleanpasek adresu, a następnie stukając odpowiednią zakładkę w menu rozwijanym autosugestii. Może to poprawić czytelność stron, które nie mają trybu czytania .
UWAGA: Jeśli skopiujesz i wkleisz powyższe bookmarklety bezpośrednio w pasku adresu, zauważysz, że przeglądarki usuwająjavascript: prefiks - jest to funkcja bezpieczeństwa przeglądarki, więc jeśli chcesz przetestować bookmarklety bezpośrednio z paska adresu, wtedy trzeba javascript:ręcznie dodać przed kodem js.
Rozszerzenia Chrome
Jeśli szukasz rozszerzenia chrome, jest uMatrix, w którym możesz kliknąć kolumnę CSS, aby wyłączyć wszystkie CSS i style, oraz Web Developer, gdzie na karcie CSS masz opcję Wyłącz wszystkie style .
