Cómo agregar nuevos botones al ChatBox

por Wigazo Jue 02 Ene 2014, 04:12

Recuerdo del primer mensaje :

Hace mucho tenía que actualizar este post con lo de las categorías y smilies, pero no tenía muchas ganas. Al final decidí hacer esto (aunque tendría que rehacer todo el tutorial xD):

Así pueden crear los botones, categorías y smilies más fácilmente.

Les explico cómo funciona, ya que puede ser un poco confuso, aunque bastante intuitivo creo.

Botones

Éstos, cuando les hacés click, añaden al capo de escritura del ChatBox un texto determinado.

Nombre: Código:

En "Nombre" se ingresa el texto que querés que tenga el botón encima. En "Código" se ingresa el texto que querés que el botón agregue al campo de escritura del ChatBox.

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás el botón con las características escogidas.

[Tienes que estar registrado y conectado para ver este vínculo]

Visible cuando hay botones. En la lista desplegable podés ver todos los botones (nombrados con el nombre elegido). Al seleccionar uno, en los campos "Nombre" y "Código" podrás ver cuáles fueron los escogidos. Si hacés click en "Eliminar" se borrará el botón seleccionado.

Categorías

Son listas desplegables que vendrían a ser como botones agrupados en una categoría. Al seleccionar una opción de éstas, se añade al campo de escritura del ChatBox un texto determinado.

Nombre	Código	Eliminar
		[Tienes que estar registrado y conectado para ver este vínculo]
		[Tienes que estar registrado y conectado para ver este vínculo]

[Tienes que estar registrado y conectado para ver este vínculo]

Con esta tabla podés definir cómo querés que sea tu nueva categoría. Cada fila representa un "botón". En la columna "Nombre" ponés el texto que aparecerá en la opción de la lista desplegable y en "Código" el texto que añadirá al campo de escritura del ChatBox. El botón de la columna "Eliminar" sirve para eliminar una fila (el mínimo de éstas es dos, ya que para 1 están los botones). Se puede agregar una nueva fila a la tabla con "Nueva Fila".

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás la categoría con las características escogidas.

[Tienes que estar registrado y conectado para ver este vínculo]

Visible cuando hay categorías. En la lista desplegable podés ver todas las categorías (nombradas con el nombre elegido de la primera opción de la categoría). Al seleccionar una, en la tabla se cargarán los datos de élla. Si hacés click en "Eliminar" se borrará la categoría seleccionada.

Smilies

Son smilies personalizados. Aparecerán en una nueva categoría de la ventanita de smilies: "Smilies Personales". Se ingresan al ChatBox con los códigos IMG. Ahora también la categoría de "Smilies Personales" está disponible para usar en el foro. Smile

Smilies URL:

En este campo se ingrese el URL de la imagen que querés tener como smile personal.

[Tienes que estar registrado y conectado para ver este vínculo]

Al hacerle click, creás el smile de la imagen elegida.

[Tienes que estar registrado y conectado para ver este vínculo]

Acá se visualizan los smilies creados. Para eliminar uno, se le hace click y listo.

Cuando tengas todos los botones, categorías y smilies deseados, hacé click en . Se descargará el userscript con todo lo elegido.
El archivo se llamará botonesChaBox.user.js, y se instala como cualquier otro. Recuerden que en Chrome hay que ir a chrome://extensions y arrastrar el archivo descargado para instalarlo.

¿Y cómo modifico un userscript?

Cualquier userscript creado con esta aplicación (los que fueron creados con el viejo método solo se pueden modificar tocando el código) es muy fácil de modificar, ya que se cargan todos los datos de él (botones, categorías y smilies) en ella para modificarlo a gusto. Una vez hechos los cambios modificados, descarga el nuevo userscript e instálalo, pero antes borra el viejo.

Post viejo:

Viendo [Tienes que estar registrado y conectado para ver este vínculo], me pareció una lástima que no pudiese ser aplicada, ya que me parece una buena idea. Así que decidí hacer un sencillo "userscript" para poder agregar botones al ChatBox (funciona en todos los de Foroactivo).

¿Qué es un userscript?

Son códigos en JavaScript que sirven para modificar página webs. Originalmente corrían en Greasemonkey, una extensión de Firefox, pero hoy en día se pueden instalar en varios navegadores. Por ejemplo, ahora se puede instalar en Chrome como si fuese una extensión. Es por eso que decidí hacerlo en este formato, para que más usuarios puedan usarlo~~, y además así dekar no diga que Google nos borrará por esto~~.

¿Qué hace exactamente este userscript?

Añade dos botones a cualquier ChatBox de Foroactivo:

