Skocz do zawartości

Witamy na forum Fixitpc.pl
Aktualnie przeglądasz stronę jako gość. Jeżeli posiadasz już konto, zaloguj się - w przeciwnym wypadku zarejestruj konto. Rejestracja jest darmowa, prosta i umożliwia pełny dostęp do funkcji forum.
Zdjęcie

Kontrolowanie prezentacji stron WWW - moje spojrzenie


  • Zaloguj się, aby dodać odpowiedź
4 odpowiedzi w tym temacie

#1
maggreg

maggreg

    Użytkownik

  • Użytkownicy
  • PipPipPip
  • 626 postów
Dawid swoim cyklem o kontrolowaniu wyglądu stron zainspirował mnie do przedstawienia mojego spojrzenia na tą problematykę.
Zainspirował to może trochę mało powiedziane, powiedzmy że podrażnił moją duszę starego "Operusa".
Norweskiej przeglądarki używam od początku swojego bytowania z komputerem PC, z początku powodem było podobieństwo do mechanizmów znanych z amigowej przeglądarki IBrowse której używałem wcześniej, teraz cenię sobie kompleksowość dostępnych w niej rozwiązań, nie trzeba instalować dodatkowych programów lub pluginów aby otrzymać funkcjonalność innych przeglądarek na rynku.
Szczególnie podrażnił mnie fragment o przypisaniu stylów kaskadowych do konkretnej strony a mianowicie parametr @-moz-document dostępny w Firefoxie.
Pomyślałem sobie wtedy, jak to, moja ulubiona przeglądarka miałaby w tym temacie mniejsze możliwości - nic z tego.
Oczywiście pewnym rozwiązaniem są "preferencje dla witryny" w których można konkretnej stronie przypisać jej własny arkusz stylów użytkownika ale dla mnie to jednak mało elastyczne.
Rozpocząłem prywatną korespondencję z Dawidem w wyniku której zagłębiłem się troszkę w temat skryptów userjs i tak powstały poniższe skrypty.
Wcześniej temat interesował mnie w niewielkim stopniu i choć używałem zarówno pewnych userjs jak i usercss a te tutaj są pierwszymi jakie skleciłem więc siłą żeczy bazują na pewnych obecnych na sieci szablonach dlatego znawców js proszę o wyrozumiałość.

Pierwszy skrypt używa styli kaskadowych generowanych podczas ładowania strony do usuwania powszechnie znanych upiększaczy-śmieci, domyślnie stosowany jest do wszystkich odwiedzanych witryn ale oczywiście można to skonfigurować w nagłówku skrytpu zmiennymi "// @include *" i "// @exclude *" "


// ==UserScript==
// @include *
// ==/UserScript==


