Создаём кросс-платформенный десктопный мессенджер из vc.ru в четыре строчки кода

Работать в «Комитете», понимать, как работает API «Основы», на которой построен vc.ru, и вообще быть программистом для этого необязательно.

Для этого нужен фотошоп и шаблон иконки приложения для iOS. Но я всё сделал за вас

Загрузите в полном размере к себе на компьютер и сохраните как «icon.png». Она пригодится нам позднее – мы добавим её к приложению, чтобы оно было красивое :)

Создаём кросс-платформенный десктопный мессенджер из vc.ru в четыре строчки кода

На самом деле это Chrome, внутри которого открывается заранее установленный сайт.

Как загрузить nativefier можно посмотреть на официальной страничке:

github.com

jiahaog/nativefier

Make any web page a desktop application. Contribute to jiahaog/nativefier development by creating an account on GitHub.

для этого требуется macOS 10.9+ / Windows 7+ / Linux (как повезёт)

Если вам повезло, и у вас есть npm или homebrew, установить его можно в одну команду:

npm i nativefier -g или brew install nativefier

На линукс npm так же просто поставить, как на мак homebrew

Поставить на мак: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" Поставить на линукс: sudo apt install npm

и затем выполните предыдущее действие.

Если вы в Windows и не справились поставить, просто попробуйте то же самое в браузере :)

Если мы сейчас просто запустим nativefier, то получим обычный сайт vc.ru

Чтобы сделать его больше похожим на месенджер, необходимо с помощью javascript удалить шапку сайта и левую панель.

Для этого в той же папке, что и иконка, создадим файл «remove.js»

И запишем в него 4 простые команды – найти объект, удалить объект:

let sidebar = document.getElementsByClassName("layout__left-column")[0] let header = document.getElementsByClassName("site-header")[0] sidebar.parentNode.removeChild(sidebar) header.parentNode.removeChild(header)

Мы практически у цели! Нужно теперь запустить сам nativefier

nativefier https://vc.ru/m/ --name SiliconMessenger --icon ./icon.png --counter --bounce --inject ./remove.js --disable-context-menu --disable-dev-tools Дополнительные параметеры (нужны для кроссплатформенной сборки) --platform mac | win32 | linux ; нужен, если вы хотите собрать приложение для другой системы --arch x86 | x64 | arm ; нужен, если хотите собрать для другой архитектуры

--name SiliconMessenger укажет название для приложения, которое мы хотим задать

--counter --bounce нужны для того, чтобы уведомления страницы в браузере (которые обычно видны на вкладке) отображались на иконке приложения в доке или панели задач (см. api nativefier).

--inject. /remove.js подтянет команды для удаления лишних деталей интерфейса, которые мы написали выше.

--disable-context-menu --disable-dev-tools нужны чтобы никто не догадался, что это на самом деле Chrome: )

Если вы всё сделали по инструкции, то должны были получить что-то такое (для Windows и линукс – аналогично, но с другим оформлением окна)

Поскольку сайт адаптивный – мы получили адаптивное приложение, изображения скачивать также удобно, как с сайта, а все ссылки внутри нашего «приложения» откроются отдельно в вашем стандартном браузере.

Можно запустить его слева столбиком, а справа работать

Плюсом, так как это Chrome, все стандартные команды ctrl(cmd)+C/+V/+R (чтобы перезагрузить страницу) и остальные продолжают работать, как вы привыкли.

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

На правах юмора. Если захотите, я могу выложить. exe /.dmg / исполняемый файл для linux или помочь вам сделать это самостоятельно

#selectel_инструкция #electron

10 комментариев

Александр Львов

21.09.2020

Но зачем?

Ответить

Denis Kiselev

Все жду, когда в nativefier добавят стандартную возможность делать разделяемый runtime в объёме того же chrome.

Фактически, каждое такое приложение - это просто набор скриптов, картинок и тп. Оно легкое - если не считать runtime с chomium, но он нужен один в системе.