Crear un script para editar Taringa!
PARTE 1
Este tutorial es a prueba de tontos y también te enseña a programar en Javascript.
Estas aplicaciones son las simples que sirven con Tampermonkey en Chrome y con Greasemonkey en Firefox.
¿No tenés Greasemonkey? ¿No tenés Tampermonkey?
Bueno como habrán visto, si buscan un tutorial para poder crear un script, no van a encontrar uno bien explicado, así que yo decido hacer un tutorial fácil de puro código (haciendo entender para que sirve cada cosa, claro) que les servirá para crear buenos scripts.
Bueno, principalmente, hay que saber algo de HTML, y si no sabes un joraca, te explico simple en unos párrafos:
1. En el HTML hay etiquetas como <hola> y ese <hola> tiene que cerrarse si o si, y se cierra asi: </hola> entonces la estructura queda <hola>Aca va algo</hola>
2. En las etiquetas hay atributos como <hola asd="que tal loco?" soy="re gay viteh">entonces aca meto algo</hola> y asi seria cada estructura simple
3. Hay varias etiquetas y atributos que están definidos, veamos un caso:
[color=#000000]
<strong></strong> = hace negrita
<i></i> = hace cursiva
<h1></h1> = pone en letra grande
[/color]
similar al de T! pero más extendido
4. En las cosas que poner hay clases, como <hola class="asd"></hola> y eso tendrá una clase CSS (que luego enseñaremos eso ._.) y todas las clases ponen diseños, ponele que la class "asd" pone un color amarillo a un texto, entonces si la sacamos volvera al texto comun, como estaba antes viteh.
Creando un proyecto en Greasemonkey
Si ustedes van a "Herramientas > Greasemonkey" verán varias cosas raras, asi que solo nos servirá el boton que dice "New User Script...", ahí aparecerán unos campos como "Name, NameSpace, Description, Includes (One per line) y Excludes (One per line)" y ponen lo siguiente:
Name El nombre de su script (ej: Sacar publicidad)
Namespace Acá ponen su nick en Taringa, o su nombre real, o su mención, que vendría siendo el creador del script (ej: @Cagmaster)
Description Acá vá la descripción de su script (ej: Esta cagada saca la publicidad de T!)
Includes (One Per line) Acá ponen la url de la web en donde va a estar el script, si va a ser taringa, pongan http://*taringa.net/*, los asteriscos son como que dicen que en cualquier lado de taringa va a funcionar, y en cualquier subdominio, pero si quieren un lugar expecifico, ejemplo, que solo funcione en la comu wtf, ponen http://*taringa.net/comunidades/whatthefuck/ o en cualquier comunidad: http://*taringa.net/comunidades/*
en la de excludes no hace falta poner nada.
Luego, ya estará creado, nos dirá Greasemonkey "el script tal tal ha sido instalado" (en inglés) y se nos abrirá Notepad, o algún editor de texto y nos dirá unas cosas como Userscript y no van a entender nada, pero ya tienen la base de su script.
Empezando a programar
Después de en donde dice "// ==/UserScript==" hagan un enter y escriban:
[color=#000000]jQuery = $ = unsafeWindow.jQuery[/color]
y ahí les importará una libreria que hará más fácil el trabajo...
bueno, y después de esa linea, hacen otro enter y ya está, pueden escribir lo que sea en javascript.
Programando lo más simple
Bueno, y como hago para poder sacar esto, y eliminar aquello, y agregar un botón que me lleve a algún lado, y esto otro, bueno, para eso, se necesita usar el Código fuente, o el Inspeccionar elemento de Chrome :B
Abren todo el código fuente con Control + U porque eso es como la guía para poder hacer lo que quieran. Empezemos con lo básico--
LES ENSEÑO ALGO BÁSICO antes de seguir.
Si ustedes tienen:
[color=#000000]<div class="algo">
caca
</div>[/color]
Y quieren sacar el "caca" hacen:
[color=#000000]$('.algo').html();[/color]
y ya ahi lo tienen
lo pueden poner en una variable, para luego imprimirlo
algo así:
[color=#000000]lacaca = $('.algo').html();[/color]
o si no, si quieren editar el caca
[color=#000000]$('.algo').html('algo mas que no sea una caca ._.');[/color]
y si luego tienen algo más complejo como:
[color=#000000]<div class="coso raro" id="esto">
<span class="eme">Coso. <div id="great">Eso</div></span>
</div>[/color]
Y quieren sacar el "Eso" solo usan la lógica
[color=#000000]1. $('.coso');
2. $('.coso span.eme')
3. $('.coso span.eme #great')
4. $('.coso span.eme #great').html();[/color]
y listo, tienen "Eso"
ah, y otra cosa
#algo = saca el coso que tiene id="algo"
.algo = saca el coso que tiene class="algo"
Bueno, quiero imprimir mi usuario de T!
Escriben algo así (los "// algo" son sólo comentarios, no intervienen en el código)
[color=#000000]nick = $('.navitem .clearfix a .nick').html();[/color]
esto obtiene el nick, que esta dentro de la div con class "navitem" pero lo sacará con espacios, porque si ven, en la mierda del html en código fuente, salen un montonaso de espacios y luego dice tu nick y luego siguen los espacios, si quieren que eso no pase usan $.trim(y aca ponen el $('.navitem...').html()); y ya estaría
y acá mandamos una alerta que nos muestra nuestro nick:
[color=#000000]alert(nick);[/color]
¿Y si quiero cambiar mi nick y mi avatar para que parezca que estoy en otro user?
como hice recien:
[color=#000000]$('.navitem .clearfix a .nick').html('Aca cambio el nick que quiera');[/color]
y luego el avatar:
[color=#000000]$('.navitem .clearfix a .avatar').attr('src', 'Aca iria la URL del avatar nuevo');[/color]
el .attr('Atributo', 'Contenido') sirve para editar el Atributo="Contenido"
Y fin, hagan alguna cosa y si tienen alguna duda, no les funciono algo, o no entienden algo, simplemente comenten o manden MP.
Si quieren hacer alguna extensión sencilla o algo complejo, y quieren aprender como hacer esto y esto por parte, me dicen por mp
Saludos!
si pudieron hacer algo mandenlo! subanlo a http://userscripts.org/ (se tienen que registrar)
y si no entendieron, pongan un comentario, o manden mp, les respondo todo.
y si no entendieron, pongan un comentario, o manden mp, les respondo todo.