(function ()
{


// window.opera.addEventListener('BeforeScript',function(e) {
// document.addEventListener('load',function(e) {
// window.opera.addEventListener( 'BeforeEventListener', function (e) {
//if (e.event.type != 'load')


var myHandler = function myHandler(e) {

if( location.pathname.match(/\.(txt|text|js|css|cpp|src)$/) ) { return; }

var mystylesheet = ''
+'applet, marquee, blink, .copyright, .sosumi, .tinywhite, span.storybox, .tiny, iframe,'
+'[alt~="donate"], [alt~="Donate"], [title~="donate"],'
+'[title="XHTML Friends Network"], [alt~="Advertisement"], [alt~="advertisement"], [href="http://wordpress.org"],'
+'[alt~="powered"], [alt~="Powered"], [title~="powered"], [title~="Powered"], [alt~="XFN"], [title~="XFN"],'
+'[title~="Donate"], [alt~="pajacyk"], [alt~="Paypal"], [alt~="PayPal"], [alt~="paypal"], [alt="Amazon Honor System"],'
+'div[class*="banner"], div[class*="baner"], div[id*="baner"], div[id*="advert"], div[class*="ipla"],'
+'[alt~="twitter"], [alt~="Twitter"], [alt~="facebook"], [alt~="Facebook"], iframe[name="google_ads_frame"],'
+'[alt~="Reklama"], [alt~="Reklama"], div[id="ad"], div[class="rekTop"], div[class="rek"], div[id*="ads"], div[id*="reklama"]'


if (location.hostname.indexOf('wykop.pl') != -1 || location.hostname.indexOf('asus.com') != -1 || location.href.match(/^http:\/\/(www\.|images\.)?google\.(com|pl)\/imgres\?imgurl=/) )
{var mystylesheet = mystylesheet + '{display: none !important;}' + 'iframe'+ '{display: block !important;}'}
else if (location.hostname.indexOf('youtube.com') != -1)
{var mystylesheet = mystylesheet +'{display: none !important;}' + 'div[id*="uploads"], embed[id*="movie_player"], embed[name*="movie_player"]'+ '{display: block !important;}'}
else if (location.hostname.indexOf('experts-exchange.com') != -1)
{var mystylesheet = mystylesheet + ',div[class="blurredBGImage315"]' +'{display: none !important;}'}
else if (location.hostname.indexOf('mediafire.com') != -1)
{var mystylesheet = mystylesheet + ',div[id*="catfish_div"]' +'{display: none !important;}'}
else
{var mystylesheet = mystylesheet +'{display: none !important;}'}


var wycinanka = document.getElementById('wycinanka.js');
if(wycinanka == null)
{

var newstyle = document.createElement("style");
newstyle.setAttribute('type', 'text/css');
newstyle.setAttribute('id', 'wycinanka.js');
newstyle.appendChild(document.createTextNode(mystylesheet));
document.getElementsByTagName('head')[0].appendChild(newstyle);

}

else
{return;}
}

window.opera.addEventListener('BeforeEvent.load',myHandler,true);

window.opera.addEventListener('BeforeEventListener.load', function (){
var wycinanka = document.getElementById('wycinanka.js');
var wycinanka_str = document.getElementById('wycinanka_str');
if(wycinanka_str != null)
{return;}
else
{if(wycinanka != null)
{ var newstr = document.createElement("div");
newstr.setAttribute('style', 'display: none');
newstr.setAttribute('id', 'wycinanka_str');
newstr.appendChild(document.createTextNode("wycinanka!"));
document.getElementsByTagName('body')[0].appendChild(newstr);}
}
},true);

})();


Drugi z moich skryptów jest nastawiony na elementy wyświetlające animacje i przede wszystkim filmy, tutaj z założenia wykluczone zostały w nagłówku strony których kwintesencją jest taka działalność jak np youtube:


// ==UserScript==
// @include *
// @exclude http://www.youtube.com/*
// @exclude http://*.tvp.pl/*
// @exclude http://tvgry.pl/*
// @exclude http://vod.onet.pl/*
// @exclude http://fdb.pl/*
// @exclude http://www.gametrailers.com/video/*
// @exclude http://www.mojageneracja.pl/4142
// @exclude http://jerzybralczyk.bloog.pl/*
// @exclude http://www.interia.tv/*
// @exclude http://*.wp.tv/*
// @exclude http://wp.tv/*
// @exclude http://imageshack.us/*
// ==/UserScript==


(function ()
{

var myHandler = function myHandler(e) {

if( location.pathname.match(/\.(txt|text|js|css|cpp|src)$/) ) { return; }

var mystylesheet = ''
+ 'object[type^="video"], object[type*="flash"], object[type*="shockwave"], embed[quality], embed, object[codebase], object[classid],'
+ 'object[classid="clsid:D27CDB6E-aE6D-11cf-96B8-444553540000"], object[classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"],'
+ 'object[type="application/x-shockwave-flash"], embed[type="application/x-shockwave-flash"], embed[type="application/x-director"],'
+ 'object[type="application/x-silverlight"], embed[type="application/x-silverlight"], object[type="application/x-silverlight-2"], embed[type="application/x-silverlight-2"],'
+ 'div[class="html5-player"], div[class="flash-player"], video[class="video-stream"], object[type="application/x-mplayer2"], div[class="videoPlayer"],'
+ 'video, canvas, #contentVideo, div[class="video-content"], div[class*="video"], div[id="video-container"], div[class="playerBox"], div[id*="spot"], div[class="wrapper video"]'
+ '{display: none !important;}'
+ 'object[data*="http://www.youtube.com/v"],embed[src*="http://www.youtube.com/v"]'+'{display: block !important;}'


var antysyf = document.getElementById('antysyf.js');
if(antysyf == null)
{

var newstyle = document.createElement("style");
newstyle.setAttribute('type', 'text/css');
newstyle.setAttribute('id', 'antysyf.js');
newstyle.appendChild(document.createTextNode(mystylesheet));
document.getElementsByTagName('head')[0].appendChild(newstyle);

}

else
{return;}
}


window.opera.addEventListener('BeforeEvent.load',myHandler,true);

window.opera.addEventListener('BeforeEventListener.load', function (){
var antysyf = document.getElementById('antysyf.js');
var antysyf_str = document.getElementById('antysyf_str');
if(antysyf_str != null)
{return;}
else
{if(antysyf != null)
{ var newstr = document.createElement("div");
newstr.setAttribute('style', 'display: none');
newstr.setAttribute('id', 'antysyf_str');
newstr.appendChild(document.createTextNode("antysyf!"));
document.getElementsByTagName('body')[0].appendChild(newstr);}
}
},true);


})();


