Встраивание браузера Chromium в Delphi приложения

Для отображения HTML-страниц с документами, справок сделанных в Вики или целых веб-порталов в своём приложении, созданном в Delphi, вам понадобится современный встраиваемый браузер, такой как Chromium. О том, как встроить браузер Chromium в своё приложение, узнаем в этой статье.

Прежде всего, нужно отметить, что для встраивания браузера Chromium мы будем использовать библиотеку CEF4Delphi, которая в свою очередь использует фреймворк Chromium Embedded Framework (CEF), который создан как раз для облегчения встраивания браузера Chromium в другие приложения. Получается вот такой слоёный пирог, см. картинку.

Для экспериментов я использую Delphi 10.3.3 + VCL + x32. Но по утверждению разработчиков, CEF4Delphi был протестирован с Delphi 7, Delphi XE, Delphi 10, Delphi 10.2, Lazarus 2.0.6 с FPC 3.0.4, поддерживаются VCL, FireMonkey (FMX) и Lazarus, возможна сборка 32 и 64 битных приложений.

Итак, сначала давайте скачаем библиотеку CEF4Delphi. Можете скачать архив с исходниками (ссылка есть на странице проекта в секции Links) или клонировать папку с проектом непосредственно со страницы GitHub. Второй вариант будет удобен для последующего обновления CEF4Delphi.

Чтобы установить компоненты CEF4Delphi в Delphi достаточно после скачивания открыть файл проекта CEF4Delphi.dproj, который находится в папке packages, и выполнить Install. После этого в палитре появились компоненты TChromium, TCEFWindowParent, TChromiumWindow, TBufferPanel, TCEFWorkScheduler, TCEFServerComponent, TCEFLinkedWindowParent, TCEFUrlRequestClientComponent и TCEFSentinel.

Теперь посмотрите папку demos. Здесь находятся демонстрационные проекты, которые помогут вам быстро стартовать и попробовать те возможности CEF4Delphi, которые вас интересуют.

Для начала давайте откроем проект TabBrowser.dproj, который находится в папке demos\Delphi_VCL\TabbedBrowser. Как вы могли догадаться – это пример браузера с вкладками, где на каждой вкладке будет встроен браузер Chromium.

Если вы начнёте компилировать проект, то увидите, ошибку [dcc32 Fatal Error] TabBrowser.dpr(51): F2613 Unit 'uCEFApplication' not found. Это значит, что нужно прописать пути к папке source, где находятся исходники CEF4Delphi, в проект TabBrowser или в общие настройки Delphi, чтобы не надо было это делать для всех проектов.

Чтобы прописать пути в общих настройках Delphi, выберите пункт меню «Tools -> Options…», потом в диалоге «Language -> Delphi -> Library». Достаточно прописать путь в поле «Library path».

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

Необходимые бинарные файлы можно скачать по ссылке на странице проекта CEF4Delphi или найти нужный архив с файлами на странице фреймворка CEF. Я скачивал архив «Standard Distribution», но ничего не мешает скачать и «Minimal Distribution».

Версии CEF и браузера Chromium и версии, указанные в CEF4Delphi должны совпадать с теми, что указаны в файле uCEFApplicationCore.pas. У меня это 79.1.31 и 79.0.3945.117:

Т.е. когда в будущем вы захотите обновиться, вам нужно будет скачать новую версию CEF+Chromium и синхронно новую версию CEF4Delphi.

Итак, после скачивания архива, скопируйте из него файлы и папки из папок Resources и Release и положите всё это рядом с исполняемым файлом TabBrowser.exe (исполняемые файлы примеров по умолчанию компилируются в папку bin). Вот так это должно выглядеть:

Как видите, если вы будете в своём приложении использовать встроенный браузер Chromium, то в ваш проект добавится 71 файл и он увеличится на 237 Мб.

После этого TabBrowser запустился и загрузил страницу www.google.com.

Кроме этого примера в папке demos есть ещё много полезных примеров, например, пример SimpleBrowser – поможет понять основы, CookieVisitor – покажет, как работать с печеньками, PostInspectorBrowser – как перехватывать POST-данные форм, MDIBrowser – как сделать MDI-приложение, где в каждом окошке будет браузер Chromium.

И напоследок, хочу вам напомнить: при создании своего проекта не забывайте, что почти первой строчкой после запуска приложения должно быть создание объекта TCefApplication, а при завершении работы приложения – его удаление. Как это делать, смотрите в файле .dpr каждого примера.

Кстати, если вам нужно, чтобы файлы Chromium лежали в определённых местах, то вы можете задать свои пути с помощью свойств FrameworkDirPath, ResourcesDirPath, LocalesDirPath, Cache и UserDataPath объекта TCefApplication, после его создания.

Итог

Как я уже писал выше, если вы будете использовать в своём приложении браузер Chromium, то вам надо быть готовым к тому, что к вашему приложению добавится 71 файл и объём увеличится на 237 Мб. Если это вас не пугает, то вы добавите в свой арсенал мощный современный встроенный браузер.

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