Cómo agregar nuevos botones al ChatBox - Página 4 Large

Cómo agregar nuevos botones al ChatBox - Página 4 Large

-> Añade los códigos de spoiler al final del cuadro de texto del ChatBox.

-> Añade los códigos de img al final del cuadro de texto del ChatBox.

Sin embargo, el userscript es fácilmente personalizable para que el usuario haga sus propios botones.

¿Cómo se instala?

El userscript se encuentra en la siguiente dirección:

[Tienes que estar registrado y conectado para ver este vínculo]

La forma de instalar depende del navegador usado.

Firefox

Se requiere la extensión Greasemonkey:

[Tienes que estar registrado y conectado para ver este vínculo]

Una vez instalada, ir a la página del userscript, hacer click sobre el botón "Install" y poner "Instalar" en la ventana emergente.

Chrome

Ir a la página del userscript, hacer click sobre el botón "Install" y clickear el botón "Continuar" en la barra de descargas.

Luego hay que ir a chrome://extensions y arrastrar el archivo .user.js para instalarlo.

También se puede instalar en otros navegadores, pero todavía no lo testeé.

¿Cómo modifico el userscript?

Firefox

Con Greasemonkey es muy fácil.

Lo explico con imágenes:

Spoiler:

Nota: Antes de hacer el paso 5 hay que hacer los cambios necesarios en el código (más adelante explico cómo).

Chrome

En este caso hay que editar el archivo .user.js descargado, usando un programa de edición de texto como el bloc de notas o alguno más sofisticado. Luego de hacerle las modificaciones al código, guardar el archivo. Una vez guardado, arrastrar el archivo .user.js a chrome://extensions para instalarlo.

Todo muy lindo, ¿pero cómo hago mis botones?

Pues, en el código hay una explicación, pero de todos modos lo explico acá.

Los botones se crean en el bloque "tus botones", que por defecto viene así:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[spoiler][/spoiler]","spoiler")); botones.push(new boton("[img][/img]","img")); //===BLOQUE TUS BOTONES===//

Para crear un botón, hay que insertar una línea de código dentro de ese bloque, de la siguiente forma:

Código:: botones.push(new boton("<codigo>","<texto>"));

Código:: <codigo>

Hay que reemplazarlo por el código que querés que se inserte al clickear el boton. NOTA: No es necesario que sea un codigo, puede ser cualquier texto.

Código:: <texto>

Hay que reemplazarlo por el texto que querés que se vea en el botón.

Ejemplo

Para añadir un botón que inserte códigos quote, el bloque "tus botones" quedaría de la siguiente forma:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[spoiler][/spoiler]","spoiler")); botones.push(new boton("[img][/img]","img")); botones.push(new boton("[quote][/quote] ","Cita")); //===BLOQUE TUS BOTONES===//

También se pueden borrar los botones que vienen por defecto ("spoiler" e "img"):

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[quote][/quote] ","Cita")); //===BLOQUE TUS BOTONES===//

Como dije, no hace falta que los botones inserten códigos. Podés hacer botones para insertar rápidamente smilies, y también comandos del chat. Por ejemplo, un botón que inserte el smile :chino:y el botón para banear a DG, dejando el bloque "tus botones" de la siguiente forma:

Código:: //===BLOQUE TUS BOTONES===// botones.push(new boton("[quote][/quote] ","Cita")); botones.push(new boton(":chino:","Chino")); botones.push(new boton("/ban Imperatrum DG","Entretenimiento")); //===BLOQUE TUS BOTONES===//

Y lo mejor de todo: escribir fórmulas destructivas con solo un click. :awwyea:
No, en serio, no se toleran las fórmulas destructivas, dentro o fuera del foro (ya que pueden venir usuarios vengativos). Usarlas puede traer el ban permanente del ChatBox. what is this racket

Otro buen uso que pueden darle es poner códigos para insertar imágenes que usaría como smilies que no están en el foro. Wink

Eso fue todo, espero que les sirva. Smile

Si no entienden algo, no duden en preguntar. Very Happy

por Lisander Lun 17 Mar 2014, 21:38

No entiendo como se modifica el unescript con esa aplicación Ejem...

por Wigazo Lun 17 Mar 2014, 23:23

No sé a qué te referís, está bien claro. Ejem...

por Vinnie Sift [ASR] Vie 21 Mar 2014, 20:06

Ehm, tengo un problema
Cuando quiero poner el userscript en extenciones, me pone una señal de prohiido y no me deja :/
Chrome

por Wigazo Sáb 22 Mar 2014, 16:03

