web-dev-qa-db-fra.com

Comment développer Chrome pour Gmail?

Je pense à développer Chrome pour Gmail et je veux savoir quelles sont les meilleures pratiques actuelles.

Par exemple:

  • joindre une signature GPG par défaut à chaque e-mail
  • ajouter un bouton supplémentaire qui fait quelque chose (je l'ai déjà)
  • détournement de l'action consistant à envoyer un e-mail et à m'inviter à terminer quelque chose
  • ...
  • (juste ces exemples qui m'aident à découvrir ce qui est possible)

Il existe de nombreuses extensions notables qui augmentent considérablement la fonctionnalité de gmail:

Une option serait de jeter un œil à leur source qui se trouve ici ~/Library/Application Support/Google/Chrome/Default

Mais peut-être existe-t-il (un vœu pieux) un bon tutoriel/ensemble de pratiques sur la façon de jouer avec l'interface utilisateur et les fonctionnalités de gmail?

extension Gmail/API gadget - comment ajouter un bouton à la barre d'outils de composition?

Vous devrez créer et injecter le bouton par programme. Cela impliquera un peu de récurer le code source de Gmail (spoiler: c'est moche).

Comment construire une chrome pour ajouter un panneau aux fenêtres gmail?

Le plus grand défi à long terme auquel vous serez confronté est que la présentation de gmail changera de manière inattendue et interrompra la découverte des e-mails ou l'interface utilisateur modifiée. Les deux problèmes nécessitent une certaine habileté à résoudre, ou vous obligeront à rester éveillé la nuit en vous demandant si Google cassera soudainement votre extension.

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

Ils construisent tous des API complexes avec des fonctionnalités similaires, qui peuvent toutes se casser indépendamment si Gmail décide de modifier considérablement la structure de leur application (ce qu'ils feront inévitablement).

Gmail exécute son code via le compilateur de fermeture, obscurcissant ainsi tout. En plus de cela, Gmail est probablement l'une des applications javascript les plus sophistiquées du marché.

Bibliothèque du fondateur de Parse - https://github.com/jamesyu/gmailr - mais non mise à jour depuis 1,5 an.

Je peux vous montrer ce que j'ai obtenu jusqu'à présent, et sachez que je n'aime pas particulièrement les sélecteurs comme .oh.J-Z-I.J-J5-Ji.T-I-ax7

Remarque: http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html (il le fait également , il utilise également un tel sélecteurs obscurcis)

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);

(réutilisation des éléments d'interface utilisateur existants pour que ma fonctionnalité soit native)

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

Il existe des gadgets de la barre latérale et des gadgets contextuels, mais ils n'offrent pas ce que je veux réaliser.

Gmail Labs est un terrain d'essai pour les fonctionnalités expérimentales qui ne sont pas tout à fait prêtes pour les heures de grande écoute. Ils peuvent changer, se casser ou disparaître à tout moment.

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature Il semble que la possibilité de développer Gmail Labs soit verrouillée pour les employés de Google.

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

Besoin d'aide pour? Retrouvez-nous sur Stack Overflow sous la balise gmail.

Alors oui, j'aimerais vraiment savoir s'il existe des tutoriels/documents de référence?

(J'ai passé en revue bon nombre des "questions similaires" et j'ai peur que mes options ici soient limitées, mais je serais extrêmement heureux si je sanctifiais vos Lumières sur moi)

javascriptgoogle-chromeemailgoogle-chrome-extensiongmail
55
Mars Robertson

Il semble que vous ne soyez pas tombé sur le projet gmail.js . Il fournit une API riche permettant de travailler avec Gmail. Cependant, veuillez noter que ce projet n'est pas maintenu par Google. Cela signifie que toute modification dans Gmail peut interrompre votre extension et il n'y a aucune garantie que quiconque se soucie de mettre à jour gmail.js pour répondre à ces modifications.

37
Konrad Dzwinel

Il y a une belle API pour interagir avec le DOM Gmail ici:

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

L'exemple de démarrage vous aide à ajouter un bouton à la barre d'outils de composition.

// 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!')
            }
        })
    })
})
8
Danny Sullivan

Je viens de rencontrer ce blog de Square Engineering Team http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

Il s'agit d'une extension chrome extension qui affiche les informations de contact dans la barre latérale de Gmail lorsque l'utilisateur survole un contact par e-mail (comme le fait Rapportive).

Le script de contenu de l'application est brièvement décrit. Cela fonctionne comme suit:

  1. Vérifiez si la page actuelle est un e-mail ouvert utilisant document.location.href != currentUrl (Vous pouvez également utiliser gmail.js gmail.observe.on("open_email",function()) pour y parvenir).

  2. Obtenez l'élément DOM contenant l'adresse e-mail. J'ai découvert que ce sélecteur fonctionne pour l'expéditeur: $(".acZ").find(".Gd")

  3. Insérez l'élément dans la barre latérale avec injectProfileWidget()

Je travaille sur une extension similaire qui affiche les informations de contact extraites de Mixpanel ici si vous êtes intéressé.

7
Martin