Рейтинг@Mail.ru

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

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

Рейтинг:  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

Комментарии   

zhorzh
0 #11 zhorzh 25.05.2020 14:14
Цитирую Alex:
Это потому, что IE встроен в ОС. А кэш и в IE тоже есть :)

так кэш в 300мб и не входит.
вообще, есть стандартный вариант - OLE, IE именно через него и работает, но в гугле решили, что они самые умные. И черт бы с ними, но их браузер стал самым массовым.
А через OLE переносимость программ была бы очень простая - в большинстве случаев поменял название компонента и всё...
Цитировать
Alex
0 #12 Alex 25.05.2020 14:59
Цитирую zhorzh:
так кэш в 300мб и не входит.
вообще, есть стандартный вариант - OLE, IE именно через него и работает, но в гугле решили, что они самые умные. И черт бы с ними, но их браузер стал самым массовым.

Сначала самым массовым был IE, но всё меняется. Нет ни одного вечного браузера.
Цитирую zhorzh:
А через OLE переносимость программ была бы очень простая - в большинстве случаев поменял название компонента и всё...

Chromium работает не только на Windows, поэтому OLE - не подходит. К тому же для работы через OLE нужно регистрировать объекты в ОС Windows. А здесь кинул в папку нужные файлы и всё работает.
Цитировать
Habibulin
0 #13 Habibulin 01.06.2020 08:31
Да не работает эта ерунда
Ваще не работает
Цитировать
Alex
+1 #14 Alex 21.06.2020 23:38
Цитирую Habibulin:
Да не работает эта ерунда
Ваще не работает

Очень даже работает. Пробуйте на примерах.
Цитировать
Fil
0 #15 Fil 22.08.2020 21:23
Спасибо за полезную информацию. Раньше CEF3 использовал, а здесь не могу разобраться. Подскажите плз, как в нем текст страницы получить ?
Цитировать
vitaly
+1 #16 vitaly 22.08.2020 22:13
Цитирую Fil:
Спасибо за полезную информацию. Раньше CEF3 использовал, а здесь не могу разобраться. Подскажите плз, как в нем текст страницы получить ?

procedure TMainForm.Chromium_OnLoadEndAutor(Sender: TObject;
const browser: ICefBrowser; const frame: ICefFrame; httpStatusCode: Integer);
begin
if (frame nil) and frame.IsMain then
begin
frame.GetSourceProc(callback);
end;
end;

procedure TMainForm.callback(const str: ustring);
begin
Memo1.lines.add(str);
end;
Цитировать
Alex
+1 #17 Alex 22.08.2020 22:21
Цитирую Fil:
Спасибо за полезную информацию. Раньше CEF3 использовал, а здесь не могу разобраться. Подскажите плз, как в нем текст страницы получить ?

Смотрите ICefFrame.GetSource.
Цитировать

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