Как сделать виртуальный браузер

Обновлено: 04.07.2024

За последние несколько месяцев мы внесли множество улучшений в движок рендеринга 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.

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

Но ведь тоже самое можно сделать и в обычном десктопном браузере, включив в панели разработчика режим эмуляции. Давайте посмотрим, как воспользоваться им в Chrome , Mozilla , Opera и Microsoft Edge .

В Google Chrome

Находясь на странице тестируемого сайта, откройте главное меню браузера и выберите в нём «Дополнительные инструменты» -> «Инструменты разработчика».

В открывшейся справа или снизу панели кликните по значку «Toggle device toolbar» или нажмите комбинацию клавиш Ctrl + Shift + M . В левой колонке окна Chrome тут же отобразится сайт с примененным к нему адаптивным шаблоном. Чтобы выбрать конкретное мобильное устройство, вызовите выпадающий список «Responsive» и укажите в нём наиболее подходящую модель мобильного гаджета. Если нужной вам модели в списке не окажется, выберите в этом же меню опцию «Edit».

И поищите ее в расширенном списке устройств. В случае отсутствия модели, нажмите «Add custom device».

И добавьте ее вручную, указав разрешение экрана.

После нажатия «OK» модель появится в списке «Responsive».

В Mozilla Firefox

В браузере Firefox нужно открыть главное меню и выбрать в нём «Веб-разработка».

«Адаптивный дизайн».

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

И отмечаем галочкой в расширенном списке наиболее подходящее устройство, а в случае отсутствия шаблона добавляем свое.

В желании можно даже включить эмуляцию сенсорного ввода (мышка станет работать как палец или стилус) .

В Opera

Поскольку Opera построен на том же движке, что и Chrome, эмуляция мобильного браузера в этом веб-обозревателе почти ничем не отличается от эмуляции в Google Chrome.

В главном меню выбираем «Разработка» -> «Инструменты разработчика».

И жмем в открывшейся справа панели иконку «Toggle device toolbar». Далее в меню «Responsive» выбираем подходящее устройство или добавляем его через «Edit».

В Microsoft Edge

Аналогичным образом можно получить доступ к эмуляторам мобильных версий в Microsoft Edge, так как этот браузер тоже использует движок рендеринга Chrome, отличаются только названия опций.

Вызвав главное меню обозревателя, выберите в нём «Другие инструменты» -> «Средства разработчика».

В открывшейся справа панели кликните по значку «Включить или отключить эмуляцию устройства» и выберите в уже известном вам списке «Responsive» (в Microsoft Edge он называется «Реагирует») свой гаджет или добавьте его, выбрав/создав в списке устройств наиболее соответствующий вашей модели шаблон.

Работать в эмулируемых мобильных браузерах можно так же, как и в обычных десктопных обозревателях.

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

Чтобы создать сегодня свой сайт, совсем необязательно знать языки программирования, большинство веб-ресурсов не пишется, а собирается в различных программах-конструкторах, получивших в последнее время широкое распространение. Конструкторы эти становятся настолько совершенными, что создавать в них можно даже собственные десктопные приложения. Пример работы в одном из таких конструкторов мы сегодня рассмотрим, создав в нём с нуля свой браузер.

Естественно, браузер будет обладать минимальным набором функций, но ведь мы и не претендуем на звание профессиональных разработчиков. В качестве конструктора мы будем использовать Visual Studio Community 2019 — бесплатную интегрированную среду разработки для написания и запуска кода на разных платформах. Название может показаться пугающим, в действительности ничего такого архисложного нет, код писать почти не придется, вместо него мы будем собирать его готовые блоки, представленные графическими элементами.

Выбираем установку Visual Studio Community 2019.

Процедура займет определенное время, поскольку потребуется скачать более гигабайта данных.

По завершении установки и запуска платформы.

Выбираем в меню «Создание проекта».

Жмем «Далее», даем будущему браузеру имя и нажимаем «Создать».

Через несколько секунд перед нами предстает пустая форма, в ней будем размещать элементы управления веб-обозревателем. Вызываем нажатием на узкую полоску слева панель инструментов, раскрываем пункт «Все формы Windows Form» и выбираем двойным кликом «WebBrowser».

Справа располагаются другие две панели, верхняя содержит список файлов проекта, нижняя — свойства пока еще пустого окна. Здесь можно изменять параметры выбранного элемента — устанавливать размеры окна, его прозрачность, фон, включать и отключать полосы прокрутки и так далее. Если это будет не окно, а другой элемент, скажем, кнопка, то и параметры будут другие.

Рабочее окно уже есть, теперь следует позаботиться об элементах управления. Создадим область для панели инструментов обозревателя. Кликаем по маленькой иконке-треугольнику около кнопки закрытия окна и жмем «Открепить в родительском контейнере».

А затем растягиваем появившуюся пунктирную линию в окне будущего браузера, формируя таким образом панель управления.

Желающие также могут создать текстовое поле для ввода текстовых данных (TextBox) и кнопки перехода, но мы ограничимся четырьмя элементами. Разместив их на форме должным образом, кликаем по каждому из них и настраиваем их параметры — даем им соответствующие наименования, меняем, если нужно, цвет и так далее. Теперь настала пора самого главного — назначения управляющим элементам действий. Для этого дважды кликаем по каждой из кнопок и прописываем в месте, где установился курсор следующий код:

Сохраняем результат через меню «Файл» -> «Сохранить всё» и запускаем компиляцию приложения нажатием кнопки «Пуск» на панели управления средой разработки (исполняемый файл находится в папке проекта) .

Через несколько секунд собственноручно сконструированный браузер запустится.

Если элементы на форме окажутся не там, где предполагалось, исправляем, перемещая их в визуальном редакторе.

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

Размер созданного браузера у нас составил всего 9,5 килобайт, но этого вполне хватило, чтобы вместить в него базовый функционал, обеспечивающий не только веб-серфинг, но и скачивание файлов, а также просмотр мультимедийного контента в потоковом режиме.

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

К сожалению, ввиду низкой популярности за пределами РФ, найти Яндекс.Браузер, работающий в режиме онлайн, у вас не получится.

Что такое онлайн-браузер?

Итак, как же работает браузер в браузере в режиме онлайн? Давайте кратко разберемся. В данном случае обозреватель, запускаемый в другом обозревателе, это приложение, написанное на одном из языков программирования. Каждое из них может обладать собственными положительными и отрицательными особенностями. Их мы тоже опишем в соответствующем разделе.

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

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

Запускаем браузер в браузере

Итак, рассмотрим несколько лучших сервисов, позволяющих запускать один браузер в другом в режиме онлайн.

CrossBrowserTesting

Один из самых функциональных ресурсов, позволяющих включить практически любой интернет-обозреватель в режиме онлайн. При этом поддерживаются разные операционные системы, например: Microsoft Windows, Linux или MacOS. Кроме этого, можно использовать и мобильные операционные системы такие, как: Apple iOS или Android. К функциям обозреваемого ресурса относится и следующее:

Тестирование любой веб-странички в режиме реального времени. При этом поддерживается проверка таких технологий, как: AJAX, HTML, JavaScript или Flash.
Сервис способен автоматически создавать скриншоты одновременно для всех поддерживаемых браузеров. Вы просто вводите адрес сайта, а на выходе получаете тест кросс-платформенности на любых операционных системах и обозревателях.
Поддерживается режим сравнения слоев. Программа сравнивает один и тот же сайт, компилируемый в разных браузерах, при этом режиме реального времени, отображаются отличия.
Снимки экрана и запись видео при возникновении ошибки.
Большой набор отладочных инструментов.
Отображение данных о сетевом трафике.
Также присутствуют дополнительные возможности, среди которых:
- тест сайта на локальном компьютере;
- создание снимков тех веб-страниц, зайти на которые можно только после авторизации;
- поддержка работы с API;
- тонкая настройка всех поддерживаемых браузеров;
- отображение отладочной информации.
- К достоинствам можно отнести, например, большой выбор разных обозревателей и возможности их настройки.
- Хорошее быстродействие сервиса.
- Огромный набор дополнительных инструментов.
- Отсутствует русский язык.
- Сервис является платным.
Если вас не устраивает инструмент, за который нужно обязательно платить, давайте перейдем дальше и рассмотрим ресурс, позволяющий попробовать свои возможности бесплатно.

Sauce Labs

Как мы уже говорили, данный сервис позволяет бесплатно поработать с собой в течении двух недель. При этом количество поддерживаемых возможностей практически не уступает предыдущему варианту нашего ТОПа. Работая с Sauce Labs, вы не просто запустите браузер в браузере в режиме онлайн, но и получите доступ к огромному количеству дополнительных возможностей:
- Общий тест для проверки производительности определенного сайта.
- Интеграция тех приложений, которые понадобятся пользователю для тестирования.
- Предоставление рекомендаций по оптимизации ресурса
- Тестирование в режиме реального времени.
- Веб-тестирование.
- Выбор любого разрешения экрана.
- Есть версии того или иного обозревателя. При этом поддерживается бета-редакция и версия для разработчика.
- Все испытания, которые вы производили, записываются в специальный журнал.
- широкий набор возможностей;
- большое количество дополнительных инструментов;
- возможность выбора версии обозревателя.
- отсутствие русского языка;
- некоторые инструменты находятся в режиме бета-тестирования и не всегда работают.
Browsera

Еще один сервис, позволяющий тестировать ваш сайт онлайн в браузере. Давайте рассмотрим список возможностей данного ресурса для того, чтобы вы понимали, стоит ли тратить время на регистрацию:
- большое количество разных возможностей;
- присутствует обучающий режим;
- есть тестовый период.
- у сайта отсутствует сертификат безопасности SSL;
- для перехода к тестовому режиму вам понадобится привязать банковскую карту.
Browserling

Это лучший сервер, позволяющий запустить ваш сайт в режиме онлайн через любой виртуальный браузер. Здесь нет ничего лишнего, а все функции выполнены максимально наглядно и доступ к ним получить очень просто. При этом сервис полностью бесплатный и нам не нужно не то, что привязывать свою банковскую карту, а даже регистрироваться. Сразу после перехода на сайт вы просто вводите адрес тестируемого ресурса, выбирайте операционную систему, а также версию обозревателя. После этого кликаем по кнопке начала процесса тестирования и видим отображаемый результат.
- Простота использования. Тут даже не нужно регистрироваться.
- Симпатичный пользовательский интерфейс.
- Широкий набор различных обозревателей как для компьютерных, так и для мобильных операционных систем.
- Хорошее быстродействие и отсутствие глюков.
- Не поддерживается iOS.
- Нет русского языка.
Именно данный ресурс мы рекомендуем своим пользователем для использования браузера в браузере онлайн. Это лучший вариант, который, наверняка, устроит большинство из вас.

NetRenderer

Рассмотрим еще один сервис, позволяющий запустить интернет-обозреватель в режиме онлайн. Его отличительной особенностью является то, что здесь можно использовать только браузер Internet Explorer. Однако, для полноты картины мы должны были упомянуть и об этом сайте.

Работать с ресурсом очень просто. Вы переходите по приведенной ниже ссылке, выбирайте версию Microsoft Internet Explorer, прописываете адрес тестируемого сайта, а потом жмете кнопку с надписью Render. В результате выбранный ресурс сразу же отобразится таким, каким он был бы и на компьютере.
- В отличие от всех других сервисов, о которых мы говорили, данный ресурс является полностью бесплатным.
- Хорошее быстродействие и отсутствие лишних компонентов, затрудняющих использование сайта.
- Отсутствию русского языка.
- Тут можно использовать всего один браузер.
Browserstack

Последний сервис в нашем списке тоже позволяет бесплатно и без регистрации запустить браузер в браузере прямо в режиме онлайн. К его основным возможностям можно отнести:
- Интерактивное кросс-браузерное тестирование в режиме онлайн.
- Использование сертификата безопасности, обеспечивающего максимальную защиту данных пользователя.
- Тестирование приложений.
- Огромное количество операционных систем и устанавливаемых на них браузеров.
- Переключение на другую ОС или обозреватель всего один клик.
- Наличие специального окошка с основными инструментами, позволяющими:
  - производить локальное тестирование;
  - менять разрешение экрана;
  - проводить отладку веб-странички;
  - менять местоположение.
  - широкий набор возможностей;
  - наличие бесплатной версии;
  - удобство использования.
  Видеоинструкция
  
  Для того чтобы вы могли лучше разобраться с рассматриваемой темой, мы рекомендуем просмотреть обучающее видео, в котором автор максимально наглядно и подробно рассказывает обо всех существующих онлайн-браузерах при этом показывая все на собственном компьютере.
  
  Заключение
  
  Теперь, когда вся информация, которую нужно было передать пользователю, опубликована, мы можем закрывать свою инструкцию, а вы переходите к делу. Тестируйте интернет-обозреватели, запускаемые в режиме онлайн. Но при этом помните, о чем мы говорили выше: не вводите логины и пароли от настоящих аккаунтов. Это может привести к краже персональных данных.
  
  Читайте также: