Итак, вы хотите создать расширение для Chrome, которое позволяет пользователю взаимодействовать с Gmail и служить определенной цели? Тогда эта статья может стать для вас лучшим решением.
В этой статье я собираюсь познакомить вас с созданием веб-расширения, которое позволяет добавить настраиваемую кнопку на панель инструментов цепочки Gmail, при нажатии на которую отображается все полученное приложение, и загрузите их все для себя.

Контент

  1. Инициализация расширения Chrome
  2. Инициализация InboxSDK
  3. Загрузка InboxSDK и добавление кнопки на панели инструментов Thread.
  4. Чтение всех вложений и их скачивание.

Инициализация расширения Chrome.

Есть много статей и видео о том, как начать работу с расширением Chrome, так что как насчет того, чтобы начать с официальной документации здесь или изучить основы расширения Chrome из 25-минутного видео от Traversy Media. Теперь всего этого будет достаточно для продвижения вперед, но если вы хотите узнать больше о бэкэнд-работе расширения, я бы посоветовал вам посмотреть еще одно описательное 27-минутное видео от« An Object Is A ».
Теперь ваш рабочий каталог будет выглядеть как

Где должен выглядеть ваш manifest.json.

{
  "name": "EXTENSION_NAME",
  "description": "EXTENSION_DESCRIPTION",
  "version": "0.0.1",
  "manifest_version": 2,
  "icons": {
    "16": "./logos/logo_16.png",
    "32": "./logos/logo_32.png",
    "48": "./logos/logo_48.png",
    "128": "./logos/logo_128.png"
  },
  "options_page": "./options.html",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "storage",
    "https://www.google.com/*",
    "https://mail.google.com/",
    "https://inbox.google.com/"
  ],
  "web_accessible_resources": ["*.png"]
}

Инициализация InboxSDK

До этого…

Q. Что, черт возьми, такое InboxSDK?
A. InboxSDK - это, по сути, библиотека Javascript, которая взаимодействует как с Gmail, так и с Inbox от Google. Он предоставляет все необходимые API-интерфейсы для создания полноценных приложений прямо внутри Gmail и Inbox.
Узнать больше, как насчет визита к нему.

Для инициализации получите идентификатор нашего приложения, зарегистрировавшись здесь, после того, как мы закончим с этим, сохраним его SDK отсюда в нашем каталоге как inboxsdk.js и добавим content_scripts в manifest.json.
где script.js будет иметь наш собственный код.

"content_scripts": [
    {
      "matches": ["https://mail.google.com/*", "https://inbox.google.com/*"],
      "js": ["inboxsdk.js", "script.js"]
    }
  ],

Загрузка InboxSDK и добавление кнопки на панели инструментов Thread.

Это будет довольно просто, просто скопируйте и вставьте следующий код в свой script.js файл. Не забудьте указать iconUrl.

InboxSDK.load(2, 'YOUR_APP_ID_HERE').then(function (sdk) {
  // the SDK has been loaded, now add a thread button
  sdk.Toolbars.registerThreadButton({
    title: "TOOLTIP_TEXT_GOES_HERE",
    iconUrl: chrome.runtime.getURL("logos/logo_128.png"),
    positions: ["THREAD"],
    listSection: sdk.Toolbars.SectionNames.OTHER,
    onClick: (event) => getAttachments(event, sdk),
  });
});

Примечание. Ключ iconUrl в приведенном выше коде может принимать значение логотипа из-за наличия "web_accessible_resources”:["*.png] в manifest.json файле, что позволяет Интернету получить доступ ко всем файлам png. ПОДРОБНЕЕ (необязательно)

Обновите расширение с chrome://extensions, откройте любую почту в Gmail, и БУАХ… вот оно.

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

Чтение всех вложений и их скачивание.

  • Давайте определим функцию getAttachments, которая зарегистрирует обработчик представления сообщения, который сначала проверит, развернуто ли представление сообщения и загружено или нет.
const getAttachments = async (sdk) => {
  let unRegister = await sdk.Conversations.registerMessageViewHandler(
    async (messageView) => {
      let items = messageView.getFileAttachmentCardViews();
      if (messageView.getViewState() === "EXPANDED") {
        if (messageView.isLoaded() && items.length) {
          .........
          .........
        }
      }
  );
  unRegister();
};
  • Если определяющее условие удовлетворяется. Откройте модальное окно с надписью «Вложения читаются», а затем переберите вложения.
          // Open "getting attachment" modal
          let attachment_read_modal = sdk.Widgets.showModalView({
            title: "Please Wait...",
            el: "<div>Attachments are being read</div>",
          });

          // Loop through each attachment and download them.
          for (let item of items) {
            try {
              .........
              .........
            } catch (error) {
              errorModal(sdk, error);
              console.log(error);
            }
          }
          // Close "getting attachment" modal
          attachment_read_modal.close();
  • На последнем шаге давайте закончим наш код, просмотрев каждое отдельное вложение, извлекая его данные с помощью регулярного выражения и веб-API извлечения и blob. Позже загрузите его с помощью веб-API createObjectURL и DOM.
              // Fetching the individual file data
              let attachment = item._attachmentCardImplementation._element;
              let download_url = attachment.attributes.getNamedItem("download_url").textContent;
              let re = /([^:]+):([^:]+):(.+)/;
              let match = re.exec(download_url);
              const contentType = match[1];
              const name = decodeURI(match[2]);
              const contentLink = match[3];
              let response = await fetch(contentLink);
              let blob = await response.blob();
              // Download the file
              let url = URL.createObjectURL(blob);
              let link = document.createElement("a");
              link.href = url;
              link.setAttribute("download", name);
              link.click();

И все, протестируйте работу с помощью нескольких console.log () и добавьте дополнительные функции в соответствии с вашими потребностями. В конце концов, опубликуйте свое расширение для Chrome.

Итак, как это было, довольно просто нет. Эта статья может быть закончена, но это не та обширная область, в которой это может быть полезно.

Огромный привет Харишпонне за невысказанную мотивацию написать это.