Создание браузера на c
Chromium Embedded Framework (CEF) — это проект с открытыми исходными кодами, созданный в 2008 году как элемент управления Web browser, работающий на базе Chromium от Google.
На данный момент это довольно мощный инструмент для разработки настольных приложений, со списком решений, использующих этот контрол можно ознакомиться здесь. Но достаточно сказать, что его используют такие широко известные продукты, как Evernote и Steam.
- CEF позволяет создать свои обработчики протоколов, таким образом, реализовать свой «закрытый» алгоритм шифрования (да-
да, несчастные пользователи старого Internet Explorer и корпоративных web-решений, долой ActiveX). Этим же можно воспользоваться, чтобы подгружать данные из статических ресурсов программы - CEF позволяет делать обертку над нативными функциями в пространстве объектов виртуальной машины Javascript. Ресурсоемкие операции по обработке больших массивов данных можно переложить на более строгие и быстрые языки программирования
- CEF позволяет обрабатывать события навигации, скачивания файлов и так далее
А теперь о грустном
Знакомьтесь, CefSharp
- Создание неограниченного числа компонентов класса WebView
- Обработка событий по загрузке страницы, события навигации
- Собственные обработчики протоколов.
- Внедрение js-кода во время выполнения страницы
- Создание глобальных [native code] объектов со статическими методами
Первое знакомство
Три главные вещи, которые нужны для работы — это локальный обработчик протокола, глобальный объект и тот объект, который будет у нас управлять фреймворком.
Локальный обработчик протокола
Реализуется пара классов: фабрика (реализует интерфейс CefSharp.ISchemeHandlerFactory) и, собственно, сам обработчик (реализующий интерфейс CefSharp.ISchemeHandler).
С первым все понятно:
Второй не будет сложнее:
Для того, чтобы подключить js-файл приложения, можно воспользоваться методом GetStream или GetString класса ResourceManager. Из плюсов — исходный код вашего приложения будет находиться внутри .exe или .dll файла. Из минусов — при изменении js-кода придется каждый раз заново компилировать приложение.
С ним еще проще — это обычный объект, содержащий методы и поля. Один минус — на весь проект у Вас будет по одному экземпляру каждого такого класса.
Инициализация CEF
Я решил сделать класс наследником ApplicationContext. Для оконного отображения WinForms запускается быстрее, и нет необходимости тянуть за собой WPF
На этом, собственно и все. Можно создавать форму, добавлять в нее компонент WebView и работать как душе угодно.
Если Вы дочитали до этого места, то Вы — терпеливый человек и я благодарен Вам.
Но нам этого мало
Как я уже отмечал ранее, в CefSharp есть некоторые недостатки. Например, нельзя связать компонент WebView с формой, его содержащую. Для этого родился некоторого рода жестокий костыль, который я представлю на обозрение публики.
Дабы не захламлять статью лоскутами кода, я приведу некоторые выдержки из листинга.
1 Новый класс Window, наследуемый от Form
2 Объект-мост общих вызовов
Внимательный читатель заметит неладное: вместо нормальных объектов CefSharp позволяет обмениваться только простыми типами, такими как int, double, bool, string. Но в реальной жизни обычно, как раз, наоборот. Поэтому данный костыль использует упаковку/распаковку данных в JSON. Решение неидеальное, затрачивается множество времени зря, но таковы данные ограничения библиотеки.
Поскольку DataContractJsonSerializer работает только с определенными типами, его использовать проблематично. Поэтому в проекте был использован 100% managed парсер. Тоже костыль.
Мне очень захотелось написать свой браузер, со своими фишками и т.п. Так вот, пробовал использовать стандартный компонент WForms, но он использует ядро IE, так еще и устаревшнее.
Попробовал использовать CefSharp, который работает с Chromium, но кушает больше оперативки, чем хотелось бы.
Так вот, мне бы хотелось узнать как написать свое ядро, если вы знаете книги посвященные эти темы, какие-то примеры, статьи или уроки - буду вам чрезвычайно благодарен.
Оценить 2 комментария
Написать браузер - это огромный труд. Скачайте исходники браузера Chromium и посмотрите сколько там строк кода. Даже если каждую секунду писать по одной строке кода, то на такое количество строк удет как минимум пара лет. А еще же надо все отладить, написать тесты. Это не подъемная работа для одного человека.
+1, исходники хотя бы того же Firefox 53.0.3 просто поражают количеством кода: 157097 файлов, 13221 директорий, всё вместе это весит 1.02гб или 1.25 на NTFS при размере кластера в 4кб. OCZ Vertex460 и i5-4590 распаковали этот архив чуть меньше чем за 10 минут. Поиск по любому (даже уникальному) слову в саблайме занимает столько времени, что можно пойти сделать себе тазик чая и почти допить его, а tree view можно смотреть как многосерийную мелодраму.
Народ, вы чего? Автор не говорил, что будет его кодить. Имхо, ему интересно как это делается. Я верно понял?
Чтобы сделать ядро для браузера надо идти от самого нуля:
* Анализатор html/css, рендер графики.
* Интерпретатор как минимум javascript
В итоге - свой браузер, это еще сложнее чем свой интерпретатор языка программирования. да. Поэтому если решились сделать свой браузер с нуля - лучше сделайте язык программирования :)))))))
В определенный момент мне стало некомфортно использовать стандартный контрол WebBrowser, предлагаемый Visual Studio.
Причин было несколько:
1. Использовался IE-движок, что само по себе уже сильный аргумент.
2. Кривая работа с JS.
3. Отсутствие масштабирования.
4. Если запустить на машине, где стоит IE6, то все его «достоинства» переносятся на приложение.
В итоге был начат поиск альтернативных решений.
Было рассмотрено 2 SDK. xulrunner(Mozilla) и Awesomium(Chrome)
Подключение обоих происходит примерно одинаково, но на всякий случай опишу оба.
По данной ссылке заходим в папку с выбранной версией, далее sdk/xulrunner-X.X.en-US.win32.sdk.zip
шаг 2
Скачиваем и распаковываем содержимое. Нас интересует из архива только папочка bin. Копируем ее в папку с приложением и переименовываем в xulrunner. Имя можно и другое, но чтобы не было различий с моим описанием, лучше имя сделать такое.
шаг 4
В нашем приложении добавляем в References Skybound.Gecko.dll из скачанного архива
шаг 5
Правим класс Program:
Инициализируем контрол браузера:
По данному коду родительской панелью будет panel1
шаг 6
Чтобы выполнить программно какой-либо JavaScript пришлось идти на ухищрения, т.к. то ли функции, которые для этого по идее предназначены не дописаны в этой версии, то ли что-то еще. Но выход я нашел только такой:
Минусом является то, что нельзя получить результат обработки, только в виде alert();
Данная проблема также стала причиной того, что я начал искать замену и пришел к Awesomium
шаг 2
Подключаем к проекту библиотеки
Awesomium.Core.dll
Awesomium.Windows.Forms.dll
шаг 3
В Toolbox кликаем правой кнопкой и выбираем Choose Items. Далее жмем browse и подключаем Awesomium.Windows.Forms.dll, после этого у нас появится новые контролы WebControl, AddressBox и т.д. Нам в первую очередь важен WebControl
шаг 4
Размещаем контрол в дизайне
шаг 5
Примеры использования различных функций.
500 — это таймаут.
Вызов JS функции
al — это имя функции
второй параметр передает значения в фунцию. В данном случае он пустой.
Приведенные примеры работают на Awesomium 1.6.5, в версии 1.7 немного изменена архитектура и некоторые методы могут отсутствовать или вызываться по другому.
Выводы
На текущий момент во всех проектах, где нужен браузер, использую Awesomium: он и работает стабильнее и функционал побогаче. Нагрузка от него небольшая. Единственный минус — это то, что не отрабатывает клик правой кнопкой по флешу, потому нельзя поменять необходимые параметры(возможно я просто не разобрался как). В остальном данная SDK меня во всем устроила.
Чтобы создать сегодня свой сайт, совсем необязательно знать языки программирования, большинство веб-ресурсов не пишется, а собирается в различных программах-конструкторах, получивших в последнее время широкое распространение. Конструкторы эти становятся настолько совершенными, что создавать в них можно даже собственные десктопные приложения. Пример работы в одном из таких конструкторов мы сегодня рассмотрим, создав в нём с нуля свой браузер.
Естественно, браузер будет обладать минимальным набором функций, но ведь мы и не претендуем на звание профессиональных разработчиков. В качестве конструктора мы будем использовать Visual Studio Community 2019 — бесплатную интегрированную среду разработки для написания и запуска кода на разных платформах. Название может показаться пугающим, в действительности ничего такого архисложного нет, код писать почти не придется, вместо него мы будем собирать его готовые блоки, представленные графическими элементами.
Выбираем установку Visual Studio Community 2019.
Процедура займет определенное время, поскольку потребуется скачать более гигабайта данных.
По завершении установки и запуска платформы.
Выбираем в меню «Создание проекта».
Жмем «Далее», даем будущему браузеру имя и нажимаем «Создать».
Через несколько секунд перед нами предстает пустая форма, в ней будем размещать элементы управления веб-обозревателем. Вызываем нажатием на узкую полоску слева панель инструментов, раскрываем пункт «Все формы Windows Form» и выбираем двойным кликом «WebBrowser».
Справа располагаются другие две панели, верхняя содержит список файлов проекта, нижняя — свойства пока еще пустого окна. Здесь можно изменять параметры выбранного элемента — устанавливать размеры окна, его прозрачность, фон, включать и отключать полосы прокрутки и так далее. Если это будет не окно, а другой элемент, скажем, кнопка, то и параметры будут другие.
Рабочее окно уже есть, теперь следует позаботиться об элементах управления. Создадим область для панели инструментов обозревателя. Кликаем по маленькой иконке-треугольнику около кнопки закрытия окна и жмем «Открепить в родительском контейнере».
А затем растягиваем появившуюся пунктирную линию в окне будущего браузера, формируя таким образом панель управления.
Желающие также могут создать текстовое поле для ввода текстовых данных (TextBox) и кнопки перехода, но мы ограничимся четырьмя элементами. Разместив их на форме должным образом, кликаем по каждому из них и настраиваем их параметры — даем им соответствующие наименования, меняем, если нужно, цвет и так далее. Теперь настала пора самого главного — назначения управляющим элементам действий. Для этого дважды кликаем по каждой из кнопок и прописываем в месте, где установился курсор следующий код:
Сохраняем результат через меню «Файл» -> «Сохранить всё» и запускаем компиляцию приложения нажатием кнопки «Пуск» на панели управления средой разработки (исполняемый файл находится в папке проекта) .
Через несколько секунд собственноручно сконструированный браузер запустится.
Если элементы на форме окажутся не там, где предполагалось, исправляем, перемещая их в визуальном редакторе.
Конечно, это будет очень простой браузер без закладок, поддержки тем и расширений, да и корректность отображения сайтов в нём в не гарантируется, зато вы можете быть уверены в его «чистоте».
Размер созданного браузера у нас составил всего 9,5 килобайт, но этого вполне хватило, чтобы вместить в него базовый функционал, обеспечивающий не только веб-серфинг, но и скачивание файлов, а также просмотр мультимедийного контента в потоковом режиме.
1.Далее из ToolBox-а выбираем и перетаскиваем на форму элемент управления WebBrouser.
Если у вас WebBrouser занял как у меня всё место на форме то жмём на треугольничке в правом верхнем углу левой кнопкой мыши -> Unlock in Parent Container,получили форму вида.
Если же пред вами веб браузер предстал в таком виде как на скрине ниже,то ничего не делайте.
3.Поместим её вверхней части экрана.Далее кликаем правой кнопкой мыши на текстбоксе и вызываем свойства(properties) находим свойство Dock и устанавливаем его значение в Top.
4.Далее вспоминаем как мы делали шаг №1,и кликаем на треугольничке на элементе управления веббраузер(WebBrouser) и жмём Dock in Parent Container.
Теперь наша форма приняла вид:
По умолчанию Visual Studio дало текстбоксу и веббраузеру имена textBox1 webBrouser1,хорошим стилем программирования считается менять такие имена на более понятные,то есть имя textBox1 не несёт в себе никакого смысла,вот если я изменю это имя на textBoxUrl,то любой человек догадается что этот текстбокс предназначен для введения веб адреса.Также свойство Text элемента управления textBoxUrl я изменил с значения пустой строки на фразу Enter web adress,для того чтобы даже самый несмышлённый пользователь понял что в это поле нужно ввести название веб адреса.
Имя webBrouser1 я поменял на webBrouser,как по мне поскольку у нас будет использоваться только один элемент управления то индекс 1 можно и убрать.
Скрины приведены ниже:
Пока что наш браузер будет выполнять только одну функцию: после того как пользователь ввёл веб адрес и нажал на клавишу "Enter" браузер загрузит выбранную пользователем страницу.
5.Заходим в свойства текстбокса и переключаемся в роздел Events(события)
Читайте также:
- 1с преобразовать объектxdto в xml
- Как установить кисти в фотошоп
- Обнаруженное при отладке программы нарушение формы языковой конструкции приводит к сообщению о б ошибке
- Для графического объекта в приведенном фрагменте документа ms word выбрано обтекание текстом
- Как найти источник выпадающего списка в excel