Kontrolowanie prezentacji stron WWW — usuwanie reklam

Internet to źródło informacji, to miejsce wymiany poglądów i wiedzy. Tutaj także można wiele zarobić. Niezliczona ilość sklepów, firm oferuje w sieci swoje produkty. Jak i w normalnym (czyli poza komputerem) świecie istnieją tutaj także reklamy. Mają one zachęcać użytkownika do zapoznania się z ofertą danej firmy/sklepu i zrobienia zakupów. Nie są one problemem, jeśli stanowią statyczne obrazkowelub tekstowe bloki. Jednak najwięcej osób spojrzy na wielką jaskrawą planszę z migającym napisem (niestety właśnie takie bannery reklamowe powstają najczęściej). Spojrzy... najczęściej z odrazą.

Jeśli masz już totalnie dość reklam na stronach i chcesz się ich pozbyć — ten tekst jest dla Ciebie, przedstawię tutaj najważniejsze sposoby radzenia sobie z niechcianymi elementami stron internetowych.

Co to jest reklama?

Reklama (z łac. reclamo, reclamare) to bezosobowa, odpłatna i adresowana do masowego odbiorcy forma przekazywania informacji rynkowych, mająca określonego nadawcę. Zazwyczaj ma na celu skłonienie do nabycia lub korzystania z określonych towarów czy usług, popierania określonych spraw lub idei. Powinna budzić pragnienie posiadania przedstawianego towaru, uświadamiać koniczność jego posiadania.

Reklama internetowa jest nieco odmienna od wersji tradycyjnej. Przede wszystkim może być interaktywna i automatycznie dostosowywać się do klienta (np. wyświetlanie w reklamie na portalach społecznościowych imienia odbiorcy). Ma trzy główne cele: budowanie świadomości istnienia produkty/marki, dążenie do zwiększenia sprzedaży oraz zachęcenie do odwiedzin (najczęściej powtarzanych) na stronie WWW producenta.

Reklamy internetowe możemy podzielić na:

  1. banner (ang. sztandar, transparent) — blok graficzny, najczęściej wykonany w technologii Flash lub statyczny (zapisany wtedy jako plik JPEG lub GIF). Jest najczęściej odnośnikiem do reklamowanej strony. Zwykle ma poniżej 500 pikseli szerokości.
  2. expand banner — banner, który rozwija się (ogólnie: zwiększa rozmiar) po najechaniu na niego.
  3. button (ang. przycisk) — mała forma bannera, wielkości zazwyczaj ok. 120 na 60 pikseli, po którego kliknięciu przenosimy się na stronę reklamodawcy.
  4. antypixel — kolejna odmiana bannera, przycisk o wielkości 80 na 15 pikseli z zastosowaną najczęściej czcionką Silkscreen.
  5. pop-up — wyskakujące okienko, które wyświetla się najczęściej po wejściu na stronę. Wykonywane najczęściej w technologii JavaScript i Flash. Bardzo denerwujące dla odbiorcy, dlatego wiele przeglądarek posiada wbudowaną funkcję blokowania wyskakujących okienek.
  6. pop-under — forma wyskakującego okienka, które wyświetla się pod oknem przeglądarki, widoczne najczęściej po jej zamknięciu. Również blokowane.
  7. skyscraper (ang. drapacz chmur) — odmiana bannera, pionowy blok reklamowy, zazwyczaj o wymiarach 120 na 600 pikseli.
  8. mailing — chyba najbardziej denerwujące reklamy — zazwyczaj zwykły spam, czyli wiadomości e-mailowe wychwalające produkt.
  9. brand mark — blok reklamowy, wyświetlany w najwyższej warstwie otwieranego dokumentu.
  10. blogvertising — reklama na blogu.
  11. keyword advertising (linki sponsorowane) — ogłoszenia, kojarzone ze słowami kluczowymi, wyświetlane na liście odsyłaczy w wyszukiwarkach internetowych.
  12. meta ad — baner reklamowy wyświetlany w wyszukiwarce, tematycznie związana z wyszukiwaną frazą.
  13. reklama kontekstowa — reklama tematycznie związana z przeglądaną przez użytkownika stroną czy wiadomością. Przykładem jest Google AdSense — tekstowe reklamy pokazywane na wielu stronach.
  14. billboard — powierzchnia, na której umieszczane są reklamy; podobna do bannera.
  15. mapvertising — reklama w postaci logo firmy, wyświetlana na mapie; po uaktywnieniu wyświetla podstawowe informacje o reklamowanym podmiocie.
  16. expand billboard — billboard, który rozwija się po najechaniu na niego kursorem.
  17. toplayer — animacja, wyświetlana na najwyższej, przezroczystej, warstwie strony.
  18. interstitial — pełnoekranowa animacja, wyświetlana przed pełnym załadowaniem strony internetowej; bardzo denerwująca.
  19. reklama pływająca — blok reklamowy, przemieszczający się nad właściwą treścią strony, zazwyczaj z przesuwaniem jej przez użytkownika.

