Вы когда-нибудь представляли себе, как работает браузер и как вы можете создать браузер самостоятельно и заставить его делать почти все, что вы хотите? Что ж, я собираюсь поделиться своей историей написания браузера с нуля, имея только знания Javascript и electronic, а также все трудности, с которыми я столкнулся в процессе.

JavaScript

JavaScript, часто сокращенно JS, - это язык программирования, соответствующий спецификации ECMAScript. JavaScript - это высокоуровневый, часто скомпилированный точно в срок и мультипарадигмальный. Он имеет синтаксис фигурных скобок, динамическую типизацию, объектную ориентацию на основе прототипов и функции первого класса.

Электрон

Electron - это программный фреймворк с открытым исходным кодом, разработанный и поддерживаемый GitHub. Он позволяет разрабатывать настольные приложения с графическим интерфейсом пользователя с использованием веб-технологий: он сочетает в себе механизм рендеринга Chromium и среду выполнения Node.js.

История

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

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

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

Пару лет назад я разработал это настольное приложение для приборной панели поверх Electron для компании, и оно также было основано на Chromium, так почему именно Electron. Я быстро начал копаться в электронике и обнаружил, что электронные приложения - это в основном окна браузера, которые запускают HTML, а не только то, что я обнаружил, что Electron также поддерживает этот тег WEBVIEW, который может запускать веб-сайты внутри, и имеет для этого обширный API. также.

После пары часов исследований и экспериментов я смог создать простое электронное приложение с веб-просмотром, отображаемым как HTML, и иметь внутри этого веб-просмотра www.google.com. Я также обнаружил, что электрон рассматривает веб-просмотр как отдельное окно, поэтому у вас также будет доступ ко всем API окна браузера. Таким образом, в основном вы можете загружать, перезагружать, перемещаться вперед и назад и все действия, которые может выполнять простое окно браузера.

Теперь почти все было ясно, так как я смог создать пользовательский интерфейс браузера с помощью простого HTML. Я работаю с React в течение последних 2 лет на постоянной основе, при этом реагирую и реагирую нативно, поэтому работа с HTML не кажется эффективной. Поэтому я быстро клонирую это репо https://github.com/pbarbiero/basic-electron-react-boilerplate, чтобы начать.

Я первым делом при работе с электроном и реагирую на то, что, как я обнаружил, у электронов есть этот компонент веб-просмотра, который не поддерживается с помощью реакции, поэтому, чтобы ввести веб-просмотр, который поддерживается электроном, а не реагировать, вам нужно вручную ввести веб-просмотр через javascript в контейнер .

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

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

Благодаря этому у нас есть электронное окно, в котором есть элемент с идентификатором webviewContainer, и мы внедряем в него наш веб-просмотр, и мы могли выполнять основные действия в браузере.

Теперь наступает сложная часть: нам не нужен отдельный веб-сайт в окне, но нам нужно несколько вкладок, на каждой из которых запущен свой экземпляр веб-сайта, причем совершенно независимо. Это была причина, по которой я использовал React; это значительно упрощает управление интерфейсом.

Я использовал вкладки https://ant.design/components/tabs/ и Дизайн для внешнего проектирования. Я переместил все основные функции браузера в другой компонент, а на корневой странице создал вкладки.

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

И измените наш API следующим образом:

Что это будет делать, так это то, что он будет нацелен только на конкретный веб-просмотр на основе вкладок, все, что вам нужно сделать, это отправить ссылку на родительский элемент, который мы отправили из вкладок в компонент браузера.

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

Эти ресурсы помогут вам расширить возможности браузера.
- Настройка пользовательского прокси для электронного веб-просмотра 🐱‍🚀
- Настройка многооконного режима React и Electron
- Манипулирование Webview отрендерил dom (скоро появится)
- Создание приложения Electron для обеих платформ и их упаковка. (Скоро)