Как разработать расширение Chrome для Gmail?

Я думаю о разработке расширения Chrome для Gmail, и я хочу знать, каковы текущие лучшие практики.

например:

  • прикрепление подписи GPG по умолчанию к каждому электронному письму
  • добавление дополнительной кнопки, которая делает что-то (у меня уже есть)
  • угон действия отправки электронной почты и побуждая меня сделать что-то завершить
  • ...
  • (всего их примеры помогает мне узнать, что это возможно)

есть довольно много заметных расширений, которые значительно увеличивают функциональность gmail:

одним из вариантов было бы заглянуть в источник, который находится здесь ~/Library/Application Support/Google/Chrome/Default

но, может быть, есть (желаемое за действительное) хороший учебник / набор практик о том, как играть с пользовательским интерфейсом gmail и функциональностью?

Gmail extension / gadget API-как добавить кнопку на панель инструментов compose?

вам придется создать и ввести кнопку программно. Это будет включать в себя довольно много очистки Gmail исходный код (спойлер: это некрасиво).

как построить расширение chrome, чтобы добавить панель в gmail windows?

самая большая долгосрочная проблема, с которой вы столкнетесь, заключается в том, что макет gmail неожиданно изменится и сломает обнаружение электронной почты или измененный пользовательский интерфейс. Обе проблемы либо требуют некоторого ума для решения, либо потребуют, чтобы вы не спали ночью, задаваясь вопросом, вдруг ли Google сломает ваш расширение.

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

все они создают сложные API с аналогичной функциональностью, которые могут все сломаться независимо, если Gmail решит значительно изменить свою структуру приложений (что они неизбежно будут).

Gmail запускает свой код через компилятор закрытия, тем самым запутывая все. Кроме того, Gmail-это вероятно, одно из самых сложных приложений javascript.

библиотека основателя 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 (он тоже это делает, он тоже использует такие запутанные селекторы)

манифест.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);

(повторное использование существующих элементов пользовательского интерфейса, так что моя функциональность выглядит изначально)

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

есть боковые гаджеты и контекстные гаджеты, но они не предлагают то, что я хочу достичь.

Gmail Labs-это испытательный полигон для экспериментальных функций, которые не совсем готовы к прайм-тайму. Они могут измениться, сломаться или исчезнуть в любое время.

https://groups.google.com/forum/#! форум / gmail-labs-suggest-a-labs-feature Похоже, что возможность разработки Gmail Labs заблокирована для сотрудников Google.

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

нужна помощь? Найдите нас на переполнении стека под метки в Gmail.

так что да, я действительно хотел бы знать, если есть какие-то учебники / справочные материалы там?

(я рассмотрел многие из "подобных вопросов", и я боюсь, что мои варианты здесь ограничены, но я был бы чрезвычайно рад, если бы я свято хранил ваше просветление на мне)

3 51
javascript google-chrome email google-chrome-extension gmail

3 ответа:

похоже, вы не наткнулись на gmail.js. Он предоставляет богатый API, позволяющий работать с Gmail. Однако, обратите внимание, что этот проект не поддерживается Google. Это означает, что любые изменения в Gmail могут нарушить ваше расширение, и нет никакой гарантии, что кто-то будет заботиться об обновлении gmail.JS для решения этих изменений.

35

здесь есть хороший API для взаимодействия с Gmail DOM:

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

просто наткнулся на этот блог от 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 здесь если вы заинтересованы.

7