Programy do blokowania reklam

Wszystkie przedstawione programy są darmowe.

Ad Muncher

Świetny programik blokujący reklamy w większości przeglądarek oraz Pando, SopCast, ICQ, Morpheus, Kazaa, PalTalk, iMesh, Bearshare, LimeWire, Yahoo! Music Jukebox, TVAnts i innych, jak zapewnia autor.

Strona domowa programu

DOWNLOAD

AdBlock Plus

Świetny dodatek automatycznie usuwający większość reklam. Umożliwia ręczne stosowanie filtrów: tworzenie reguł (usuwać) i wyjątków (nie usuwać). Polska instrukcja tworzenia filtrów jest dostępna TUTAJ. Funkcjonuje z następującymi przeglądarkami i programami: Mozilla Firefox, Mozilla Thunderbird, Mozilla Fennec, Arora, SeaMonkey, K-Meleon, Songbird, eMusic Remote, Prism. Program, jako chyba jedyny z darmowych, ukrywa linki sponsorowane w wyszukiwarkach.

Strona domowa programu

DOWNLOAD

AdBlock Plus for Google Chrome

Wersja powyższego rozszerzenia dla Google Chrome.

Strona domowa programu

DOWNLOAD

AdBlock IE

Wzorowany na AdBlocku przeznaczony dla IE 8 programik blokujący reklamy.

Strona domowa programu

DOWNLOAD

AdKiller Daemon

Aplikacja blokująca wyskakujące okienka w IE, Netscape i Operze.

Strona domowa programu padła.

DOWNLOAD

AdSTOP

Program do blokowania reklam w przeglądarkach i Gadu-Gadu.

Strona domowa programu

DOWNLOAD

AdSweep

Kolejny program, wzorowany na AdBlocku, służący do usuwania reklam. Działa z Google Chrome, Operą, Safari, Firefoxem.

Strona domowa programu i download

AKiller

Programik blokujący wyskakujące okienka, działa z większością przeglądarek.

Strona domowa programu

DOWNLOAD

IE AdBlock

Dodatek do Internet Explorer 6 i 7 blokujący reklamy, oparty na darmowym Adblock Plus.

Strona domowa programu

DOWNLOAD

IE7Pro

Wtyczka do Internet Explorer w wersjach 6 – 8 zawierająca wiele funkcji i dodatków, m. in. blokowanie reklam i flasha, gesty myszy, Greasemonkey. Dodatek przemyca reklamowy mechanizm OpenCandy, czego można się pozbyć poprzez uruchomienie instalatora z linii poleceń z parametrzem /NOCANDY.

Strona domowa programu

DOWNLOAD

Mute Flash

Wtyczka do Mozilli Firefox i pokrewnych mająca za zadanie wyciszenie filmików wykonanych w technologii Flash. Działa tylko pod XP.

DOWNLOAD

Opera AdBlock

Zestaw filtrów reklam dla Opery. Blokowanie odbywa się za pomocą pliku urlfilter.ini, który można samodzielnie edytować. W sieci są dostępne gotowe filtry blokujące, np. TUTAJ.

Opis na OperaWiki

Pop-down

Jeszcze jedna aplikacja do blokowania pop-up. Współpracuje z IE.

Strona domowa programu

DOWNLOAD

Popup Free

Kolejny programik dla IE przeznaczony do blokowania wyskakujących okienek.

Strona domowa programu

DOWNLOAD

Privoxy

Oprogramowanie serwera pośredniczącego dla protokołów HTTP i SSL. Umożliwia blokowanie reklam, ciasteczek, niechcianej zawartości, interntowego spyware, modyfikację nagłówków HTTP. Działa w systemach: Linux, Windows, Solaris, NetBSD, FreeBSD, OpenBSD, OS/2, Mac OS X, AmigaOS.

Strona domowa programu

DOWNLOAD

Proxomitron

Świetny programik do blokowania niechcianej zawartości.

Strona domowa programu

DOWNLOAD

Simple Adblock

Dodatek dla Internet Expolrer 7 - 9 usuwający reklamy.

Strona domowa programu

DOWNLOAD

Blokowanie serwerów z reklamami

Na wielu serwerach przechowywane są tylko materiały reklamowe. Są one często wykorzystywane przez firmy świadczące usługi reklamowe w sieci, a także prowadzące statystyki odwiedzin witryn, np. stat24.pl. Do skryptu zliczającego ilość odwiedzin (dla darmowych statystyk) dodane są bardzo często polecenia, których celem jest wyświetlanie reklam. Można je blokować przy pomocy pliku HOSTS. Więcej informacji TUTAJ.

Blokowanie za pomocą Kaskadowych arkuszy stylów

Pozostała jeszcze jedna bardzo ważna możliwość ingerencji w wygląd witryny internetowej — są nią arkusze stylów CSS. Dzięki nim możemy zaprojektować cudzą witrynę praktycznie od podstaw.

Ostatnio pojawiło się wiele materiałów, jak usunąć niektóre dodane na siłę funkcjonalności wielu witryn, zwłaszcza tzw. „śledzika” na portalu Nasza Klasa, którego tutaj usuniemy. Jednak prace te mają w większości dużą wadę, podają gotowe rozwiązanie, bez informowania użytkownika o działaniu hacka. Tutaj posuniemy się o krok dalej — prawda, że ciekawie by było precyzyjnie kontrolować zawartość strony wedle własnego uznania? Usuwać to, co uważamy za zbędne! A więc do dzieła.

Co to jest CSS?

Stosunkowo niedawno (czyli w latach 90-tych) powstała świetna metoda pozwalająca na oddzielenie zasad prezentacji od czystego tekstu strony, napisanego w HTML-u. Metoda ta to CSS — Kaskadowe arkusze stylów.

Technologia ta wprowadza dwie wielkie zmiany:

  • po pierwsze, nie trzeba formatować stron przy pomocy kodu HTML, i tak już przeciążonego,
  • po drugie, pozwala zwykłemu użytkownikowi dowolnie przekształcać czyjeś strony. Tym właśnie się tutaj zajmiemy.

By osiągnąć wprawę w „czyszczeniu” stron internetowych z niepotrzebnych naszym zdaniem elementów, musimy zapoznać się z przedstawioną w linku — KLIK — tabelką selektorów CSS...

...ale zaraz! Co to jest selektor. Arkusze stylów CSS składają się z definicji odnoszących się do właściwych im elementów strony.

selektor {
 właściwość: wartość;
}

Tak wygląda podstawowy model jednej reguły stylu. Reguły dotyczące jednego selektora muszą znaleźć się pomiędzy nawiasami klamrowymi { i }. Każda para właściwość (za wyjątkiem ostatniej przed nawiasem zamykającym) – wartość musi kończyć się średnikiem ;. a po każdej nazwie właściwości występuje dwukropek :. Spacja po dwukropku nie jest wymagana, lecz wpływa pozytywnie na czytelność arkusza.

Definicja selektora, sposoby działania reguł zostały przedstawione dokładniej TUTAJ.

Przykładowo, by określić, że każdy akapit w dokumencie musi być wyświetlany czerwoną czcionką należy utworzyć regułę...

p {
 color: red;
}

...a w celu pokolorowania tekstu na niebiesko każdego akapitu znajdującego się w bloku o identyfikatorze main_body stosujemy

#main_body p {
 color: blue;
}

Reguły te, choć podobne, nie dają identycznych wyników. Pierwszy zapis dotyczy wszystkich akapitów na stronie, dla których nie zdefiniowano dokładniejszych reguł gdzie indziej. (więcej o kaskadowości CSS TUTAJ) Tak więc, jeśli zastosujemy obie reguły na raz, wszystkie akapity, za wyjątkiem tych znajdujących się w elemencie o identyfikatorze main_body, będą zawierały czerwony tekst.

Gdzie umieszczać reguły?

Podane formuły CSS można stosować w każdej przeglądarce dopuszczającej możliwość zastosowania własnego arkusza stylów lub edycję arkusza przeglądarki. Reguły zapisuje się w zwykłym pliku tekstowym jakaś_tam_nazwa.css Ważne jest rozszerzenie .css, którego nie może zabraknąć.

Internet Explorer

Uruchom przeglądarkę. Następnie przejdź do Narzędzia —> Opcje internetowe —> Dostępność (prawy dolny róg). W okienku zaptaszkuj „Formatuj dokumenty używając mojego arkusza stylów”. Potem przeglądaj i podajemy utworzony wcześniej przez nas plik.

Opera

Odpal przeglądarkę, potem Narzędzia —> Preferencje —> Zaawansowane, klikamy „Zawartość”, następnie „Opcje stylów”. Na dole okienka kliknij Wybierz, wskaż plik ze stylami.

Firefox

W Firefoxie reguły można umieścić w dwóch miejscach:

Dla wszystkich profili

Ta metoda pozwala na utworzenie reguł CSS, które będą stosowane we wszystkich profilach przeglądarki.

Przejdź do katalogu, gdzie jest zainstalowany Firefox, potem res, znajdujdź plik html.css, który otwierz notatnikiem i dopisz na końcu stworzone reguły CSS. Tak wygląda u mnie ścieżka dostępu do katalogu: C:\Program Files\Mozilla Firefox\res

Dla jednego profilu

Jeżeli chcemy utworzyć reguły stosowane tylko w jednym profilu możemy wykorzystać do tego plik userContent.css. Jest to zwykły plik tekstowy znajdujący się w katalogu profilu przeglądarki Firefox. U każdego ścieżka dostępu do pliku wygląda inaczej. Oto moja:

C:\Users\DawidS28\AppData\Roaming\Mozilla\Firefox\Profiles\txhboewp.default\chrome — Vista i 7

C:\Documents and Settings\DawidS28\AppData\Mozilla\Firefox\Profiles\ks6nbcxb.default\chrome — XP i starsze.

Możemy tutaj wyróżnić kilka fragmentów:

  1. C:\ — nasza partycja systemowa.
  2. Users\ lub Documents and Settings\ - katalog użytkowników. W systemach Vista i 7 jest to C:\Users\, w XP i starszych — C:\Documents and Settings\.
  3. DawidS28\ — folder naszych plików, ustawień, pulpitu itd. Przyjmuje nazwę taką, jak nasza nazwa usera.
  4. AppData\ lub AppData\Roaming\ — folder danych aplikacji. Odpowiednio: dla XP oraz dla Visty i 7.
  5. Mozilla\Firefox\Profiles\txhboewp.default\chrome — ścieżka dostępu do katalogu chrome w naszym profilu w przeglądarce. Nazwa profilu składa się z ośmiu losowych znaków, kropki i nazwy profilu; w profilu domyślnym nazwę zastępuje default.

Na szczęście, w praktycznym zastosowaniu jest to zdecydowanie łatwiejsze. Wszystko, co znajduje się do AppData (włącznie) możemy zastąpić zmienną środowiskową %AppData%. Wtedy ścieżka dostępu będzie wyglądać następująco:

%AppData%\Mozilla\Firefox\Profiles\txhboewp.default\chrome

Jeśli plik userContent.css nie znajduje się w wymienionej lokalizacji należy go utworzyć.

Safari

Kliknij koło zębate w prawym górnym rogu, Preferencje —> Zaawansowane, następnie opcja Arkusz stylów: „Nic nie jest zaznaczone” i zaznacz „Inne…”, wskaż plik ze stylami.

Google Chrome

Ścieżka różna, w zależności od wersji systemu operacyjnego (patrz Mozilla Firefox):

C:\Users\DawidS28\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets — Vista i 7

C:\Documents and Settings\DawidS28\AppData\Google\Chrome\User Data\Default\User StyleSheets — XP i starsze.

Reguły można umieszczać w pliku Custom.css — efekty są widoczne od razu po zapisaniu pliku, nie jest wymagane restartowanie przeglądarki, wystarczy odświeżyć stronę.

Więcej informacji o User CSS znajdziesz TUTAJ.

Przejdźmy do praktyki

Teraz możemy zająć się praktycznym zastosowaniem CSS. Jeśli jesteś zainteresowany tą technologią, polecam skorzystanie z darmowego kursu tworzenia stron internetowych. W sieci jest ich dostępnych bardzo wiele. Podam adresy dwóch przykładowych:

http://htmlhelp.shl.pl/
http://kurshtml.boo.pl/

Ale zajmijmy się wreszcie obiecaną ingerencją w strony WWW.

