wake-up-neo.com

Wie entwickelt man die Chrome Erweiterung für Google Mail?

Ich denke darüber nach, eine Chrome Erweiterung für Google Mail zu entwickeln, und ich möchte wissen, was die aktuellen Best Practices sind.

Zum Beispiel:

  • standardmäßig wird an jede E-Mail eine GPG-Signatur angehängt
  • hinzufügen eines zusätzlichen Buttons, der etwas bewirkt (ich habe es bereits)
  • entführung von E-Mails und Aufforderung, etwas zu erledigen
  • ...
  • (nur diese Beispiele helfen mir zu entdecken, was möglich ist)

Es gibt einige bemerkenswerte Erweiterungen, die die Google Mail-Funktionalität erheblich erweitern:

Eine Möglichkeit wäre, einen Blick in die Quelle zu werfen, die sich hier befindet ~/Library/Application Support/Google/Chrome/Default

Aber vielleicht gibt es (Wunschdenken) ein gutes Tutorial/eine Reihe von Methoden, wie man mit der Google Mail-Benutzeroberfläche und -Funktionalität experimentiert?

Google Mail-Erweiterung/Gadget-API - Wie füge ich der Erstellungssymbolleiste eine Schaltfläche hinzu?

Sie müssen die Schaltfläche programmgesteuert erstellen und einfügen. Dies erfordert einiges Durchsuchen des Gmail-Quellcodes (Spoiler: Es ist hässlich).

Wie erstelle ich eine chrome Erweiterung, um ein Panel zu Google Mail-Fenstern hinzuzufügen?

Die größte langfristige Herausforderung besteht darin, dass sich das Layout von Google Mail unerwartet ändert und die E-Mail-Erkennung oder die geänderte Benutzeroberfläche beeinträchtigt. Für beide Probleme ist entweder eine gewisse Klugheit erforderlich, oder Sie müssen nachts aufbleiben und sich fragen, ob Google Ihre Nebenstelle plötzlich unterbricht.

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

Sie alle bauen komplexe APIs mit ähnlichen Funktionen auf, die sich alle unabhängig voneinander auflösen können, wenn Google Mail entscheidet, die App-Struktur erheblich zu ändern (was unvermeidlich sein wird).

Google Mail führt seinen Code über den Closure-Compiler aus und verschleiert so alles. Darüber hinaus ist Google Mail wahrscheinlich eine der fortschrittlichsten Javascript-Apps auf dem Markt.

Bibliothek vom Gründer von Parse - https://github.com/jamesyu/gmailr - aber seit 1,5 Jahren nicht mehr aktualisiert.


Ich kann Ihnen zeigen, was ich bisher erreicht habe und weiß nur, dass ich Selektoren wie .oh.J-Z-I.J-J5-Ji.T-I-ax7 nicht besonders mag.

Hinweis: http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html (er tut es auch, er auch benutzt so einen verschleierten Selektor)

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

(vorhandene UI-Elemente wiederverwenden, damit meine Funktionalität nativ aussieht)


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

Es gibt Sidebar-Gadgets und Kontext-Gadgets, aber sie bieten nicht das, was ich erreichen möchte.

Google Mail Labs ist ein Testfeld für experimentelle Funktionen, die noch nicht für die Primetime bereit sind. Sie können sich jederzeit ändern, brechen oder verschwinden.

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature Die Entwicklung von Google Mail Labs ist anscheinend nur für Google-Mitarbeiter möglich.

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

Brauchen Sie Hilfe? Finden Sie uns auf Stack Overflow unter dem Google Mail-Tag.


Also ja, ich würde wirklich gerne wissen, ob es Tutorials/Referenzmaterialien gibt?

(Ich habe viele der 'ähnlichen Fragen' durchgesehen und befürchte, dass meine Möglichkeiten hier begrenzt sind, aber ich würde mich sehr freuen, wenn ich Ihre Aufklärung über mich schreine)

55
Mars Robertson

Sie sind anscheinend noch nicht auf das Projekt gmail.js gestoßen. Es bietet eine umfangreiche API, mit der Sie mit Google Mail arbeiten können. Beachten Sie jedoch, dass dieses Projekt nicht von Google verwaltet wird. Dies bedeutet, dass Änderungen in Google Mail Ihre Erweiterung beschädigen können. Es gibt keine Garantie dafür, dass jemand Google Mail.js aktualisieren wird, um diese Änderungen zu berücksichtigen.

37
Konrad Dzwinel

Es gibt eine nette API für die Interaktion mit dem Google Mail-DOM hier:

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

Das Beispiel für die ersten Schritte hilft Ihnen beim Hinzufügen einer Schaltfläche zur Erstellungssymbolleiste.

// 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

Bin gerade auf diesen Blogpost vom Square Engineering Team gestoßen http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

Es handelt sich um eine chrome Erweiterung, die Kontaktinformationen in der Seitenleiste von Google Mail anzeigt, wenn der Nutzer mit der Maus über einen E-Mail-Kontakt fährt. Genau wie Rapportive)

Das Inhaltsskript der App wird kurz beschrieben. Es funktioniert wie folgt:

  1. Überprüfen Sie mit document.location.href != currentUrl, Ob die aktuelle Seite eine offene E-Mail ist (Sie können dazu auch gmail.js gmail.observe.on("open_email",function()) verwenden).

  2. Rufen Sie das DOM-Element mit der E-Mail-Adresse ab. Ich fand heraus, dass dieser Selektor für den Absender funktioniert: $(".acZ").find(".Gd")

  3. Fügen Sie das Element mit injectProfileWidget() in die Seitenleiste ein

Ich arbeite an einer ähnlichen Erweiterung, die Kontaktinformationen anzeigt, die von Mixpanel abgerufen wurden hier wenn Sie interessiert sind.

7
Martin