Хей!
Миналата седмица екипът ни в Microsoft смени нашето вътрешноорганизационно комуникационно приложение — преместихме се от Slack към Teams, собствено създадена услуга на Microsoft.
И двете услуги предлагат подобни възможности, всяка със своите силни и слаби страни; Но едно нещо, което им липсва, е поддръжката на RTL (отдясно наляво).
Нашите групови чатове често смесват както английски, така и иврит и неправилното подравняване на изреченията ви се оказва доста неприятно, което ни „принуждава“ да използваме твърде много прекъсвания на реда и води до ненужно объркване.
Създаване на RTL решение за Microsoft Teams
Исках да си почеша сърбежа и това ме накара да потърся лесен начин за добавяне на RTL поддръжка за приложението, поне временна, преди то да се поддържа първоначално.
Започнах с надникване в директорията на Teams; Бързо можах да видя, че подобно на Slack, той е изграден върху „Electron“ – рамка, която позволява на човек да създава междуплатформени настолни приложения с уеб предни технологии.
По-горе можете да видите типично дърво на директории на електронни приложения:
- app.asar.unpacked — Обикновено съдържа статични активи и npm модули на трети страни
- активи — изображения, икони и подобни статични файлове
- локали — Многоезични преводи
- app.asar — Опакованото приложение във архивния формат на Electron
- electron.asar — Доставени от Electron библиотеки
Лесно — просто намерете .js файл, който е зареден от Teams в app.asar.unpacked, и добавете персонализиран полезен товар там!
Или поне така си мислех. Преминаването през разопакованата директория на приложението разкри само предварително компилирани възлови модули (По принцип куп .dll).
Следващото нещо, което ми дойде на ум, беше създаването на прокси dll, който да инжектира даден полезен товар; Това бързо беше отхвърлено, тъй като би изисквало отделно решение за моите колеги, използващи Mac.
Тъй като DLL проксирането е изключено, се сетих за два други метода, които може да работят.
- Препакетиране на приложението с персонализиран скрипт, който ще осигури RTL логиката
2. Опитайте да заредите приложението в режим на отстраняване на грешки и използвайте протокола devtools на chrome, за да инжектирате скрипт по време на изпълнение (с помощта на Runtime.evaluate)
Ясното предимство на последното е, че няма да бъде презаписано от бъдещи актуализации, които обикновено са доста чести; И така реших да мина през втория маршрут.
Изпълнение на Teams със сървър за отстраняване на грешки
Electron използва хром като свой двигател под капака и затова е възможно да се предават специфични за хром аргументи, когато се изпълняват базирани на електрони приложения.
Един от многото полезни параметри, които можете да подадете, е „remote-debugging-port“, който ви позволява да свържете отдалечен дебъгер към всеки прозорец, който приложението създава.
Задействайки Teams с флаг, зададен на порт по мой избор, можех лесно да го тествам, като сърфирам до chrome://inspectв chrome, след като активирам търсенето на мрежово устройство.
Страхотно — усеща се напредък! След това продължих да инспектирам прозореца за чат, за да добия представа за елементите, върху които трябва да работя.
Идентифицирах три набора от елементи, които се възползват от RTL-ing, и те са:
- Съобщения в чата — CSS селектор `.message-body-content`
- Визуализации на чат (Отляво) — CSS селектор`.ts-channel-list-entry-preview`
- Въвеждане на текст в чата — CSS селектор `.ts-edit-box .cke_editable`
Що се отнася до RTL логиката, мога просто да включа атрибут dir=”auto” (поддържа се от повечето основни браузъри) към тези елементи и браузърът трябва да ги изобрази автоматично.
А сега за самата инжекция.
От Chrome DevTools Protocol: […] вашето приложение може да открие наличните страници, като поиска: http://localhost:port/json и получи JSON обект с информация за страниците, подлежащи на проверка, заедно с адресите на WebSocket, които можете да използвате в за да започнете да ги инструментирате.
Това звучи обещаващо - нека да разгледаме.
Крайната точка извежда активните прозорци на дебъгвания процес и превключвайки между панелите в Teams, можем да видим различните URL адреси за отстраняване на грешки в websocket за всеки панел. Засега изглежда, че най-много се интересувам от прозореца „Чат“.
Преминавайки през богатия на протоколи API на DevTools, ще забележим, че можем да оценим полезния товар на javascript, използвайки метода „Runtime.evaluate“.
Комуникацията с приложението е доста проста оттук нататък, ние се свързваме с websocket и можем да изпращаме команди въз основа на следния JSON:
{“id”: someId, “method”: methodName, “params”: {…}}
Най-бързият начин да тествате това беше като се опитате да оцените предупреждение:
Сега всичко, което трябва да направим е:
- Напишете RTL-ing полезния товар
- Отворени екипи с активирано отдалечено отстраняване на грешки
- Намерете прозореца за чат
- Инжектирайте скрипт в посочения прозорец
- печалба
Полезният товар, заедно с базиран на Python Teams runner (Той отговаря за стартирането на Teams с отстраняване на грешки и инжектирането на скрипта) е достъпен тук, той поддържа както Windows, така и Mac.
Също така го пакетирах в „хромирано разширение“, което използва същия полезен товар като скрипт за съдържание.
Бързо обобщение
- Говорихме за няколко потенциални механизма за инжектиране на скриптове към базирани на електрони приложения
- Проучихме протокола DevTools и видяхме как да го използваме за оценка на js полезен товар
- Добавихме прилична RTL поддръжка за Microsoft Teams
Ресурси и благодарение на:
- Документи за протокола на Chrome DevTools
- „Библиотека на Python за електронно инжектиране“
- Вие, надявам се, че сте прочели страхотно!
Чувствайте се свободни да оставите коментар по-долу :)
