Рейтинг@Mail.ru

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

Автор: Alex. Опубликовано в Программирование . просмотров: 33938

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

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

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

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

Обёртки CEF4Delphi и 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.

Компоненты TChromium

Теперь посмотрите папку 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».

Подключаем пути к библиотеке CEF4Delphi

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

Диалог с сообщением, что не хватает бинарных файлов CEF

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

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

как определить версию CEF для библиотеки CEF4Delphi

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

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

Бинарные файлы фреймворка CEF

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

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

Простой браузер с закладками на основе Chromium

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

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

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

Итог

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

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

Tags: Chromium CEF4Delphi CEF Учебники по программированию Delphi

Комментарии   

Alex
0 #21 Alex 12.01.2021 10:07
Цитирую ahmet:
Подскажите как подключить flash к этому браузеру. Выходит серое пятно и всё

Сначала надо установить Flash, см. knowledge.kofax.com/.../...)

Если это не поможет, попробуйте так:

Chromium.RunAllFlashInAllowMode := True;
Цитировать
Alex
0 #22 Alex 12.01.2021 10:12
Цитирую Сергей С:
Не работает это в новом хроме, говорит
[Error] Unit1.pas(103): Undeclared identifier: 'ICefBrowser'
[Error] Unit1.pas(103): Undeclared identifier: 'ICefFrame'
Может как-то по другому называются библиотеки ? Или что-то подключить в юзес нужно?

Нужно подключить юнит uCEFInterfaces.
Цитировать
Андрей11111
0 #23 Андрей11111 18.01.2021 05:46
Спасибо! вечная беда с установкой этого хрониума и его дллек
Цитировать
Lexx77
0 #24 Lexx77 09.04.2021 15:15
Подскажите а есть компоненты под RAD Studio10? c++
Цитировать
Alex
-1 #25 Alex 11.04.2021 09:56
Цитирую Lexx77:
Подскажите а есть компоненты под RAD Studio10? c++

Под C++ по идее можно использовать компоненты, написанные на Delphi.

Да, только что проверил. При компиляции компонентов из-под Delphi создаются файлы .hpp и компоненты можно использовать из-под C++ Builder.
Цитировать
Alexey_Ya
-1 #26 Alexey_Ya 20.06.2021 11:17
Подскажите, есть возможность заменять значения в тегах на лету? Страница содержит ряд юзер-тегов, надо их определить и подменить значения в них.
Цитировать
gloros
0 #27 gloros 26.01.2022 13:36
И будьте готовы к тому, что у вас будет в памяти висеть 3 копии вашего приложения после подключения Chromium
Цитировать
Джон
0 #28 Джон 31.01.2022 23:39
Подскажи, а каким образом сделать открытие окна в новой вкладке?
Цитировать
Alex
0 #29 Alex 13.03.2022 12:41
Цитирую Джон:
Подскажи, а каким образом сделать открытие окна в новой вкладке?

Посмотрите в папке demos проект TabbedBrowser.
Цитировать

Добавить комментарий