Większość obecnie dostępnych stron internetowych jest zbudowana przy wykorzystaniu wielu zagnieżdżonych w sobie pojemników, tzw. div-ów. Zazwyczaj każdemu takiemu elementowi jest nadany identyfikator (w HTML określa się go w atrybucie id). Dzięki tym nazwom możemy łatwo określać, którym fragmentem strony chcemy się zająć.

W celu wyłączenia tak znienawidzonego przez większość „śledzika” tworzymy kod

#sledzik_box {
display: none !important;
}

Zastosowany tutaj styl określa wyłączenia wyświetlania danego elementu (display: none;), w tym przypadku śledzika (element określa zapis #sledzik_box). Zapis !important określa regułę jako ważną i dlatego bezwzględnie zostanie ona zastosowana. Nie wiesz, co oznacza zastosowany tutaj krzyżyk przed nazwą elementu? Odsyłam do linka we fragmencie poświęconym selektorom.

Co dalej?

Masz zamiar pousuwać jeszcze więcej? Wystarczy wykorzystać do tego przedstawiony wyżej zapis, zmień jedynie selektor na odpowiadający wybranemu elementowi.

Świetnie, tylko skąd wziąć nazwy identyfikatorów elementów? Jest wiele możliwości. Najprostszą wydaje się szukanie div-ów w kodzie źródłowym strony, jednak jest to nudne i czasochłonne. Bardziej przyjaznym rozwiązaniem jest zainstalowanie specjalnej wtyczki, np. FireBug (dla Firefoxa), DragonFly (Opera), View Selection Source (Google Chrome) lub IE Developer Toolbar. Umożliwiają one przeglądanie struktury dokumentu z jednoczesnym oznaczeniem, gdzie dokładnie na stronie internetowej się on znajduje.

Na koniec chciałbym ostrzec przed pewnym dosyć częstym działaniem użytkowników. Jeśli stworzymy regułę, która będzie blokowała element o ID page będzie się on odnosił do każdego elementu o tym identyfikatorze, także na stronach, na których nie chcieliśmy nic zmieniać. Dlatego dobrym działaniem jest użycie wielu selektorów jednoznacznie informujących przeglądarkę, gdzie szukać danego obiektu. Zminimalizuje to możliwość nieplanowanych ingerencji w inne, niż „czyszczona”, strony WWW.

Blokowanie elementów na wybranej stronie

Reguła @-moz-document

Przed chwilą pisałem, że przy pomocy arkusza CSS można blokować tylko elementy wszystkich witryn, bez możliwości dostosowywania arkusza do danej strony. To nie do końca prawda. Takie działanie umożliwia Kaskadowy arkusz stylów CSS w przeglądarce Mozilla Firefox (wersje 1,5+) z regułą @-moz-document.

Budowa reguły jest następująca...

@-moz-document

/* określenie adresu, do którego ma się odnosić dana reguła */

{

selektor {
właściwość: wartość;
właściwość: wartość;
}

}

Jako określenie adresu można wstawić jeden z trzech parametrów:

  • url(http://www.przyklad.pl/) — określa, że dana reguła ma się odnosić tylko do tego adresu; w tym przypadku oznacza to stronę główną przyklad.pl, ale tylko wtedy, gdy nie wpiszemy w przeglądarce przyklad.pl/index.html
  • url-prefix(http://www.przyklad.pl/przyklad/) — odnosi się do każdej strony, której URL zaczyna się od http://www.przyklad.pl/przyklad/; jeśli pominiemy przyklad/ reguła będzie działać dla strony głównej i każdej podstrony witryny przyklad.pl
  • domain(przyklad.pl) — dotyczy każdej strony w domenie przyklad.pl oraz wszystkich witryn, których adres kończy się na .przyklad.pl, np. pomoc.przyklad.pl

Budowa stylów wewnątrz reguły jest taka sama, jak w normalnych arkuszach CSS.

Przykładowo, jeśli chcielibyśmy się pozbyć paska z logo na każdej stronie serwisu, należy utworzyć regułę...

@-moz-document

url-prefix(http://netdiag.pl/)

{

#logo {
display: none !important;
}

}

Niestety, podane wyżej metody działają tylko w Mozilli Firefox (kolejny argument za tym, by przesiąść się na Liska). Selektory URL są dostępne w specyfikacji CSS 3.0, ale implementacja tego rozwiązania w przeglądarkach jest na niskim poziomie. Więcej TUTAJ.

I teraz mała uwaga. Przy parametrze url oraz url-prefix adres strony http://www.przyklad.pl nie jest równoznaczny adresowi http://przyklad.pl. Tak więc reguła dla http://ciekawa-informatyka.pl nie będzie działać, ponieważ pełny adres strony to http://www.ciekawa-informatyka.pl.

Dodatki dla przeglądarek

URIid

W starszych wersjach przeglądarki Mozilla Firefox (starsze od 1.5) możliwe jest zastosowanie dodatku URIid, który pozwala na przypisywanie reguł CSS poszczególnym witrynom. Style tworzone są w następujący sposób:

id_elementu#adres_www_strony {
właściwość: wartość;
właściwość: wartość;
}

Jako „adres_www_strony” podajemy adres z kropkami zastąpionymi myślnikami, np. reguła, której działanie skutkuje zamalowaniem na czerwono tła strony głównej www.google.pl to...

body#www-google-pl {
background-color: #FF0000 !important;
}

Dodatek ten nie jest już rozwijany, co skutkuje jego niezgodnością z nowszymi wersjami przeglądarki (FF +1.5).

Stylish

Stylish to dodatek dla Mozilli Firefox i Google Chrome, umożliwiający blokowanie poszczególnych elementów na stronie WWW poprzez JavaScript (dla Firefoxa i Chrome) lub CSS (dla Firefoxa) — wykorzystywana jest regułka @-moz-document. Więcej informacji na stronie userscripts.org.

Remove It Permanently

RIP — banalnie proste rozszerzenie pod Firefoxa, które umożliwia blokowanie elementów z menu kontekstowego. Programik umożliwia podgląd działań w czasie rzeczywistym.

Personalized Web

Personalized Web — bardzo dobry dodatek dla Google Chrome do modyfikowania poszczególnych stron WWW.

Chrome Stylist

Google Stylist — ciekawe rozwiązanie dla przeglądarki giganta z Mountain View, uruchamiane z ikonki na pasku adresu. Zintegrowane z http://userstyles.org.

Blokowanie elementów — JavaScript

Wraz z powstaniem technologi LiveScript, przekształconej później JavaScript, i zaimplementowaniem jej w przeglądarkach internetowych umożliwione zostało ożywienie statycznych stron internetowych poprzez skrypty wykonywane po stronie klienta (kod PHP wykonuje się na serwerze). JS oferuje bardzo wiele możliwości, np. tworzenie systemów uwierzytelniania, aplikacji internetowych, formularzy, ingerencję w prezentację witryny i wiele innych... Jednym z najlepszych przykładów zastosowania JavaScriptu jest serwis Maps Google.

Zastosowanie poniżej opisanych metod kontrolowania prezentacji stron WWW wymaga oczywiście znajomości JavaScript. Poniżej podaję odnośniki do dwóch internetowych kursów tego języka:

http://www.poradnik-webmastera.com/kursy/javascript/
http://webmade.org/kursy-online/kurs-javascript.php

Google Chrome

Zyskująca ostatnio wysoką popularność darmowa przeglądarka Google Chrome umożliwia proste tworzenie dodatków do programu. Rozszerzenia można tworzyć przy wykorzystaniu technologii HTML, CSS i JavaScript. Pozwalają one m. in. na modyfikowanie stron WWW czy poszerzanie funkcjonalności przeglądarki.

Pełen opis tworzenia rozszerzeń (w języku angielskim) jest dostępny na oficjalnej stronie Google — KLIK.

Przeglądarka Google umożliwia stosowanie dodatku Stylish.

Mozilla Firefox

Najpopularniejsza w Polsce przeglądarka (49% użytkowników — stan na 27 VI 2010 r.) także umożliwia, w języku JavaScript, tworzenie skryptów użytkownika. Zapewnia to dodatek Greasemonkey. Pełen opis programu dostępny jest na stronie http://www.greasespot.net/. Inny poradnik o UserJS jest dostępny TUTAJ.

Opera

Norweska przeglądarka udostępniła niedawno technologię User JavaScript pozwalającą na modyfikowanie prezentacji witryn, dodawanie do nich własnych elementów, zmianę i dezaktywowanie skryptów wykorzystywanych na stronach internetowych. Opera zapewnia także podstawową obsługę skryptów Greasemonkey.

Więcej informacji dostępnych jest na oficjalnej stronie Opery — KLIK. Gotowy skrypt przeznaczony do modyfikacji elementów na wybranych stronach jest dostępny TUTAJ.

Internet Explorer

Do przeglądarki Microsoftu powstał dodatek Trixie oparty na Greasemonkey. Stosowanie skryptów użytkownika umożliwiają także wielofunkcyjny IE7Pro oraz Greasemonkey 4 IE.

Skrypty Greasemonkey

Greasemonkey to darmowe rozszerzenie dla przeglądarki Mozilla Firefox oparte na języku JavaScript. Pozwala ono na ingerencję w stronę internetową przez użytkownika i zmianę wyglądu, a także dodawanie lub usuwanie funkcji na tej stronie. Strona domowa dodatku znajduje się TUTAJ. Mechanizm, dzięki wielkiej popularności, został zaimplementowany także w Operze (natywna podstawowa obsługa), Internet Explorerze (dodatki: Trixie, IE7Pro, Greasemonkey 4 IE) i Google Chrome (natywna obsługa).

Skrypty możemy uruchamiać z lokalnego komputera z menu Plik —> Otwórz plik... oraz ze stron zawierających skrypty, np. http://userscripts.org/. Własne modyfikacje dodaje się z menu Narzędzia —> Greasemonkey —> Nowy skrypt. Z informacji podanych w wyświetlonym oknie dialogowym tworzony jest nagłówek z metadanymi skryptu.

Pole Nazwa zostaje zapisana w regule @name, Lokalizacja — w @namespace, przedostatnie i ostatnie pole tekstowe — odpowiednio w @include i @exclude.

Skrypty tworzymy według następującego schematu:

// ==UserScript==
// @name           Nazwa skryptu
// @description    Opis skryptu
// @include        Strona, na której ma działać skrypt, można stosować symbol *
// @exclude        Strona, na której ma NIE działać skrypt, można stosować symbol *
// @namespace      Strona ze skryptem
// @require        Pliki .js wymagane do działania skryptu
// @resource       Zasoby, np. adresy obrazków wymagane do działania skryptu 
// @homepage       Strona domowa autora skryptu  //
// @version        Wersja skryptu                //
// @author         Autor skryptu                 // nieoficjalne,
// @icon           Ikona skryptu                 // często
// @copyright      Prawa autorskie               // wykorzystywane
// @attribution    Współautorstwo                //
// @contributor    Podziękowania                 //
// ==/UserScript== 

/* Kod skryptu */

W sekcji metadanych, ograniczanej przez // ==UserScript== i // ==/UserScript==, wystarczy podać tylko regułę @include, reszta jest opcjonalna. Pełny opis bloku metadanych jest dostępny TUTAJ oraz TUTAJ.

W miejscu komentarza /* Kod skryptu */ należy wstawić skrypt w języku JavaScript. Często korzysta się z funkcji anonimowej:

// ==UserScript==
// @name          Przykładowy skrypt
// @description   To jest przykładowy skrypt
// @include       http://www.przyklad.pl/*
// ==/UserScript==

(function()
{
        // Tutaj coś się wykonuje.
})();

Przykładowy skrypt, służący do wyłączania focusu ustawionego na wyszukiwarkę na stronie Onetu, przedstawiony został poniżej:

// Copyright (c) 2011 fixitpc.pl
// This script is licensed under the MIT license.  See
// http://opensource.org/licenses/mit-license.php for more details.
// ==UserScript==
// @name          Onet Szukajka
// @homepage      http://fixitpc.pl
// @description   Wyłącza focus onetowej szukajki.
// @include       http://www.onet.pl/*
// ==/UserScript==

(function()
{
        var szukajka = document.getElementById("q1");
        szukajka.blur();
})();

Skrypt został dokładnie opisany TUTAJ.

Dokładny opis dodatku Greasemonkey jest dostępny na stronach:
http://github.com/Martii/greasemonkey/wiki/
http://wiki.greasespot.net/Main_Page

Tracking Protection

W przeglądarce Internet Explorer 9 Microsoft umieścił mechanizm umożliwiający proste i skuteczne blokowanie reklam przy pomocy Tracking Protection List. Są to listy reguł, które można samemu tworzyć i modyfikować lub pobrać gotowe.

Więcej o mechanizmie ochrony przed śledzeniem:
http://webhosting.pl/Internet.Explorer.9.Tracking.Protection.Microsoft.utrudni.zycie.reklamowego.biznesu
http://ie.microsoft.com/testdrive/Browser/TrackingProtectionLists/Default.html
http://blogs.msdn.com/b/ie/archive/2010/12/07/ie9-and-privacy-introducing-tracking-protection-v8.aspx

Reguły umieszczane są poprzez Narzędzia —> Ochrona przed śledzeniem.

Gotowe listy TPL można znaleźć między innymi:
Fanboy Adblock List for Internet Explorer 9
EasyList (oparte na Adblock Plus)
Internet Explorer Gallery Tracking Protection Lists

Blokowanie skryptów uniemożliwiających przeglądanie strony

Od kilku lat temat zablokowania użytkownikom wyłączającym reklamy dostępu do stron WWW wywołuje duże kontrowersje. Powstało wiele skryptów mających na celu uniemożliwienie korzystania z danej strony osobom, które używają programów blokujących niechcianą zawartość reklamową. Oczywiście, możemy to obejść. Metod jest kilka.

Pierwsza z nich, najbardziej oczywista, to wykorzystanie programu blokującego niechcianą zawartość (np. AdBlock Plus) do zablokowania skryptów odpowiedzialnych za wykrywanie blokad użytkownika. Wymaga to znalezienia problematycznej zawartości i nałożenie na nią filtru. Strona powinna się wtedy normalnie uruchomić. Opis stosowania filtrów Adblock Plus jest dostępny TUTAJ. Rozwiązanie to — dla użytkownika nieznającego Javascript — może być problematyczne: proponuję wtedy, metodą prób i błędów, blokowanie poszczególnych skryptów na danej stronie, aż do znalezienia właściwego.

Tworzenie filtrów przy pomocy programu AdBlock Plus. Przedstawione na zdjęciu filtry są przykładem — elementy te nie stanowią reklam.

Drugi sposób to zastosowanie programu przeznaczonego do blokowania skryptów na stronach WWW, chociażby świetnego dodatku NoScript dla Mozilli Firefox. Aplikacja ta ma możliwość blokowania wszystkich lub wybranych skryptów na dowolnie dobranych witrynach. Szczegółowy opis NoScript jest dostępny TUTAJ.

Niekiedy zdarza się jednak, że skrypt ma na celu rozpoznanie nie programu blokującego reklamy czy ustawień z pliku HOSTS, a samą przeglądarkę użytkownika. Niedawno szerokim echem odbiła się w sieci sprawa Danny'ego Carltona, który w ramach protestu przeciwko rozszerzeniu AdBlock Plus zablokował wszystkim użytkownikom Firefoksa dostęp do swojego bloga, dostępnego pod adresem http://jacklewis.net (proszę traktować to jako antyreklamę). Wejście z Mozilli Firefox na w/w stronę skutkuje automatycznym przekierowaniem do serwisu „Yahoo!”. Zablokowanie wszystkich skryptów na stronie doprowadzi do wyświetlenia komunikatu „Strona do poprawnego działania wymaga JavaScript”. Problematyczną instrukcję (w tym przypadku jest to http://jacklewis.net/weblog/functions_a.js) można oczywiście wyłączyć przy pomocy AdBlock Plus, można też skorzystać z rozszerzenia IE Tab (do pobrania STĄD) dla Firefoxa, które powoduje uruchomienie strony przy pomocy silnika renderującego Trident, wykorzystywanego m. in. w przeglądarce Internet Explorer. Skrypt zidentyfikuje wtedy przeglądarkę jako IE i umożliwi dostęp do zawartości witryny.

Metod na obejście blokad jest wiele: można wymienić tutaj zmianę podawanego identyfikatora przeglądarki Mozilla Firefox, opisaną dokładniej TUTAJ (parametr general.useragent.override).

Kilka zdjęć na zakończenie

Jeśli po przeczytaniu tego tekstu masz wątpliwości, czy warto usuwać reklamy, spójrz na zdjęcia poniżej. Oto efekty działania AdBlock Plus w Firefox 3.6.3 i wpisów MVPS Hosts File. Po lewej stronie znajduje się nienaruszona witryna, obok — „wyczyszczona” strona.

Na początek „koledzy po fachu” — IDG.

...i jeszcze CHIP z naszej branży, który ostatnio nieco przedobrzył

Niestety, nie widać reklam w „pełnym wdzięku”, gdyż przez pewien czas wyświetlał się jeszcze denerwujący pływający filmik, powiększający się po najechaniu.

Ostatnia gazeta.pl

Widać różnicę?

Copyright © Dawid Suder, 2009 - 2012