Crear complemento para navegadores

#1 (**permalink**) 16/07/2012, 16:36

Hola gente, necesito crear un ¿complemento? para el navegador chrome y otro para mozilla, que al darle click en un icono puesto en la barra de marcadores se habra una pequeña ventana sin cerrar la pagina actual en la que se despliegue un canvas y algunos menús de usuario para realizarle algunos análisis a la pagina actual, algo similar a las herramienta buscar.

Me imagino que requerirá algo de javascript y html pero no se bien como comenzarlo, donde ubicar el proyecto, los permisos del navegador, etc.

Ya lo que solo he logrado hacer hasta ahora es una aplicación para chrome pero corre en una pestaña nueva.

Si alguien conoce algún lugar para empezar le agradezco compartir.

Panino5001 · #2 (**permalink**) 16/07/2012, 17:41

Si necesitás que se abra a partir de la barra de marcadores del navegador no necesitás un complemento sino un bookmarklet. Lo importante de los bookmarklets es explicar cómo usarlos. Un ejemplo excelente es el de Pinterest, te recomiendo que veas cómo funciona y cómo ellos le explican al usuario cómo usarlo. Básicamente un bookmarklet es un enlace que usa el pseudoprotocolo javascript: para ejecutar una porción de código. El código puede estar todo presente en el bookmarklet o puede estar en un archivo externo que se añada al dom de la página sobre la que se ejecuta el bookmarklet.
Un ejemplo que me gustó: https://www.facebook.com/Temptations...36395689744790

Un ejemplo de algo que pidieron en el foro:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

</head>



<body>

arrastrar el enlace a la barra de marcadores:<br />

<a href="javascript:var swf='&lt;object width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;http://www.disegnocentell.com.ar/rayo.swf&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot;&gt;&lt;/param&gt;&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;&gt;&lt;/param&gt;&lt;embed src=&quot;http://www.disegnocentell.com.ar/rayo.swf&quot; type=&quot;application/x-shockwave-flash&quot; width=&quot;100%&quot; height=&quot;100%&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; wmode=&quot;transparent&quot;&gt;&lt;/embed&gt;&lt;/object&gt;';var div=document.createElement('div');div.style.position='fixed';div.style.zIndex=9999;div.style.width='100%';div.style.top=0;div.style.height='100%'; div.innerHTML=swf;document.body.appendChild(div);void(0);">rayo</a>

</body>

</html>

La ventaja adicional de un bookmarklet sobre un complemento es que es crossbrowser, es decir, no necesitás crear varias versiones o varios complementos para que funcione en todos los navegadores

#3 (**permalink**) 16/07/2012, 20:27

Muchas gracias por tu respuesta panino, encontré lo que buscaba, debo diseñar un bookmarklet, una pregunta mas, suponte que con el bookmarklet cargo un pequeño marco, en este puedo utilizar html5 para utilizar el canvass?

Lo que intento hacer es a medida que el usuario navega y encuentra una tabla con valores numericos, decide ver estos valores en un gráfico de barras, para ello pinta la tabla, clickea en el bookmarklet y se habre el marco con el gráfico listo, ¿será esto posible?

Panino5001 · #4 (**permalink**) 16/07/2012, 20:29

Sí, no le veo mayor inconveniente

#5 (**permalink**) 16/07/2012, 20:54

Cita:

Iniciado por Panino5001

Sí, no le veo mayor inconveniente

Perdon por mi ignorancia, soy nuevo con esto, el proyecto debería contar con dos archivos

bookmarklet.js
marco.html

bookmarklet debería recolectar los datos pintados por el usuario y enviarlos a marco.html por get? el marco estaría en local.

Panino5001 · #6 (**permalink**) 16/07/2012, 23:28

No habría problema en hacerlo así, aunque la verdad es que el iframe, si no vas a trabajar con lenguaje de servidor, es completamente innecesario. Podés agregar al DOM de la página una capa con un canvas y dibujar la gráfica ahí mismo sin necesidad de agregar un iframe.

#7 (**permalink**) 16/07/2012, 23:40

Cita:

Iniciado por Panino5001

No habría problema en hacerlo así, aunque la verdad es que el iframe, si no vas a trabajar con lenguaje de servidor, es completamente innecesario. Podés agregar al DOM de la página una capa con un canvas y dibujar la gráfica ahí mismo sin necesidad de agregar un iframe.

Ahh claro ya he entendido, de esta manera me quedaría algo similar a este bookmarklet: http://www.usetrackthis.com/get-bookmarklet/
Muchas gracias panino saludos!!