Trzeci ze skryptów został nastawiony na strony które próbują nas zmusić do oglądania wypocin ich sponsorów i blokuje kilka popularnych skryptów typu antiblock, w zależności od strony używa rożnych technik, nie tylko styli css:


// ==UserScript==
// @include http://www.antiblock.org/*
// @include http://blog.maragnus.com/*
// @include http://jacklewis.net/*
// @include http://*.jacklewis.net/*
// @include http://purepc.pl/*
// @include http://*.purepc.pl/*
// @include http://wthl.redzoneleagues.com/*
// @include http://www.zshare.net/*
// ==/UserScript==


(function ()
{


if (location.hostname.indexOf('blog.maragnus.com') != -1)
{
window.opera.defineMagicFunction('show_content', function ()
{
return false;
}, null);

window.opera.defineMagicFunction('check_ads', function ()
{
return false;
}, null);

window.opera.defineMagicFunction('watch_it', function ()
{
return false;
}, null);
}

if (location.hostname.indexOf('jacklewis.net') != -1)
{
window.opera.defineMagicFunction('_enabled', function ()
{
return false;
}, null);
}


if (location.hostname.indexOf('purepc.pl') != -1)
{
window.opera.defineMagicFunction('getCookie', function ()
{
return true;
}, null);
}


if (location.hostname.indexOf('zshare.net') != -1)
{
window.opera.defineMagicVariable('trap_active', function ()
{
return true;
}, null);
}


var myHandler = function myHandler(e) {

if( location.pathname.match(/\.(txt|text|js|css|cpp|src)$/) ) { return; }

var mystylesheet = ''
+'div[style*="z-index:9999"], div[style*="z-index: 9998"],'
+'div[id="no_ad_message"]{display: none !important; visibility: hidden !important;}'


var antiblock = document.getElementById('antiblock.js');
if(antiblock == null)
{

var newstyle = document.createElement("style");
newstyle.setAttribute('type', 'text/css');
newstyle.setAttribute('id', 'antiblock.js');
newstyle.appendChild(document.createTextNode(mystylesheet));
document.getElementsByTagName('head')[0].appendChild(newstyle);

}

else
{return;}
}

window.opera.addEventListener('BeforeEvent.load',myHandler,true);

window.opera.addEventListener('BeforeEventListener.load', function (){
var antiblock = document.getElementById('antiblock.js');
var antiblock_str = document.getElementById('antiblock_str');
if(antiblock_str != null)
{return;}
else
{if(antiblock != null)
{ var newstr = document.createElement("div");
newstr.setAttribute('style', 'display: none');
newstr.setAttribute('id', 'antiblock_str');
newstr.appendChild(document.createTextNode("antiblock!"));
document.getElementsByTagName('body')[0].appendChild(newstr);}
}
},true);

})();



