web-dev-qa-db-ja.com

開発方法Chrome Gmailの拡張機能？

GmailのChrome拡張機能を開発することを考えています。現在のベストプラクティスを教えてください。

例えば：

  • デフォルトですべてのメールにGPG署名を添付する
  • 何かをする追加のボタンを追加する（既に持っています）
  • 電子メールを送信し、何かを完了するように促すプロンプトのハイジャックアクション
  • ...
  • （可能な例の発見に役立つ例のみ）

Gmailの機能を大幅に強化する注目すべき拡張機能がいくつかあります。

1つのオプションは、ここにあるソースを覗き込むことです~/Library/Application Support/Google/Chrome/Default

しかし、GmailのUIと機能をいじる方法についての（希望的観測）良いチュートリアル/実践のセットがあるかもしれません。

Gmail拡張機能/ガジェットAPI-作成ツールバーにボタンを追加する方法

プログラムでボタンを作成して挿入する必要があります。これには、Gmailのソースコードをかなり精査する必要があります（ネタバレ：いです）。

Gmailウィンドウにパネルを追加するためのchrome拡張機能を作成する方法

直面する最大の長期的な課題は、Gmailのレイアウトが予期せず変更され、電子メールの検出または変更されたUIが破損することです。どちらの問題も、解決するためにいくらかの賢さを必要とするか、Googleが突然拡張機能を壊すかどうか疑問に思って夜中に起きなければなりません。

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

それらはすべて、同様の機能を備えた複雑なAPIを構築しています。Gmailがアプリの構造を大幅に変更する場合（必然的に変更する場合）は、すべて独立して機能します。

Gmailはコードをクロージャーコンパイラーで実行するため、すべてが難読化されます。それに加えて、Gmailはおそらく最も洗練されたJavaScriptアプリの1つです。

Parseの創設者によるライブラリ- https://github.com/jamesyu/gmailr -しかし、1.5年後に更新されていません。

これまでに得たものを表示できますが、.oh.J-Z-I.J-J5-Ji.T-I-ax7

注： http://anurag-maher.blogspot.co.uk/2012/12/developing-google-chrome-extension-for.html（彼もやる、彼はそのような難読化されたセレクタも使用しています）

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

（既存のUI要素を再利用して、機能がネイティブに見えるようにする）

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

サイドバーガジェットとコンテキストガジェットがありますが、私が達成したいものを提供しません。

Gmail Labsは、ゴールデンタイムの準備が整っていない実験的な機能のテスト場です。それらはいつでも変更、破損、消滅する可能性があります。

https://groups.google.com/forum/#!forum/gmail-labs-suggest-a-labs-feature Gmail Labsの開発機能はGoogleの従業員に限定されているようです。

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

助けが必要？ gmailタグの下のStack Overflowをご覧ください。

はい、私は本当にチュートリアル/参考資料がそこにあるかどうか知りたいですか？

（「類似の質問」の多くをレビューしましたが、ここでの選択肢は限られていると思いますが、私にあなたの啓蒙を捧げたら非常に幸せです）

javascriptgoogle-chromeemailgoogle-chrome-extensiongmail
55
Mars Robertson

gmail.js プロジェクトにつまずいていないようです。 Gmailでの作業を可能にする豊富なAPIを提供します。ただし、このプロジェクトはGoogleによって管理されていないことに注意してください。つまり、Gmailの変更は拡張機能に影響を与える可能性があり、だれもがこれらの変更に対処するためにgmail.jsの更新を気にするという保証はありません。

37
Konrad Dzwinel

Gmail DOMとやり取りするための素晴らしいAPIがここにあります：

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

入門例は、作成ツールバーにボタンを追加するのに役立ちます。

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

Square Engineering Teamからこのブログ投稿に出会いました http://corner.squareup.com/2014/09/a-different-kind-of-scaling-problem.html

これはchrome拡張機能であり、ユーザーがメール連絡先にカーソルを合わせたときにGmailのサイドバーに連絡先情報を表示します。（Rapportiveのように）

アプリのコンテンツスクリプトについて簡単に説明します。それは次のように機能します：

  1. 現在のページが_document.location.href != currentUrl_を使用して開いているメールかどうかを確認します（これを実現するにはgmail.js gmail.observe.on("open_email",function())を使用することもできます）。

  2. 電子メールアドレスを含むDOM要素を取得します。このセレクターは送信者に対して機能することがわかりました：$(".acZ").find(".Gd")

  3. injectProfileWidget()を使用してサイドバーに要素を挿入します

Mixpanel here から取得した連絡先情報を表示する同様の拡張機能に取り組んでいます。

7
Martin