Итак, вы хотите создать расширение для Chrome, которое позволяет пользователю взаимодействовать с Gmail и служить определенной цели? Тогда эта статья может стать для вас лучшим решением.
В этой статье я собираюсь познакомить вас с созданием веб-расширения, которое позволяет добавить настраиваемую кнопку на панель инструментов цепочки Gmail, при нажатии на которую отображается все полученное приложение, и загрузите их все для себя.
Контент
- Инициализация расширения Chrome
- Инициализация InboxSDK
- Загрузка InboxSDK и добавление кнопки на панели инструментов Thread.
- Чтение всех вложений и их скачивание.
Инициализация расширения 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.
Итак, как это было, довольно просто нет. Эта статья может быть закончена, но это не та обширная область, в которой это может быть полезно.
Огромный привет Харишпонне за невысказанную мотивацию написать это.