Mmm, no sé que será, pero en mi net a cada rato el ícono de las 3 barras horizontales (a la derecha de la barra de navegación) se me pone naranja y si le hago click en el menú me dice que se quiso instalar una extensión (BetterSurf y otras de esas mierdas). Si le hago click me pregunta si quiero instalarla o no, o algo así. Fijate en el botón ese, aunque nunca me pasó con una extensión instalada voluntariamente...

por Vinnie Sift [ASR] Dom 23 Mar 2014, 20:11

Hm, no se que paso, pero ahora me lo acepta.
Igual, me aparece un mensaje de error.
User script must be UTF8 encoded

por Wigazo Dom 23 Mar 2014, 21:17

Qué raro, se supone que el archivo descargado está en esa codificación... Abrilo con el bloc de notas, andá a Archivo->Guardar como... En Codificación elegí UTF-8 (supongo que lo tenés en otra, pero ni idea por qué), guardalo y fijate si podés instalarlo. Smile

por Vinnie Sift [ASR] Dom 23 Mar 2014, 21:34

Dios, loco, por fin. Gracias, Wig.

por Wigazo Dom 23 Mar 2014, 21:36

Por nada.

por Wigazo Sáb 24 Mayo 2014, 06:30

Hice uno nuevo:
[Tienes que estar registrado y conectado para ver este vínculo]

Pero es muy distinto.
Para empezar, es solo para smilies (al igual que el otro funcionan tanto en el foro como en el chat).
Además el viejo falla ahora (antes andaba bien, como muchos habrán probado) cuando se descarga el userscript en Chrome por unos cambios de estándares HTML que hicieron, aunque lo único que hace es descargar el archivo con el nombre "descarga" sin extensión ni nada (tendré que arreglarlo, lo cual no es difícil pues ya lo hice en el nuevo).
También hice muchos cambios estéticos y otra diferencia enorme es que las instrucciones están dentro de la página (a diferencia del viejo que es un iframe dentro de este tutorial donde explico cómo usarlo).
Otra cosa es que los smilies solo se verán en este foro (Sporepedia 2).

Necesito que me digan que tal está por favor. Gracias. Smile

Si se preguntan por qué hice esto (sería muy al pedo teniendo ya el otro):
[Tienes que estar registrado y conectado para ver este vínculo]

por Rhinestone Sáb 24 Mayo 2014, 10:00

Cool Wig!!!
Ahora lo pruebo, espero que te vaya bien en el concurso.

por Alegorn Jue 12 Jun 2014, 14:36

Antes de ayer, Chrome he pusó un mensaje de que no había encontrado esta extension en la store y que por seguridad, por si "se habia instalado sin mi permiso" me la ha desabilitado. La cosa que es ahora no me deja volver a activarla. ¿Sabes como lo hago o tengo que desinstalar y volver a crear?

por Wigazo Vie 13 Jun 2014, 03:03

Sí, es una cagada que pusieron los HDPs de Google. Recibieron montones de quejas, pero la verdad dudo que cambien de opinión. Algo que no tiene sentido es que no se pueden subir userscripts a la CWS (aunque es fácil convertirlos a extensiones), ¿entonces por qué el navegador sigue aceptando userscripts nativamente? Are you fucking kidd

Bueno, por ahora solo puedo decirte estas "soluciones":

Guardar el archivo userscript descargado en un lugar seguro e instalarlo cada vez que Chrome te lo deshabilita.

Pasar al canal dev de Chrome:
[Tienes que estar registrado y conectado para ver este vínculo]
El canal dev es el que le sigue al beta (el cual le sigue al estable), por lo que es más propenso a bugs. Supuestamente en este canal no hay problemas con las extensiones externas al CWS. Tampoco en el canal canary, que es el que le sigue a dev, pero obviamente es incluso más propenso a bugs (lo bueno de esto es que hace más seguro al dev), así que en todo caso usá el dev.

Usar Tampermonkey:
[Tienes que estar registrado y conectado para ver este vínculo]
Es como Greasemonkey, pero para Chrome, Opera, Chromium y otros navegadores de la familia, permitiéndote administrar userscripts (incluso los instalados nativamente, aunque eso ya no importe mucho...).
Una vez instalado andá a chrome://extensions/ , buscá Tampermonkey y marcale la opción "Permitir acceso a URL de archivo". Luego renombrá el archivo userscript descargado para que tenga extensión ".tamper.js" (en lugar de ".user.js") y arrastrá el archivo a Chrome (donde vos quieras, no hace falta estar en chrome://extensions/).
Se te va a abrir una pestaña. Hacé click en "Instalar" y listo. No lo testeé, pero debería funcionar.

De las tres opciones, te recomiendo la última.