javascript - kit - developer chrome apps

¿Cómo desarrollar la extensión de Chrome para Gmail?

Question

Estoy pensando en desarrollar la extensión de Chrome para Gmail y quiero saber cuáles son las mejores prácticas actuales.

Por ejemplo:

• adjuntando una firma GPG por defecto a cada correo electrónico
• agregando un botón extra que hace algo (ya lo tengo)
• acción de secuestro de enviar correo electrónico y pedirme que haga algo completo
• ...
• (solo los ejemplos que me ayudan a descubrir lo que es posible)

Hay bastantes extensiones notables que aumentan significativamente la funcionalidad de Gmail:

• http://www.boomeranggmail.com/
• http://toolbox.mxhero.com/
• http://www.wisestamp.com/
• ...
• (No estoy afiliado a ninguno de ellos, acabo de nombrar algunos)

Una opción sería echar un vistazo a su fuente que se encuentra aquí ~/Library/Application Support/Google/Chrome/Default

Pero tal vez hay (ilusión) un buen tutorial / conjunto de prácticas sobre cómo jugar con la interfaz de usuario de gmail y la funcionalidad?

API de extensión / gadget de Gmail: ¿cómo agregar un botón a la barra de herramientas de redacción?

Deberá crear e inyectar el botón mediante programación. Esto implicará bastante buscar el código fuente de Gmail (spoiler: es feo).

¿Cómo construir una extensión de Chrome para agregar ventanas de panel a Gmail?

El mayor desafío a largo plazo que enfrentará es que el diseño de gmail cambiará inesperadamente y se interrumpirá el descubrimiento de correo electrónico o la interfaz de usuario modificada. Ambos problemas requieren alguna habilidad para resolver, o requerirán que te quedes despierto por la noche preguntándote si Google romperá repentinamente tu extensión.

http://www.jamesyu.org/2011/02/05/introducing-gmailr-an-unofficial-javscript-api-for-gmail/

Están construyendo API complejas con funcionalidades similares, que pueden romperse independientemente si Gmail decide cambiar significativamente la estructura de su aplicación (lo que inevitablemente ocurrirá).

Gmail ejecuta su código a través del compilador de cierre, ofuscando así todo. Además de eso, Gmail es probablemente una de las aplicaciones de JavaScript más sofisticadas que hay.

Biblioteca del fundador de Parse - https://github.com/jamesyu/gmailr - pero no se ha actualizado en 1,5 años.

Puedo mostrarte lo que obtuve hasta ahora, y solo saber que no me gustan particularmente los selectores como .oh.JZI.J-J5-Ji.TI-ax7

Nota: http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html (también lo hace, también usa selectores tan ofuscados)

manifest.json

"content_scripts": [
  {
    "matches": ["https://mail.google.com/*"],
    "css": ["mystyles.css"],
    "js": ["jquery-2.1.0.js", "myscript.js"]
  }
]

myscript.js

var icon = jQuery(".oh.J-Z-I.J-J5-Ji.T-I-ax7")
var clone = icon.clone();
clone.attr("data-tooltip", "my tooltip");
clone.on("click", function() {
    jQuery(".aDg").append("<p class=''popup''>... sample content ...</p>");
});
icon.before(clone);

(Reutilizando elementos de UI existentes para que mi funcionalidad se vea de forma nativa)

https://developers.google.com/gmail/gadgets_overview

Existen Gadgets de barra lateral y Gadgets contextuales, pero no ofrecen lo que quiero lograr.

Gmail Labs es un campo de pruebas para funciones experimentales que aún no están listas para el horario estelar. Pueden cambiar, romperse o desaparecer en cualquier momento.

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature Parece que la capacidad de desarrollar Gmail Labs está bloqueada para los empleados de Google.

https://developers.google.com/gmail/

¿Necesitas ayuda? Encuéntranos en Stack Overflow bajo la etiqueta de gmail.

Entonces, sí, realmente me gustaría saber si hay algún tutorial / material de referencia disponible.

(Revisé muchas de las ''Preguntas similares'' y me temo que mis opciones aquí son limitadas, pero sería muy feliz si santifico tu iluminación sobre mí)

Answer 1

Acabo de toparme con esta entrada del blog de Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

Es una extensión de Chrome que muestra la información de contacto en la barra lateral de Gmail cuando el usuario hace clic sobre un contacto de correo electrónico. (Al igual que lo hace Rapportive)

El script de contenido de la aplicación se describe brevemente. Funciona de la siguiente manera:

1. Compruebe si la página actual es un correo electrónico abierto utilizando document.location.href != currentUrl (también puede usar gmail.js gmail.observe.on("open_email",function()) para lograr esto).

2. Obtenga el elemento DOM que contiene la dirección de correo electrónico. Descubrí que este selector funciona para el remitente: $(".acZ").find(".gD")

3. Inserta el elemento en la barra lateral con injectProfileWidget()

Estoy trabajando en una extensión similar que muestra información de contacto extraída de Mixpanel here si está interesado.

Answer 2

Hay una buena API para interactuar con el DOM de Gmail aquí:

https://www.inboxsdk.com/docs/

El ejemplo de cómo comenzar lo ayuda a agregar un botón a la barra de herramientas de redacción.

// Compose Button
InboxSDK.load(''1.0'', ''Your App Id Here'').then((sdk) => {
    sdk.Compose.registerComposeViewHandler((composeView) => {
        composeView.addButton({
            title: ''Your Title Here'',
            iconUrl: ''Your Icon URL Here'',
            onClick: (event) => {
                event.composeView.insertTextIntoBodyAtCursor(''This was added to the message body!'')
            }
        })
    })
})

Answer 3

Parece que no te has topado con el proyecto gmail.js . Proporciona una API rica que permite trabajar con Gmail. Sin embargo, tenga en cuenta que este proyecto no es mantenido por Google. Esto significa que cualquier cambio en Gmail puede dañar su extensión y no hay garantía de que a nadie le importe actualizar gmail.js para abordar estos cambios.