I w końcu skrypt z którego jestem najbardziej zadowolony, otóż jest on skierowany na portal vod.onet.pl w ktorym można obejrzeć nie tyko większość seriali produkowanych przez TVN ale też sporo ciekawych produktów dokumentalnych.
Niestety onet zupełnie olał użytkowników opery zwalając brak wsparcia na fakt, że takiego wsparcia w przypadku silverlighta nie udziela sam microsoft.
Wcześniejsze wersje zupełnie się wykładały na tej stronie ale najnowsze już nie ale nadal nie pozwalają obejrzeć większości materiałów. Co ciekawe bez problemu działają materiały dla dzieci jak i część dokumentów.
To wskazywałoby, że to nie silverligt sprawia problem ale co innego, moim spostrzeżeniem był fakt, że częścią wspólną materiałów odtwarzanych poprawnie był brak reklam wewnątrz filmu.
Mimo, że niektórzy użytkownicy forum opery polemizowali z moim spostrzeżeniem to jednak okazało się ono słuszne czego dowodem poniższy skrypt.
Co prawda problem sprawiają tylko spoty w środku filmu to jednak postanowiłem, że skrypt udostępniony na tym forum wytnie również te na początku filmu - skoro onet nas olewa to czemu mamy czuć się winni z tego powodu.


// ==UserScript==
// @include http://vod.onet.pl/*
// ==/UserScript==



(function ()
{

if (location.hostname.indexOf('onet.pl') != -1)
{

var myHandler = function myHandler(e) {

if( location.pathname.match(/\.(txt|text|js|css|cpp|src)$/) ) { return; }


var mystylesheet = '' +
'div[id="playerka_plugin_ew_ctnr"] {display: none !important;}' +
'div[id="playerka_plugin_ad_ctnr"] {display: none !important;}' +
'div[id="promobox_plugin_ew_ctnr"] {display: none !important;}' +
'div[class="platnosci"],div[id="platnosci"],div[class="abonamentBox rBox"] {display: none !important;}' +
'div[id="playerFoot"],div[class="adTitle"] {display: none !important;}' +
'body {}'



var vodonet= document.getElementById('vodonet.js');
if(vodonet== null)
{

var newstyle = document.createElement("style");
newstyle.setAttribute('type', 'text/css');
newstyle.setAttribute('id', 'vodonet.js');
newstyle.appendChild(document.createTextNode(mystylesheet));
document.getElementsByTagName('head')[0].appendChild(newstyle);

}

else
{return;}
}

window.opera.defineMagicVariable('iel', function ()
{
return false;
}, null);

window.opera.addEventListener('BeforeEvent.load',myHandler,true);

window.opera.addEventListener('BeforeScript', function (e)
{
e.element.text = e.element.text.replace('Opera','Firefox');
e.element.text = e.element.text.replace('"ad_pre":1','"ad_pre":0');
e.element.text = e.element.text.replace('"ad_post":1','"ad_post":0');
e.element.text = e.element.text.replace('"views_left":-1','"views_left":0');

e.element.text = e.element.text.replace(/this.ad_pre&&typeof this.obj!='undefined'/g,"0!=0");
e.element.text = e.element.text.replace(/"markers":\[\{"id".*"ad"\}\]/,'"markers":[]');
}, false);



window.opera.addEventListener('BeforeEventListener.load', function (){
var vodonet= document.getElementById('vodonet.js');
var vodonet_str = document.getElementById('vodonet_str');
if(vodonet_str != null)
{return;}
else
{if(vodonet != null)
{ var newstr = document.createElement("div");
newstr.setAttribute('style', 'display: none');
newstr.setAttribute('id', 'vodonet_str');
newstr.appendChild(document.createTextNode("vodonet!"));
document.getElementsByTagName('body')[0].appendChild(newstr);}
}
},true);

}



})();


Skrypt dodatkowo ogłupia mechanizm rozpoznawania przeglądarki więc nie musimy ustawiać maskowania.


Cechą skryptów userjs jest fakt, że wywołują się tylko raz najczęściej podczas ładowania strony (choć można ustawić fokus na inne zdarzenie) dlatego jeżeli są style kaskadowe które włączamy i wyłączamy dynamicznie to nie warto ich przerzucać do js na siłę.
Warto też zainstalować sobie w belce przycisk do włączania i wyłączania userjs np z tej strony http://userjs.org/he...user-javascript , przełączenie userjs działa globalnie więc należy pamiętać o jego statusie przed załadowaniem/przeładowaniem innej strony niż ta dla której używaliśmy przełącznika.

to tyle na ten moment, troch dużo tekstu jak zwykle u mnie :) ale myślę, że same skrypty mogą być przydatne.

ps - oczywiście podobnie jak przy stylach użytkownika tak przy userjs można w preferencjach witryny ustawić alternatywny/własny zestaw skryptów, w tym przypadku podajemy katalog, jeżeli z jakiegoś powodu dla jakiejś witryny chcemy skrypty wyłączyć podajemy pusty katalog lub pusty wpis.


Aktualizacja 12.07.2010 - troszkę przebudowane skrypty, dodane kilka definicji, przeniesiona do właściwych skryptów, wyeliminowane błędy (głównie typu brak , lub '' )

Aktualizacja 20.07.2010 - kolejne poprawki - mała zmiana momentu wywołania skryptów, dodatkowy wrunek pilnujący, aby skrypt wykonał się tylko podczas ładowania strony (na niektórych witrynach stara wersja potrafiła zamulić np przy przewijaniu),
skrypty wstawiają znaczniki do kodu strony dzięki którym można stwierdzić, czy kod na danej stronie się wykonał (w dragonfly oczywiście),
podejście do tematu wyjątków w pierwszym skrypcie - style dla iframe wykluczone na witrynie wykop (i test.pl :) )

Aktualizacja 31.07.2010 - poprawka pierwszego skryptu który wycinając za dużo uniemożliwiał przeglądanie plików w kanałach użytkownika na youtube, mała zmiana w wyjątkach ułatwiająca ich wprowadzanie (jeżeli zajdzie taka potrzeba), wyjątek dla ifame dla google dotyczy wyłącznie podstrony na której to jest potrzebne a nie całej domeny.

Aktualizacja 06.10.2010 - Zmiany na Vod.onet.pl (nowe wersje playerów) spowodowały potrzebę odświeżenia skryptu.

Aktualizacja 10.10.2010 - Małe poprawki w skrypcie dla vod, pozostałe skrypty w wersji jakiej używam na dziś, kilka bardziej przemyślanych wykluczeń, w skrypcie do flashy sposób na nie wycinanie embedów z youtuba, w antiblocku dodany zshare.

pzdr

#2
maggreg

maggreg

    Użytkownik

  • Użytkownicy
  • PipPipPip
  • 626 postów
Do powyższego tekstu należą się dwa uzupełnienia.
Po pierwsze skrypty należy zapisywać w formacie asci/ansi w przeciwnym wypadku choć sam skrypt zadziała to opera zignoruje niestety nagłówek a więc skrypt zadziała jak przy ustawieniu "// @include *" bez exclude

Po drugie skrypty w operze występują w dwóch trybach kompatybilności:
działające bezpośrednio - te muszą mieć rozszerzenie .js
działające w trybie emulacji greasemonkey - te muszą mieć rozszerzenie .user.js

Niestety odwrócenie/pomylenie rozszerzeń spowoduje, że dany skrypt nie zadziała jak choćby jeden z bardziej rozbudowanych skryptów :
YousableTubeFix for Opera
zadziała tylko z rozszerzeniem user.js

Generalnie do tej drugiej grupy należą skrypty używające funkcji GM_ czyli właściwych dla Greasemonkey a nie dla jscriptu.

Oczywiście żeby stwierdzić czy skrypt działa trzeba zaobserwować czy na odwiedzanych stronach widać jakieś skutki.
Można też w skrypt wpleść jakiś kawałek kodu który wyświetli nam coś na ekranie, choćby coś takiego:


var txt = "Raz dwa raz - proba skryptu";
var d = document.createElement('div');
var tt = document.createTextNode(txt);
var body = document.getElementsByTagName('body')[0];
d.style.position = 'absolute';
d.style.left = '0px';
d.style.top = '0px';
d.style.padding = '5px';
d.style.backgroundColor = '#eeeeee';
d.style.color = 'red';
d.style.font = '10pt';
d.appendChild(tt);
body.appendChild(d);


Wyświetli nam w lewym górnym rogu czerwony tekst na białym tle.
Można też zajrzeć do dragonfly i na zakładce skrypty sprawdzić jakie błędy generuje opera podczas ich wykonywania.

pzdr

#3
maggreg

maggreg

    Użytkownik

  • Użytkownicy
  • PipPipPip
  • 626 postów
Mały dodatek do trzeciego skryptu dla serwisu zshare który dość beszczelnie podmienia całą stronę po wykryciu blokad:


if (location.hostname.indexOf('zshare.net') != -1)
{
window.opera.defineMagicVariable('trap_active', function ()
{
return true;
}, null);
}


Chyba domyślicie się w którym miejscu wstawić w/w fragment.

Oczywiście w nagłówku należy dopisać:

// @include       http://www.zshare.net/*


#4
maggreg

maggreg

    Użytkownik

  • Użytkownicy
  • PipPipPip
  • 626 postów

@george
bardzo zainteresował mnie skrypt do opery dla vod .onet,niestety z jakis powodów nie działa..mam win7 64 bit problem chyba polega,że za bardzo nie wiem gdzie mam utworzyc ten skrypt..bardzo prosze o..porade duchową ;)


Zasadniczo są dwie możliwości zależnie od tego czy chcesz używać skryptu globalnie czy też przypisać go do konkretnej strony.
Ja preferuję tą pierwszą opcję a konkretne przypisanie ustawiam wewnątrz skryptów, w takiej sytuacji skrypt powinien znaleźć się w ścieżce którą jest zdefiniowana w "Preferencje>Zaawansowane>Zawartość>OpcjeJavaScript>Folderskryptów użytkownika"
Jeżeli jednak chcesz przypisać skrypt do konkretnej strony należy go wskazać w preferencjach dla witryny.

pzdr

#5
maggreg

maggreg

    Użytkownik

  • Użytkownicy
  • PipPipPip
  • 626 postów
Troszkę odświeżona wersja skryptu czyszczącego z dodanym fajnym mechanizmem generującym style do filtrowania:
Spoiler


A tutaj dwa skrypty które wycinają całkowicie elementy na stronie (a nie zakrywają je stylami), niestety mogą odczuwalnie opóźnić ładowanie się strony, zwłaszcza rozbudowanej, nie są idealne - zawierają błędy których mimo przejrzenia sporej dokumentacji nie udało mi się wyeliminować, może ktoś wpadnie na pomysły optymalizacji:

pierwszy - zawiera rozwiązanie oparte o XPath:
Do zmiennej array1 można sobie swobodnie dopisywać własne ciągi oddzielone przecinkami umieszczone w cudzysłowach (zewnętrznie pojedyńcze, wewnętrznie podwójne), dodatkowo znaki specjalne (kropka, dwukropek, myślnik itp.) nalezy poprzedzić odwrotnym łamańcem (\).
Skrypt automatycznie na podstawie ciągów z array1 tworzy ich trzy wersje, pierwsza w formie oryginie wpisanej w array1, druga zawierająca wszystkie litery duże, druga zaczynająca się z dużej litery, nie potrzeba więc powielać różnych konstrukcji danego ciągu chyba, że są one bardziej skomplikowane typu: "pRzYkŁaD".

Spoiler





Poniższa wersja pozostawiona ze względów historycznych, zalecam użycie wersji opartej o XPath.
drugi trochę szybszy no ale kosztem dokładności (błędy w działaniu).


Spoiler



ps - najlepszy efekt daje użycie jednocześnie pierwszego i drugiego (lub trzeciego) skryptu, elementy zostają przykryte już w czasie ładowania strony a potem wycięte całkowicie.

pzdr

Update - 11:05:2011 Małe poprawki na brakujący cudzysłów w dwóch pierwszych skryptach, teraz już ten drugi powinien działać poprawnie i bez wyraźnych opóźnień
Update - 04:02:2012 Odświeżona wersja skryptu opartego o XPath, generalnie działa sprawnie i szybko ochoć ze wzgledu na złożoność działań na mocno rozbudowanych stronach (duże fora np. XDA) może troszkę przyblokować ładowanie.




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych