Как сделать сборку браузера
Не секрет, что большинство дистрибутивов Windows, из тех, которые выкладываются на торрент-трекерах, являются пользовательскими сборками. Все эти сборки, пусть и условно, можно разделить на два типа. К первому типу относятся сборки с сохранёнными исходными системными компонентами и интегрированным в них сторонним программным обеспечением, ко второму типу относятся так называемые облегченные сборки, из которых вырезано добрая половина компонентов.
Не секрет и то, что именно такие легкие сборки доставляют пользователям больше всего проблем.
Изначально в Windows закладывается больше возможностей, чем это может понадобиться среднему пользователю, система, если можно так сказать, дается на вырост. И вот, если некий юзер захочет к своей системе что-то прикрутить, ранее неиспользуемые им компоненты окажутся даже очень кстати. А теперь представьте, что у этого самого юзера установлена облегченная сборка. Интересно знать, кого помянет он недобрым словом, создателя этой сборки или самого себя, такого недальновидного, умудрившегося повестись на обещанную легкость и производительность Lite-системы.
Так как же быть, может быть пользоваться только официальными сборками? Необязательно, особенно если у вас маломощный компьютер, просто иногда лучше сделать всё самому, то есть собрать образ Windows самостоятельно с учетом ваших нужд. Как это сделать, как раз будет изложено в этой статье. Создавать сборку мы предлагаем с помощью программы NTLite. Она платная, цена домашней версии составляет 40 долларов, кто не хочет платить, могут поискать в интернете пусть и не самые новые, но «вылеченные» и вполне рабочие версии.
Что такое NTLite
Программа NTLite — это мощный инструмент для создания модифицированных сборок Windows. С ее помощью вы можете удалить с дистрибутива системы всё то, что вам покажется лишним либо же напротив, добавить в него то, чего в нём не было изначально. NTLite позволяет удалять из образов системные компоненты, отключать службы, задавать настройки, интегрировать сторонний софт, твики реестра, драйвера и обновления.
Требует ли NTLite от сборщика каких-то знаний? Да. Необходимо по меньшей мере знать, каким целям служат те или иные компоненты, иначе можно на выходе получить глючную систему. Но это, если вы собрались облегчать сборку. Интеграция сторонних компонентов намного менее рискованна.
Создание собственной сборки Windows
Конструирование сборки проходит в три этапа. На первом производится распаковка образа Windows, на втором — его настройка в программе NTLite, на третьем этапе выполняется упаковка файлов в установочный образ. Первым делом распакуем архиватором установочный ISO -образ с Windows в отдельную папку. Пусть он называется data .
Запускаем NTLite, жмем кнопку «Добавить» и указываем путь к папке с распакованным ранее образом ISO . При этом в окне программы вы увидите структуру образа, в котором, кстати, могут быть несколько редакций. Мы будем работать с редакцией Windows 10 Pro. Кликаем по ней ПКМ и выбираем опцию «Загрузить». Если программа попросит подтвердить преобразование образа WIM в ESD , подтверждаем операцию. Процедура преобразования (загрузки) WIM или ESD образа займет некоторое время. По завершении процедуры в левой части окна программы вы увидите панель с несколькими вкладками. Пробежимся по ним по-быстрому.
Удаление и отключение компонентов и служб
В разделе «Компоненты» содержатся модули Windows, которые можно отключить, сняв с них галочки. Сюда входят предустановленные универсальные приложения вкупе с Защитником, компоненты аппаратной поддержки некоторых периферийных устройств и их драйвера, модули мультимедиа — темы, звуки, обои и прочее, сетевые службы и приложения, например, менеджер платежей NFC , системные компоненты — Hyper-V , подсистема Linux , редактор символов, теневое копирование и многое другое. Некоторые компоненты заблокированы по совместимости, это означает, что их нельзя удалить, но можно отключить в разделе «Функции». При удалении компонентов необходимо проявлять осторожность, внимательно знакомиться с описаниями, благо, они даются на русском языке.
В разделе «Функции» отключаются недоступные для удаления компоненты, например, NET Framework . Среди доступных для отключения модулей — офисные игры, гаджеты, клиент рабочих папок, индексация и поиск, подсистема Linux , WMC , службы IIS , PowerShell 2.0 , PDF -принтер и Internet Explorer , отключать который, кстати, не рекомендуется, поскольку это может привести к неправильной работе других программ.
Раздел «Настройки» отвечает за включение/отключение различных настроек, действующих для всех пользователей системы, раздел «Службы» — за включение/отключение системных служб. Здесь, как и в «Компонентах» нужно быть внимательным, чтобы не отключить важную службу, без которой Windows даже не сможет запуститься. Особенно это касается служб во вкладке «Дополнительные службы».
Интеграция обновлений, драйверов и твиков реестра
Следующие три вкладки содержат инструменты для интеграции в дистрибутив обновлений, драйверов и твиков реестра. Если нужно добавить, скажем, новое обновление безопасности или языковой пакет, жмем кнопку «Добавить» и указываем путь к файлу CAB , MSU или EXE . В этом же разделе отображаются уже установленные пакеты. С драйверами всё аналогично, только драйвер должен быть распакован, поскольку NTLite понадобится его конфигурационный inf -файл. Точно так же в систему интегрируются твики реестра: жмем кнопку «Добавить» и указываем путь к файлам REG .
Персональные настройки и установка сторонних программ
Если сборка создается для себя, не будет лишним заглянуть в раздел «Автоматическая». Здесь задаются персональные настройки пользователя: имя компьютера, локализация, часовой пояс, сетевые настройки, опции оболочки, сжатие, параметры лицензирования (установка ключа и т.д.) , выполняется настройка WinPE .
Если вы хотите интегрировать в образ стороннее программное обеспечение, сделать это можно будет в разделе «После установки» с помощью функции Post-Install. В этом также нет ничего сложного просто жмем уже знакомую кнопку «Добавить» и указываем путь к исполняемым файлам приложений. Процедура их установки будет поочередно запущена на раннем этапе установки сборки Windows. Дополнительно поддерживается установка с параметрами, — в поле «Параметры» прописываются нужные ключи, например, для тихой установки.
Сохранение настроек и упаковка сборки в образ
По большому счету это всё, осталось только применить заданные настройки и упаковать файлы модифицированной сборки в установочный образ. Переключаемся на вкладку «Применить» и определяемся с параметрами образа. При создании сборки Windows 7 всё можно оставить по умолчанию, если это будет сборка Windows 8.1 или 10, необходимо выбрать формат образа «Высокое сжатие», при котором WIM -образ преобразуется в ESD . После этого отмечаем галочкой чекбокс «Создать ISO».
Почти всё готово, можно приступать к упаковке. Присвоив сборке подходящее имя, жмём кнопку «Обработка». Если в вашей системе включен Защитник, NTLite попросит его отключить, так дело пойдет быстрее. Время создания сборки будет зависеть от количества заданных операций, причем большую часть времени займет конвертирование WIM в ESD (в Windows 8.1 и 10) , в среднем вся процедура занимает от 40 минут до часа или более. По завершении вы получите готовый установочный образ, который можно записать на флешку или оптический диск.
Спешить устанавливать полученную сборку на свой компьютер, а тем более выкладывать ее на торрент или другой ресурс, однако, не стоит. Сначала нужно убедиться, что сборка рабочая, для чего необходимо протестировать ее на виртуальной машине. Впрочем, можно обойтись и без виртуальной машины. Если у вас есть свободный компьютер, с помощью NTLite вы можете модифицировать установленную на него Windows, выбрав в главном окне «Живая установка» и проделав всё то же самое, о чём было сказано выше. Правда, сохранить в отдельный образ ISO или ESD «живую» систему не получится, зато тестировать ее можно будет тут же на физической машине, выявляя наиболее подходящие варианты модификации.
За последние несколько месяцев мы внесли множество улучшений в движок рендеринга Microsoft Edge (EdgeHTML), делая особый акцент на совместимости с современными браузерами и соответствии новым и грядущим стандартам. Помимо того, что EdgeHTML лежит в основе браузера Microsoft Edge, он также доступен для приложений на Universal Windows Platform (UWP) через элемент управления WebView. Сегодня мы хотим рассказать, как можно использовать WebView для создания своего браузера в Windows 10.
Используя стандартные веб-технологии, включая JavaScript, HTML и CSS, мы создали простое UWP-приложение, которое содержит внутри WebView и реализует базовую функциональность: навигацию и работу с избранным. Подобные приемы могут быть использованы в любом UWP-приложении для прозрачной интеграции веб-контента.
В основе нашего примера лежит мощный элемент управления WebView. Помимо комплексного набора API, данный элемент также позволяет преодолеть некоторые ограничения, присущие iframe, например, отслеживание фреймов (когда некоторый сайт меняет свое поведение в случае выполнения внутри iframe) и сложность определения загрузки документа. В дополнение x-ms-webview, — так WebView задается в HTML, — дает доступ к функциональности, не доступной в iframe, в частности, улучшенный доступ к локальному контенту и возможности делать снимки содержимого. Когда вы используете элемент управления WebView, вы получаете тот же самый движок, что и в Microsoft Edge.
Создаем браузер
Как было написано выше, браузер базируется на элементе управления WebView для HTML, а для создания и оживления пользовательского интерфейса в основном используется JavaScript. Проект создан в Visual Studio 2015 и представляет собой универсальное Windows-приложение на JavaScript.
Помимо JavaScript, мы также использовали немного HTML и CSS, а также некоторое количество строк кода на C++ для поддержки комбинаций клавиш, но это не требуется в простом случае.
Также мы пользуемся новыми возможностями нового ECMAScript 2015 (ES2015), поддерживаемыми в Chakra, JavaScript-движке, работающем в Microsoft Edge и элементе управления WebView. ES2015 позволил нам сократить количество генерируемого и шаблонного кода, тем самым существенно упростив реализацию идеи. Мы использовали следующие возможности ES2015 при создании приложения: Array.from(), Array.prototype.find(), arrow functions, method properties, const, for-of, let, Map, Object.assign(), Promises, property shorthands, Proxies, spread operator, String.prototype.includes(), String.prototype.startsWith(), Symbols, template strings и Unicode code point escapes.
Интерфейс пользователя
Пользовательский интерфейс включает следующие десять компонентов:
Дополнительная функциональность
Мы также реализовали несколько дополнительных возможностей, чтобы сделать работу с браузером еще более приятной:
Использование WebView
Введенный для JavaScript-приложений в Windows 8.1 элемент управления WebView, иногда также упоминаемый по имени тега x-ms-webview, позволяет хостить веб-контент внутри вашего Windows-приложения. Он доступен как для HTML, так и для XAML.Для начала работы достаточно разместить соответствующий элемент в коде страницы.
Разработка браузера
Мы будем использовать 15 различных API x-ms-webview. Все кроме двух из них управляют навигацией между страницами с некотором смысле. Давайте посмотрим, как можно использовать данные интерфейсы для создания различных элементов UI.
Управление кнопками назад и вперед
Когда вы нажимаете кнопку назад, браузер возвращает предыдущую страницу из истории браузера, если она доступна. Аналогично, когда вы нажимаете кнопку вперед, браузер возвращает последующую страницу из истории, если она также доступна. Для реализации подобной логики мы используем методы goBack() и goForward(), соответственно. Данные функции автоматически осуществят навигацию на корректную страницу из стека навигации.
После перехода на некоторую страницу, мы также обновляем текущее состояние кнопок, чтобы предотвратить «возможность» навигации, когда мы достигаем одного из концов стека навигации. Другими словами, мы отключаем кнопки навигации вперед или назад, проверяя свойства canGoBack или canGoForward на равенство false.
Управление кнопками обновления и остановки
Кнопки обновления и остановки слегка отличаются от остальных компонент панели навигации тем, что они используют одно и то же место в UI. Когда страница загружается, нажатие на кнопку остановит загрузку, спрячет «кольцо прогресса» и отобразит иконку обновления. И наоборот, когда страница загружена, нажатие на кнопку запустит обновление страницы и (в другой части кода) отобразит иконку остановки. Мы используем методы refresh() или stop() в зависимости от текущих условий.
Управление адресной строкой
В целом, реализация адресной строки может быть очень простой. Когда адрес URL введен в текстовое поле, нажатие Enter вызовет метод navigate(), используя содержимое input-элемента адресной строки в качестве параметра.
Однако современные браузеры пошли сильно дальше и внедряют дополнительную функциональность для удобства пользователей. Это добавляет некоторую сложность в реализации – и тут все зависит от сценариев, которые вы хотите поддержать.
Отображение favicon
Мы используем метод invokeScriptAsync(), чтобы вставить внутрь элемента управления WebView скрипт, который вернет строку в случае успеха. Наш скрипт ищет внутри страницы все элементы с link-теком, проверяет, если rel-атрибут содержит слово “icon”, и в случае совпадения возвращает значение “href”-атрибута назад в приложение.
Как упомянуто выше, мы используем в нашем коде возможности из новой спецификации ES2015. Вы могли заметить использование стрелочной нотации во многих примерах выше, а также ряд других возможностей. Вставляемый скрипт – это отличный пример улучшения кода, достигаемого за счет поддержки ES2015.
Поддержка комбинаций клавиш
Чтобы определить нажатие горячих клавиш для выполнения тех или иных действий, например, чтобы при нажатии комбинации Ctrl+L выделять адресную строку или по F11 переключаться в полноэкранный режим, нам нужно вставить еще один скрипт в WebView. Для этого мы используем метод invokeScriptAsync(), который мы уже упоминали выше. Однако, нам нужно как-то сообщать назад в слой приложения, когда те или иные клавиши нажаты.
С помощью метода addWebAllowedObject(), мы можем выставить для инжектируемого кода метод, через который можно будет передавать нажимаемые клавиши в слой приложения на JavaScript. Также важно понимать, что в Windows 10, элемент управления WebView выполняется в отдельном потоке. Нам нужно создать диспетчер, который будет передавать события в поток UI, чтобы слой приложения мог их обрабатывать.
Внешний вид браузера
Теперь, когда мы разобрались с ключевыми API WebView, давайте немного улучшим внешний вид нашего браузера.
Брендирование заголовка
Используя API Windows Runtime, мы можем поменять свойство ApplicationView.TitleBar, чтобы настроить цветовую палитру все компонентов заголовка приложения. В нашем браузере при загрузке приложения мы меняем цвета так, чтобы они соответствовали панели навигации. Мы также обновляем цвета при открытии меню, чтобы соответствовать фону меню. Каждый цвет нужно задавать как объект с RGBA свойствами. Для удобства мы создали вспомогательную функцию, генерирующую нужный формат из шестнадцатеричной строковой записи.
Прочие возможности
Индикация прогресса, а также меню настроек и избранного используют CSS transitions для анимации. Из меню настроек временные веб-данные можно очистить, используя метод clearTemporaryWebDataAsync(). А в меню избранного отображаемый список хранится в JSON-файле в корневой папке перемещаемого хранилища данных приложения.
Исходный код
Полный пример кода доступен в нашем репозитарии на GitHub. Вы можете также попробовать демонстрационный браузер, установив соответствующее приложение из Windows Store, или развернув приложение из проекта для Visual Studio.
Создайте свое приложение для Windows 10
С помощью WebView мы смогли создать простой браузер, используя веб-стандарты, буквально за день. Интересно, что вы сможете создать для Windows 10?
Сегодня я предлагаю посмотреть как можно подрихтовать исходники chromium-а, собрать свой вариант браузера и подтянуть это добро в electron. Эта статья — пробный шар, какая то часть ее позже перекочует в документацию проекта который, я надеюсь, смогу раскачать и сделать популярным, но об этом потом.
Идея вокруг которой крутится эта статья (и надеюсь многие другие, которые последуют) — простая до безобразия. Примерно как идея ноды — "а давайте прикрутим к v8 свой эвент луп и будем писать сервера на js". Хорошая идея, число хейтеров подтверждает. Или идея — "а давайте прикрутим спереди браузер, сзади — ноду и будем писать на этом кросс-платформенные приложения для десктопов". Это очень хорошая идея, число хейтеров подтверждает.
Моя идея хорошо вписывается в этот строй — а давайте выкинем все лишнее из хромиума, притащим этот огрызок в электрон, выкинем все лишнее из электрона что бы от него (электрона) ничего не осталось, да так что бы хейтерам было нечего ненавидеть и что бы они ненавидели нас за это. Хм. Хорошая идея, чем дольше над ней думаю тем больше мне она нравится.
Проблема каждой хорошей идеи — реализация. Естественно сразу после того как мне пришла в голову эта идея я с шашкой наголо бросился на исходники хромиума. Гм. Хромиум не просто большой. Он огромен. Он огромен как операционная система. Потому что он и является операционной системой. А последнее время он даже этого не скрывает и трасформируется в Chromium OS. Так вот, он огромен настолько что даже выкидывать код из него — не так просто как может показаться на первый взгляд. Но на второй взгляд и с нанадцатой попытки на самом деле можно освоить и это. Так что давайте возьмем себя в руки, уймем дрожь в коленках и приступим наконец уже.
Саму идею мы конечно реализовывать не будем, статья о гораздо более маленьком шаге — внести минимальные правки в chromium, собрать его, подтянуть это добро в electron и собрать электрон. Все. Но по пути я буду периодически отвлекаться от того что мы делаем на то зачем (в будущем) это нужно.
В приниципе если мы это пробросим в chromium то и нода для electron не нужна и ее можно выкинуть. Ок.
Мысль была простой — насколько возможно одиночке разобраться в сорцах хромиума, выкинуть что то ненужное и при этом не поломать что то нужное. И я пошел проверять эту гипотезу.
Давайте приступим. Для начала давайте убедимся что мы можем собрать chromium с сорцов. Тут никакого rocket science, все делаем по инструкции. Я собирал под мак поэтому пользовался этой инструкцией. Если вы под другой осью то стоит начать отсюда.
Не буду пересказывать содержимое этого документа, если мы собираем с оригинальной репы без переключений веток то все должно пройти гладко. Единственное что могу добавить — если вы ставили/обновляли XCode то после этого стоит его еще и запустить — он что то у себя там доставляет при старте. У меня был момент когда до этого телодвижения сборка не собиралась, после собралась (что то то ли с либами то ли с хедерами) и это было не xcodebuild -license (см. в самом конце упомянутой инструкции)
После того как вы установили depots_tools вся последовательность действий сводится к:
Консервативные пользователи которых раздражает хипстерский интерфейс вима могут проделать то же самое в vi, выбор за вами.
После этого остается только сделать
и дождаться завершения сборки.
Поскольку просто рассказывать что было сделано, приводить тут команды шелла и скриншоты результата — это скучно, тупо и никому не нужно, по пути я буду немного рассказывать о чем я думал когда это делал и немного про внутренности хромиума и электрона, что бы у вас образовался какой то фундамент если вдруг захотите сделать что то подобное но другое.
Так вот. Маленький кусочек большой картины. Если мы разматываем что-то, что проброшено в js, то есть какая то сущность к которой мы из js имеем доступ, то скорее всего это что-то прикручено в blink и проброшено в v8. Blink — это рендерер, то что занимается отрисовкой DOM на вашем экране, v8 — это js движок. У вменяемых программистов конечно же возникает картинка в которой blink сидит отдельно, имеет доступ к DOM (и CSSOM — тут, немножко тут, CSS Typed Object Model) и занимается отрисовкой, v8 занимается вычислениями и все такое. Так вот. Нет. Код писали не благородные лесные эльфы-крестоностцы, как можно было бы ожидать, а вполне себе обычные люди, в трудных ситуациях идущие на компромиссы. А с учетом размеров проекта — идти на компромиссы приходилось часто, так что будьте готовы удивляться. Сам по себе код обычно легко читаем, надо отдать должное. Но вот архитектурные решения и размазанность этого кода по проекту первое время удивляют.
Blink у нас лежит в third_party директории и у неискушенного читателя может сложиться впечатление что он автономен и выступает в роли зависимости, что то вроде npm-пакета в node_modules, но нет. Blink является практически неотъемлимой частью chromium, многое знает об его устройстве и не стесняется делать импорты из chromium-а что для порядочной зависимости является абсурдом. Не будем умничать, тут так принято (хотя да, и эти люди запрещают мне ковыряться в . ). Что бы понять насколько blink прирос мясом к chromium можно взглянуть например сюда или сюда.
(by the way, тут сидит народ из JetBrains, вопрос к ним — а есть какой то рецепт завести chroimium в Clion на обычной машинке а не выкованной высшими эльфами из Гандолина? И что бы два раза не вставать — а он mojom пережевывает?)
Ок. Идем в third_party/blink/renderer/platform/loader/cors/ и в cors.cc видим
Собираем по новой:
В этот раз все пройдет гораздо быстрее, вместо 50 000 артефактов собираться будет пара тысяч (сейчас точно не помню сколько было конкретно в этом случае, но обычно если mojom не трогали и никого не выкидывали [функции/методы/классы] редко более 5-7 тысяч артефактов пересобирается).
Запускаем chromium и скармливаем ему какой нибудь html типа
И дрожащей от нетерпения рукой открываем консоль в браузере. Ну что, обломались? Я вот тоже так же обломался. Ладно, не буду томить, вот коммит который делает работу. Тут кстати прикольная фича, я могу показать этот же коммит но в репе chromium-а, вот смотрите, не уверен как к этому относиться так что пофигу. Но сдается мне что король голый а форк не настоящий, но это потом, на тему автономности я планирую отдельную статью.
Ну а поскольку интрига сорвана давайте уже воспользуемся готовым результатом.
Естественно я уже выложил все в репе, вот тут, нам нужна ветка without/restricted-headers
Не торопитесь делать git clone . Если вы собирали хромиум по инструкции то сама репа у вас уже есть, она лежит в chromium/src . Для того что бы пролить в нее ветки с моей репы достаточно сделать
после этого делаем git remote -v и убеждаемся что форк прописан в репе, должно быть что то вроде:
Отлично. Git прекрасный инструмент для распределенной работы и мы еще поговорим об этом позже. А пока что нас интересует ветка without/restricted-headers .
Делаем git fetch gonzazoid , это прольет в локальную репу все изменения форка. После переключимся в нужную ветку: git checkout without/restricted-headers . Либо можно сделать git pull в текущую ветку но тут есть ньюансы.
Если вы собирали с main то собирали вы скорее всего другую версию хромиума, не ту с которой отбранчевалась ветка without/restricted-headers . А значит (с большой вероятностью) сборка не заработает. Потому что нужно:
Это долго и нудно. Но это стоит держать в голове. Однако когда вы переключаетесь между ветками которые отбранчевались с одного и того же коммита после переключения не только не надо делать gclient sync, но и не надо трогать директорию сборки. Нинзя сам разберется какие файлы поменялись, пересоберет объектники и все такое.
Ок, переключились на ветку without/restricted-headers и предположим что собрали ее. Скармливаем вышеупомянутый html и видим в консоли что то вроде:
Да, мы можем выставлять эти хедеры и хромимум даже бровью не ведет. Чудненько.
Но как браузер такая сборка не особа полезна (хромиум как браузер вообще не особо, частенько oh-snap-ает, на видео хостингах вообще бесполезен из за своего набора кодеков и все такое)
Но вот если мы это притащим в электрон, то там это может пригодиться.
Ок. Собираем электрон. (IRL вы еще захотите сохранить свои изменения, запушить их и повесить на коммит тег, но так как это учебная статья и я все уже сделал — то этот момент пока опускаем)
Знакомство со сборкой электрона стоит начать отсюда. После сборки chromium-а там почти все для вас будет знакомо. В сухом остатке:
Тут обратите внимание на строку
Если вы после сборки электрона в этой же сессии терминала пойдете собирать chromium то CHROMIUM_BUILDTOOLS_PATH будет указывать на build tools электрона. А когда вы снесете электрон из за того что у вас не хватает места то CHROMIUM_BUILDTOOLS_PATH будет указывать в никуда. Соотв. к сборке chromium-a (если вы решили вдруг пересобрать его ПОСЛЕ сборки электрона) добавляется этот же шаг — перед генерацией сборки делаем
в директории сорцов chromium-а.
Вернемся к электрону.
Структура директорий будет такая же как и у chromium, потому что в src у вас сейчас лежит на самом деле хромиум. Просто в его код добавилась директория electron в которой и лежит репа электрона. Ок. Запускаем сборку:
Опять же, если мы не чудили и все делали по инструкции то скорее всего все соберется. А вот как бы нам теперь электрону подсунуть свой chromium?
Побродив по сорцам находим в корне проекта /DEPS файл. И видим в нем строки:
Скорее всего нам сюда. Дальше в этом же файле видим:
Это мы удачно зашли.
Смотрим как это используется (в этом же файле)
остается только прописать тег который мы повесили на наш коммит в chromium:
Тут небольшое отступление. Версия chromium-а важна. Электрон пользуется chromium-ом не через Chromium Embedded а довольно агрессивно лезет в потроха и применяет свой набор патчей. Соответственно просто так взять и поменять версию chromium-а в сборке электрона как правило не получится — нужно танцевать от той сборки chromium-а на которую рассчитывает electron.
То есть в нашем случае нам нужна не последняя версия chromium в main а конкретно 98.0.4706.0. Если вы повторяете самостоятельно все шаги в статье — не расстраивайтесь. Можно сделать git stash, отбранчеваться от нужного тега и сделать git stash apply. Либо, если вы уже закоммитили — отбранчеваться от нужного тега и сделать git cherry-pick нужного коммита. Я в свое время начал эксперименты с отключения cookie вот в этой ветке отбранчевавшись от main, и когда дело дошло до электрона пожалел о своей беспечности. Но cherry-pick и за два вечера перенес порядка 80 коммитов в нужную ветку, ничего страшного.
Ок. Вернемся к сборке электрона. Наши коммиты в chromium-е вылиты на github, потеганы, конфиг электрона поправлен и мы готовы собирать. Но мы поменяли версию chromium-а и надо бы обновить все дерево сорцов и перегенерить план сборки.
Вот тут у меня довольно не проработанная часть. Я на самом деле сделал форк electron-а, завел свою ветку, закоммитил в ней изменения, вылил на github и запустил сборку вот так:
Поскольку директория src/electron и есть репа электрона, наверняка то же самое можно сделать локально, без выливания изменений на github, в инструкции по сборке электрона даже описывают это но я просто пока еще с этим не разбирался. Если кто пройдет этот путь короче — you are very welcome! Делитесь опытом, я обновлю статью.
Так. Сборка. Запускаем
И довольно быстро падаем с ошибкой про LLVM. Почему? Потому что chromium_git используется не только электроном но и самим chromium для сборки, он пытается сходить по тому урлу что мы ему дали и выкачать оттуда llvm (похоже что подрихтованный под этот проект иначе что бы ему не сходить по урлу самого LLVM) а так как там где мы ему указали LLVM нет — он падает.
Это очередной звоночек на тему автономности и опенсорсности, но пока просто запоминаем это и идем дальше.
Очевидно что нам придется оставить chromium_git в покое а менять значение в самой сборке урла:
И вот теперь то оно наконец то соберется. Ну наконец то! Помните тот html что мы ваяли для проверки в chromium? Вспоминаем его путь и делаем:
Открываем консоль в электроне и видим ту же картину что и на скриншоте выше. Отлично!
После этого запускаем
И увидим что то вроде:
Что то из этого уже работает, что то еще нет, все интересное только начинается!
Отдельной статьей будет объяснение того зачем я это все делаю и как я вижу как электрон можно сделать стройным как Снегурочку, но поскольку это уже будет «Я пиарюсь» — если вы хотите это продолжение — поддержите кармой.
Все. Новостей на сегодня больше нет, с вами был Тимур, хорошего настроения!
Задумывались ли вы когда-нибудь о создании собственного браузера? На самом деле попробовать себя в разработке программного обеспечения довольно легко, и для этого даже не потребуется больших знаний в программировании. Сегодня мы попробуем сделать первый шаг на пути к становлению гуру разработки. Возможно вас заинтересует этот процесс, и вы захотите углубиться сильнее.
Установка и обновления
Для начала вам необходимо скачать и установить Visual Studio Community Edition от Microsoft, который к слову абсолютно бесплатен. Эта среда разработки может показаться вам довольно громоздкой, но она содержит множество готовых шаблонов, в том числе и веб браузер, который нам так необходим.
Создаем собственный веб браузер
После развертывания всех необходимых компонентов, Visual Studio запустится автоматически. Первым делом вам предложат подключиться к различным службам для разработчиков, но в нашем случае такой необходимости нет. Выбираем пункт Не сейчас! Возможно, позже , выбираем понравившуюся тему оформления и наконец запускаем Visual Studio.
После того как Visual Studio будет запущен вы увидите рабочую область, которая разделена на две части. В левой части отображается пустая форма нашего проекта, а в правой части находится панель свойств, где мы сможем изменять размер и отступы элементов. Сейчас в левой части необходимо открыть меню Панель элементов , в разделе Стандартные элементы управления выбираем WebBrowser и щелкаем на пустое окно в нашей форме.
Создание элементов меню
Для создания элементов управления нам нужно снова воспользоваться Панелью элементов . Найдите там элемент Button и перетащите в верхнюю часть окна. Всего нам понадобиться 5 кнопок. Их цвет и форму можно будет изменить позже, в разделе свойства. Также нам нужна строка адреса – перетащите их из панели элементов TextBox в нашу форму.
Расставьте кнопки и текстовое поле так, как вам будет удобно. Visual Studio позволяет с лёгкостью сделать это симметрично и на одинаковом расстоянии. Сейчас нам необходимо немного изменить размеры содержимого, чтобы элементы управления не перекрывали веб страницу.
Для этого щелкните левой клавишей мыши на пустом поле нашей формы, а затем нажмите на небольшой треугольник в правом верхнем углу и выберете пункт Открепить в родительском контейнере . Теперь просто потяните за верхний белый квадрат вниз так, чтобы содержимое нашего браузера находилось под элементами управления.
Стоит разобраться, что мы только что написали. Первым делом мы обращаемся к нашему веб браузеру – как только мы перетащили элемент WebBrowser из панели в форму, мы создали элемент с именем webBrowser1. В программе может использоваться множество различных элементов и каждому из них задается имя по умолчанию и порядковый номер.
Теперь давайте разберемся со строкой поиска. Для нее значение будет следующим:
Начало здесь ровно такое же, как и раньше – мы просто обращаемся к нашему браузеру. Затем идет функция перейти ( Navigate ) на определенный адрес, у которой в скобках указаны параметры. В качестве параметров у нас опять же элемент тестовая строка с номером 1 ( textBox1 ) и текст из нее ( Text ) от которого мы передаем функции Navigate. Эту же функцию следует задать нашей пятой кнопке. Так мы пусть и повторим действие, зато будем уверены, если что-то пойдет не так, то сможем повторить процесс.
Запускаем наш браузер
Настало время запустить наш браузер. Для этого достаточно нажать кнопку Пуск в меню сверху. Спустя некоторое время вы увидите наш скромный веб обозреватель и сможете открыть в нем любую веб страницу. Если у вас что-то не получилось, то в первую очередь проверьте знак ; в конце строки. Сохраните свой браузер нажав иконку в виде дискеты, в левом верхнем углу и при следующем запуске окружения разработки у вас уже будут все инструменты под рукой.
Заключение
Сегодня мы рассмотрели один из самых простых вариантов применения Microsoft Visual Studio. Если, вам понравилось исследовать разработку программного обеспечения, то попробуйте изучить пособие Microsoft.
Создаете вы свой проект или только готовитесь к этому – просто поделитесь с нами в комментариях. Возможно именно наш скромный браузер вдохновит вас на нечто большее.
Многие пользователи вынуждены часто переустанавливать Windows, например, из-за регулярного тестирования различных приложений с вредоносной активностью. Вместе с тем, первоначальная настройка операционной системы всегда занимает много времени, вследствие чего мы решили рассказать о том, как создать собственную сборку, аналогичную Windows 10 Lite, с возможностью удаления или инсталляции необходимых компонентов.
Шаг 1
Первым делом потребуется скачать образ системы с официального сайта и сохранить на свой компьютер.
Шаг 2
Далее необходимо найти через любую поисковую систему бесплатную программу «Win Toolkit» и загрузить её также на ПК.
Шаг 3
Теперь нужно запустить скачанную утилиту, после чего появится главное меню, в котором следует выбрать вкладку «Basic» и раздел «all-in-One Integrator».
Шаг 4
Вслед за этим, необходимо распаковать скачанный образ Windows 10 в любую папку при помощи архиватора «7-Zip».
Затем в появившемся окне «WIM Manager» нажимаем «Browse» - «Browse for WIM» или просто сочетание клавиш «Ctrl+W», а после выбираем в папке с распакованным образом файл «install.wim» из директории «sources».
Шаг 5
На этом этапе отобразится перечень доступных версий ОС, из которых предпочтительно выбрать «Windows 10 Pro», и в меню «Other Tools» кликнуть «Component Removal».
Шаг 6
Следом придётся немного подождать распаковки образа и появления окна «Component Remover» с большим списком системных элементов. При этом компоненты, подчёркнутые красным цветом удалять не рекомендуется.
Шаг 7
На этой стадии, вслед за окончанием процесса перестроения ОС, выбираем «ISO Maker» для создания пользовательского образа или «USB Boot Prep» для формирования загрузочной флешки с рекомендуемым объёмом не меньше 16 Гб.
А вы когда-нибудь создавали собственные дистрибутивы операционных систем? Тогда напишите об этом в комментариях, будем вам благодарны!
Если вы желаете помочь развитию канала, тогда воспользуйтесь кнопкой ниже, будем рады любой помощи!
Спасибо, надеемся информация из нашего материала оказалась для Вас полезной, а если это так – подписывайтесь на канал, чтобы не пропустить новые публикации, ставьте лайки для поддержки наших экспертов и добавляйте наши инструкции в закладки браузера, чтобы их не потерять!
Читайте также: