2010-02-04

jQuery + Greasemonkey na przykładzie Flickr'a

Istnieje możliwość tworzenia skryptów do Greasemonkey w jQuery - to dla mnie bardzo dobra nowina bo odkąd poznałem jQuery pisanie w czystym javascript'cie jakoś mnie nie cieszy. ;)
Aby skorzystać w GM (Greasemonkey) z jQuery wystarczy wpisać w skrypcie:
// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
 if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
 else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {}

źródło: http://joanpiedra.com/jquery/greasemonkey/
Wpadłem na to rozwiązanie logując się po raz setny do pewnego portalu, do którego mam koło dwudziestu różnych loginów. Aby się tam zalogować trzeba wypełnić trzy pola, co w żaden sposób nie dało się zapamiętać w przeglądarce. W pewnym momencie miałem już tego kompletnie dość - postanowiłem zrobić coś, co ułatwi mi nieco życie. Z pomocą przyszedł mi tu właśnie GM i jQuery - pamiętają za mnie wszystkie moje loginy. :]

Inną upierdliwą rzeczą jaką często wykonuję jest dodawanie linka View Large On Black do opisu każdego zdjęcia w mojej galerii na Flickrze. Jest to na tyle męczące, że zaraz po odkryciu GM+jQ wpadłem na pomysł żeby i tutaj sobie nieco ułatwić. Być może jest już jakiś skrypt, który takie rzeczy robi ale nie szukałem specjalnie - chciałem to zrobić sam - po pierwsze żeby mieć o czym tutaj napisać a po drugie żeby nieco się pobawić. :)
Założenie było takie żeby w prosty sposób móc dodać taki opis pod zdjęciem - najlepiej po kliknięciu na specjalny button z napisem View Large On Black.



Aby zrobić coś takiego wystarczy niewielka ilość kodu:
// Flickr - View Large On Black
function letsJQuery() {
 var photo_id; //id zdjęcia na flickrze
 var url = location.href;
 if(url.match(/photos\/([^/]+)\/([0-9]+)\/?$/)){
  var arr = url.match(/photos\/([^/]+)\/([0-9]+)\/?$/);
 } else if(url.match(/photos\/([^/]+)\/([0-9]+)\/in\/[^/]+\/?$/)) {
  var arr = url.match(/photos\/([^/]+)\/([0-9]+)\/in\/[^/]+\/?$/);
 } else {
  return; //koniec skryptowania
 }
 
 photo_id = arr[2]; //wyciągnięcie id zdjęcia
 
 //po kliknięciu w opis
 $("#description_div" + photo_id).click(function(){
  var adres = 'http://kruzar.pl/flickr/index.php?id=';
  var nazw = 'View Large On Black';
  var link = '' + nazw + '';
  var btn = $("").attr("style","margin-bottom: 10px; display: block;").attr("id","vob").attr("class","Butt").attr("type","button").attr("value",nazw);
  
  $("#blast_save_button").before(btn);
   
  $("#vob").click(function(){
   var form = $(this).closest("form");
   form.children('textarea').each(function() {
    var v = $(this).val();
    $(this).val(v + link);
   });
  });
 });
}

Kod ten wyświetla button View Large On Black i po kliknięciu dodaje do opisu pod zdjęciem linka:
View Large On Black




Cały skrypt można znaleźć tutaj.

Brak komentarzy:

Prześlij komentarz