Как веб-расширение Platypush упрощает настройку браузера и объединяет все вместе

Обновленная версия этой статьи доступна в блоге Platypush.

Когда-то существовала всемирная сеть, в которой веб-расширения были еще новыми игрушками, и основные браузеры, которые их поддерживали (а именно Firefox и Chrome), не возражали предоставить им очень широкий доступ к их внутренним компонентам и API-интерфейсам. (более или менее) все, что им угодно. Идея заключалась в том, что эти надстройки / приложения / расширения браузера (границы между ними в то время были еще довольно размытыми) могли бы стать мощным способом запуска в браузере (даже локально и без подключения к другому веб-сайту) любого программного обеспечения. пользователь хотел запустить.

Это была эпоха, когда появились мощные расширения, которые также могли глубоко изменить многие вещи в браузере (например, ныне несуществующий Vimperator, который мог полностью изменить дизайн пользовательского интерфейса браузера, чтобы он выглядел и вел себя как vim), и пользовательские скрипты Были мощным способом, с помощью которого пользователи могли запускать все, что им нравится, где угодно. Раньше я часто использовал пользовательские скрипты Vimperator, чтобы сопоставить любую последовательность клавиш, которую я хотел, с любым пользовательским действием, которое я хотел - просто смоделированным как простой JavaScript. Раньше я также много использовал пользовательские скрипты - они все еще существуют, но с гораздо большими ограничениями, чем раньше.

Эпоха дикого Запада веб-расширений и приложений в основном прошла. Вскоре злоумышленники осознали, что свобода, предоставленная веб-расширениям, сделала их идеальным вектором для запуска вредоносных / шпионских программ непосредственно в браузере, что во многих случаях могло обойти несколько уровней защиты от вредоносных программ. И у этого поколения веб-расширений была еще одна проблема с фрагментацией. Firefox и Chrome разработали свои собственные API-интерфейсы (например, XUL и Chrome Apps Mozilla), которые практически не совпадали. Это сделало задачу разработки веб-расширения, ориентированного на несколько браузеров, очень дорогостоящим, а многие расширения и приложения были доступны только для определенного браузера.

Доводы в пользу большей безопасности, разделения задач и меньшей фрагментации привели к переходу на современный WebExtension API. Примерно в конце 2017 года и Mozilla, и Google прекратили поддержку предыдущих API в соответствующих браузерах. Они также добавили больше ограничений для надстроек и скриптов, не одобренных в их магазинах (последние версии Firefox позволяют вам постоянно устанавливать расширения, опубликованные в магазине), и добавили больше ограничений и проверок в свои процессы проверки.

Новый API усложнил злоумышленникам взлом пользователя через браузер, а также значительно снизил барьеры, необходимые для разработки кросс-браузерного расширения. С другой стороны, однако, это также значительно уменьшило степень свободы, предоставляемую расширениям. Несколько расширений, которые требовали глубокой интеграции с браузером (например, Vimperator и Postman), решили либо перейти на автономные приложения, либо просто отказаться от своих усилий. А пользовательские скрипты стали более интересными нишевыми функциями с большим количеством ограничений, чем раньше, предлагаемыми сторонними расширениями, такими как Greasemonkey / Tampermonkey. Недавний API пользовательских скриптов Firefox является многообещающей альтернативой для возрождения мощи прошлой волны, но пока он поддерживается только Firefox.

Как опытный пользователь, хотя я понимаю все мотивы, которые привели разработчиков браузеров к решению о большем ограждении / изолировании расширений, я все еще скучаю по тем временам, когда мы могли глубоко настроить наш браузер и то, что он мог делать, как нам это нравилось. Я создавал Platypush на протяжении многих лет, чтобы удовлетворить мою потребность в бесконечной расширяемости и настройке на стороне сервера, со всем, что обеспечивается унифицированным и согласованным API и платформой (для тех, кто еще не знаком с этим, ознакомьтесь со статьями Medium ссылки в README или в Wiki на странице GitHub, чтобы начать работу). Я подумал, что естественным следующим шагом было бы применение той же философии к контексту моего веб-браузера. С помощью веб-расширения Platypush я попытался создать решение для нескольких потребностей, с которыми сталкиваются многие опытные пользователи.

Во-первых, у нас есть несколько серверных решений для управления вещами и умные домашние устройства для выполнения действий и передачи информации. Но старый добрый настольный веб-браузер часто оставался позади в этом прогрессе в автоматизации, даже если многие люди все еще проводят много времени в Интернете с настольных устройств. Большинство интерфейсных решений для облачной / домашней автоматизации реализуется через мобильные приложения. Некоторые решения для автоматизации предоставляют веб-приложение / панель (и Platypush также делает это), но веб-панели уделяется все меньше и меньше внимания во все более ориентированном на мобильные устройства мире.

И даже когда ваше решение представляет собой веб-приложение, необходимо учитывать еще один важный фактор: время действия. Сколько времени проходит между вашей мыслью «Я хочу запустить это действие на этом устройстве» и действительным выполнением действия на этом устройстве? И помните, что, особенно когда дело доходит до интеллектуальных устройств, время действия в «умном» режиме (например, при удаленном переключении лампочки) никогда не должно быть больше, чем время действия в «глупом» режиме. способом (например, вы встаете и переключаете переключатель). Это ваш базовый уровень.

Когда я работаю на своем ноутбуке, мне иногда может потребоваться выполнить какое-то действие на другом устройстве - например, отправить ссылку на свой телефон, включить свет или вентилятор, воспроизвести видео, которое сейчас воспроизводится на ноутбуке, в моем медиацентре. , воспроизвести плейлист Spotify в моей спальне в гостиной - или наоборот - и так далее. Конечно, для решения некоторых из этих проблем существует интерфейсное решение Platypush / HomeAssistant / OpenHAB / BigCorp Inc., но оно обычно включает в себя либо отрывание рук от ноутбука, чтобы взять телефон, либо открытие / переключение на вкладку в Интернете. приложение, предоставленное вашей платформой, ищет нужное меню / параметр, немного прокручивает, а затем запускает действие. Голосовые помощники - еще один вариант (и Platypush обеспечивает интеграцию, которая дает вам доступ ко многим из имеющихся голосовых технологий), но говорить в течение дня, чтобы что-то запустить, еще не является простым и быстрым процессом, который многие хотят - и он не должен быть единственным способом. Сведение к минимуму времени действия для меня означает возможность запускать это действие на лету (в идеале не более трех щелчков или нажатий клавиш) с любой вкладки или с самой панели инструментов, независимо от действия.

Конечно, есть некоторые веб-расширения для решения некоторых из этих проблем. Но обычно это включает в себя:

  • Вы полагаетесь на чье-то решение вашей проблемы, и это решение не обязательно будет наиболее оптимальным для вашего варианта использования.
  • Загрязнение вашего браузера множеством расширений для выполнения различных типов действий. Отправка ссылок на другие устройства может включать в себя установку расширения Pushbullet / Join, воспроизведение мультимедиа на другом расширении Kodi, воспроизведение мультимедиа на другом расширении Chromecast, сохранение ссылок на Instapaper / Evernote / Pocket или другие расширения, публикацию в Twitter / Facebook и другие расширения, управление вашим концентратором умного дома - еще одно расширение ... и этот список продолжается до тех пор, пока панель инструментов вашего браузера не заполнится значками, и вы даже не сможете вспомнить, что некоторые из них делают. контекст веб-браузера.
  • И, конечно же, установка слишком большого количества расширений увеличивает потенциальную поверхность для атак на ваш браузер - и это проблема, которую API WebExtensions должен был решить в первую очередь.

Сначала я начал это путешествие с создания простого веб-расширения, которое я мог бы использовать для быстрой отладки команд Platypush, выполняемых на других RaspberryPis и интеллектуальных устройствах в моем доме через веб-API / websocket / MQTT. Затем я понял, что могу использовать то же решение для решения моей проблемы оптимизации времени действия, то есть проблемы «Я хочу включить свет прямо сейчас, не хватаясь за телефон, не переключая вкладки или не вставая», пока я работаю над своей статьей на Medium на ноутбуке ». И это означает, что либо с самой панели инструментов (желательно со всеми действиями, сгруппированными под одной и той же кнопкой расширения и пользовательского интерфейса), либо через контекстное меню, вызываемое правой кнопкой мыши, как собственное действие браузера. Возможность запускать любое действие Platypush из моего браузера на любом удаленном устройстве означала, что я мог управлять любым устройством или удаленным API через один и тот же интерфейс, если есть плагин Platypush для взаимодействия с этим устройством / API.

Но этой цели мне пока было недостаточно. Не все действия, которые я могу выполнять на лету из любого места в браузере, можно преобразовать в атомарное действие Platypush. Удаленные процедуры Platypush, безусловно, могут помочь с запуском более сложной логики на сервере, но я хотел, чтобы расширение также охватывало мои варианты использования, которые требуют взаимодействия с контекстом браузера - такие вещи, как воспроизвести это видео на моем Chromecast (да, даже если я м в Firefox) », переведите эту страницу и убедитесь, что результат не похож на веб-сайт 1997 года (да, даже если я использую Firefox) , загрузите эту магнитную ссылку прямо на мой NAS и т. д. на. Вплоть до настраиваемых обработчиков событий, которые могут реагировать на события Platypush, запускаемые другими устройствами с настраиваемой логикой, работающей в браузере - такие вещи, как синхронизировать буфер обмена на ноутбуке, если другое устройство Platypush отправляет« ClipboardEvent », «отправлять уведомление в браузер с голосовым текстом, когда подключаемый модуль Google Assistant запускает ResponseEvent ”, или когда датчик выходит за пределы определенного порогового значения и т. д.

Мне нужна была возможность определять все эти действия через собственный API JavaScript, аналогичный тому, который предоставляется Greasemonkey / Tampermonkey. Но хотя большинство пользовательских сценариев, предоставляемых этими расширениями, выполняются только в контексте веб-страницы, я хотел отделить свои фрагменты сценария от веб-страницы и создать API, обеспечивающий доступ как к контексту браузера, так и к доступным действиям Platypush. на любом другом удаленном устройстве, чтобы запускать фоновый код в ответ на настраиваемые события и легко синхронизировать конфигурацию между устройствами. Итак, давайте кратко рассмотрим расширение, чтобы увидеть, что вы можете с ним сделать.

Установка и использование

Во-первых, вам нужно, чтобы где-то работала служба Platypush. Если вы не пробовали это раньше, обратитесь к любой из ссылок в предыдущих разделах, чтобы начать работу (я убедился, что установка, настройка и запуск базовой среды не займет больше пяти минут, обещаю: )). Также убедитесь, что вы включили HTTP backend в config.yaml, поскольку веб-сервер - это канал, используемый расширением для связи с сервером. Если у вас есть экземпляр Platypush, например, RaspberryPi, другой сервер или ваш ноутбук, получите веб-расширение:

Вы также можете построить расширение из исходников. Сначала убедитесь, что у вас установлено npm, затем клонируйте репо:

git clone https://github.com/BlackLight/platypush-webext

Установите зависимости и соберите расширение:

npm install
npm run build

В конце процесса у вас должна получиться папка dist с manifest.json.

  • В Chrome (или любом браузере на основе Chromium) перейдите в Расширения - ›Загрузить распакованные и выберите папку dist.
  • В Firefox перейдите в about:debugging - ›Этот Firefox -› Загрузить временное дополнение и выберите файл manifest.json.

Обратите внимание, что последние версии Firefox поддерживают только распакованные расширения (т. Е. Любые расширения, не загруженные на веб-сайте надстроек Firefox) до about:debugging. Это означает, что любое временное расширение будет потеряно при перезапуске браузера, однако восстановление конфигурации расширения Platypush при его переустановке - очень быстрый процесс.

После установки в браузере значок расширения появится на панели инструментов.

Щелкните доступную ссылку, чтобы открыть вкладку конфигурации расширения и добавить устройство Platypush в конфигурацию.

После добавления устройства щелкните его имя в меню и выберите «Выполнить действие».

Вкладка «Выполнить» имеет два режима: режим запроса и режим сценария. В режиме запроса вы можете запускать действия непосредственно на удаленном устройстве Platypush через динамический интерфейс. У вас есть форма с меню автозаполнения, в котором отображаются все действия, доступные на вашем устройстве, и после выбора форма предварительно заполняется всеми аргументами, доступными для этого действия, их значениями по умолчанию и описанием. Этот интерфейс очень похож на вкладку выполнения, предоставляемую веб-панелью Platypush, и упрощает быстрое тестирование и выполнение команд на другом хосте.

Вы можете использовать этот интерфейс для выполнения любых действий на любом удаленном устройстве, если для него установлен и настроен плагин - управление файловой системой, средства управления медиацентром, голосовые помощники, камеры, переключатели, получение данных с датчиков, управление облачными службами, вы назови это. Вы также можете запускать процедуры, хранящиеся на удаленном устройстве - их имена действий начинаются с procedure - и вы также можете передать URL-адрес на активной вкладке для действия в качестве аргумента, используя специальную переменную $URL$ в качестве значения действия. Например, вы можете использовать его для создания действия, которое отправляет текущий URL-адрес на ваше мобильное устройство через pushbullet.send_note, при этом для body и url установлено значение $URL$. Когда вы будете довольны своим действием, вы можете сохранить его, чтобы оно было доступно как на панели инструментов, так и в контекстном меню браузера.

Если вам нужен только способ удаленного выполнения действий Platypush из браузера, это все, что вам нужно. Теперь действие будет доступно на панели инструментов расширения:

И из контекстного меню:

Вы можете легко отлаживать / редактировать сохраненное действие на вкладке «Сохраненное действие» на странице конфигурации расширения.

Другой (и наиболее эффективный) способ определения настраиваемых действий - использование сценариев. Сценарии могут использоваться для объединения API Platypush (или любого другого API) и API браузера.

Выберите Script в селекторе вверху вкладки Выполнить действие. Вам будет представлен редактор JavaScript с предварительно загруженным шаблоном сценария:

На странице также есть ссылка на Суть с примерами всех доступных частей API. Вкратце, это самые важные части, которые вы можете использовать для создания пользовательских скриптов:

  • args включает соответствующую контекстную информацию для ваших скриптов, такую ​​как целевой Platypush host, tabId и target элемент, если действие было вызвано из контекстного меню на странице.
  • app представляет API, доступный скрипту.

Среди методов, представленных app:

  • app.getURL возвращает URL-адрес активной вкладки.
  • app.setURL изменяет URL-адрес, отображаемый на активной вкладке, а app.openTab открывает URL-адрес в новой вкладке.
  • app.notify(message, title) отображает уведомление браузера.
  • app.run выполняет действия на удаленном устройстве Platypush.

Например, это возможное действие для трансляции видео с YouTube на устройство Chromecast по умолчанию:

  • app.axios.[get|post|put|delete|patch|head|options]: API также предоставляет API Axios для выполнения пользовательских вызовов AJAX к удаленным конечным точкам. Например, если вы хотите сохранить текущий URL-адрес в своей учетной записи Instapaper:
  • app.getDOM возвращает DOM / содержимое текущей страницы (как элемент Node), а app.setDOM заменяет DOM / содержимое страницы (заданное в виде строки). Например, вы можете объединить предоставленный DOM API с плагином Platypush Translate, чтобы переводить веб-страницу на лету:
  • API расширения также предоставляет Mercury Reader API для упрощения / дистилляции содержимого веб-страницы. Вы можете объединить элементы, которые мы видели до сих пор, в сценарий, который упрощает содержимое веб-страницы для лучшей читаемости или делает ее более удобной для печати:
  • Наконец, вы можете получить доступ к элементу target, если запустите действие через контекстное меню (например, щелкните правой кнопкой мыши элемент на странице). Из-за ограничений API WebExtensions (который может передавать только JSON-сериализуемые объекты) элемент target передается в args в виде строки, но вы можете легко преобразовать его в объект DOM (и вы можете преобразовать любой HTML в DOM) через app.HTML2DOM метод. Например, вы можете расширить исходный пользовательский скрипт YouTube до Chromecast, чтобы транслировать любой аудио- или видеофайл, присутствующий на странице:

С помощью этих базовых блоков вы сможете создавать любые настраиваемые действия браузера, которые захотите. Некоторые примеры:

  • Преобразуйте текущую веб-страницу в PDF с помощью плагина Platypush для упрощения веб-страницы и доставьте его на свой Kindle в виде вложения через плагин Platypush GMail.
  • Отправьте кому-нибудь электронное письмо, содержащее текст, выделенный на странице.
  • Перевести на лету текст, выделенный на странице.
  • Поделитесь текущей ссылкой на Twitter / Facebook / LinkedIn (и откажитесь от всех других расширений для публикации в социальных сетях).
  • Загрузите магнитные / торрент-ссылки со страницы прямо на свой NAS.

Резервное копирование и восстановление конфигурации

Наконец, вы можете легко редактировать, создавать резервные копии и восстанавливать конфигурацию расширения на вкладке Конфигурация. Конфигурация может быть загружена / скопирована в файл, восстановлена ​​с / зарезервирована удаленно на устройство Platypush (смотри, нет облака!) Или загружена с URL-адреса.

Работа в процессе

Расширение все еще находится в стадии разработки, и я открыт для предложений, заявок и запросов на вытягивание на странице GitHub. В моей дорожной карте, в частности, есть две функции:

Интеграция с протоколом веб-сокетов Platypush

Это позволит реализовать множество интересных функций, таких как проверка состояния работоспособности удаленных устройств, передача больших объемов данных (например, аудио / видеопоток с удаленного устройства) и, самое главное, настройка перехватчиков событий - скриптов, которые запускаются автоматически. когда устройство Platypush запускает событие, например, обработан ответ голосового помощника, изменен статус мультимедиа, изменена сцена освещения, получены новые данные датчика и т. д.

Поддержка сторонних библиотек через API

На данный момент API скриптов предоставляет библиотеки парсеров axios и mercury, но я считаю, что для большей гибкости должна быть возможность импортировать внешние библиотеки в пользовательские скрипты с помощью чего-то столь же простого, как:

const jquery = app.loadScript('https://some.cdn/jquery.min.js');

В конце концов, если проект получит достаточную поддержку, я бы хотел создать репозиторий, где пользователи могли бы делиться своими творениями - при условии, что мы все помним, что большая сила влечет за собой большую ответственность :)

Заключение

Я понимаю проблемы безопасности и единообразия, которые привели к принятию API WebExtensions. Но я также понимаю, почему многие расширения, которые раньше полагались на более глубокую интеграцию с браузером, отказались идти на компромисс с новым API и тем временем были прекращены.

Я сам много боролся, разрабатывая это расширение с новым API, поскольку текущий API WebExtensions создает множество песочниц и делает только части информации доступными для определенного контекста (например, фоновый скрипт, скрипт контента или контекст всплывающего окна), и он вынуждает разработчиков, которым требуется доступ к информации и функциям для различных частей своего приложения, создавать сложные системы обмена сообщениями для передачи данных. Это также накладывает жесткие ограничения на то, какие фрагменты кода могут быть выполнены и где (удачи вам в попытках уйти с eval в вашем коде). С помощью веб-расширения Platypush я попытался заполнить пустоту, оставленную устареванием API-интерфейсов предыдущих расширений / приложений / надстроек, и предоставить опытным пользователям уровень для глубокой настройки поведения своих браузеров. Я также хотел создать расширение, которое дало бы мне легкий доступ из того же пользовательского интерфейса и той же кнопки к все более фрагментированному миру интеллектуальных устройств вокруг меня. К тому же я устал видеть, как пространство на моей панели инструментов заполняется тоннами значков расширений, которые могут выполнять только одну конкретную задачу!