Usando o componente CEF4Delphi

Chromium é um projeto de código aberto (com contribuições do Google e outras empresas) para criar um navegador que suporte várias plataformas diferentes. Navegadores como Chrome e Edge são baseados nele.

O Chromium Embedded Framework (CEF) é uma estrutura de código aberto para incorporar o Chromium em aplicativos do usuário. Pode ser usado em Linux, macOS e Windows nas versões de 32 e 64 bits. Originalmente havia muitas versões do CEF, mas boa parte deles não são mais mantidos, há apenas duas versões vigentes: CEF4 e fpCEF3, esta última somente compatível com o Lazarus, é uma versão mais simples e prática, porém desatualizada também e em versões mais recentes do Lazarus nem compila, assim, para este artigo iremos usar o CEF4Delphi, que apesar do nome tem suporte para Delphi e também o Lazarus.

Para Lazarus-IDE ou Delphi, o método de instalação é basicamente o mesmo, através de pacotes. Se você já instalou pacotes antes, não terá problemas em fazê-lo, basta baixá-los do repositório oficial. Os passos a seguir serão para Lazarus, mas com pouca adaptação você também o instalará no Delphi.

Instalando-o no Lazarus-IDE

Primeiro vamos instalar o CEF, não se preocupe, são poucos passos.

(1) Vá até a página:

https://github.com/salvadordf/CEF4Delphi

E leia o processo de instalação, se algo der errado, isto é, diferente das instruções que irei passar, provavelmente o projeto foi atualizado e é preciso descobrir o que está faltando.

(2) Via terminal, vá até a pasta onde o seu Lazarus esta instalado, e lá procure pela pasta “components” e dispare o comando git:

cd C:\lazarus\components
git clone https://github.com/salvadordf/CEF4Delphi.git
cd CEF4Delphi

Se você usar ‘git branch -r‘, notará que o projeto não está nomeado e nem há versionamento, ou seja, estará sempre na ‘master’. Isso é apenas um detalhe, vamos prosseguir.

(3) Usando a IDE do Lazarus, vá Pachage|Open Package File(.lpk) e então selecione o(s) arquivo(s):

C:\lazarus\components\CEF4Delphi\packages\cef4delphi_lazarus.lpk

E então com o pacote aberto, clique em Compile e se não houver erros então depois vá em Use|Install:

Eventualmente, a própria IDE sugerirá a inclusão do pacote DCPCrypt, pois ele é requerido não apenas por este pacote, mas muitos outros também. É imperativo aceitar tal inclusão.

Após a instalação, notará a presença de novos componentes na sua IDE:

O processo de instalação está agora completo. Mas como usá-lo? Vamos para o tópico seguinte:

Criando o primeiro projeto:

(1) Crie uma pasta vazia, por exemplo, c:\Projetos-fpc\Demos

(2) Agora copie a pasta “C:\lazarus\components\CEF4Delphi\demos\Lazarus_Wind”ows\SimpleBrowser” para dentro de “c:\Projetos-fpc\Demos”:

(3) Abra este demo chamado “SimpleBrowser”, depois vá em Project|Project Options, depois em Compiler Options|Configs and Target e seja específico na plataforma que irá usar, neste exemplo, usaremos como Target ‘Win32’ o que significa aplicações compiladas para Windows 32bits:

É importante saber isso porque iremos escolher no próximo passo qual runtime do CEF baixar e ela terá de ser compatível com o executável que será gerado.

(4) Ainda em Project|Project Options, vá agora em Compiler Options e notará que este projeto esta assim:

Vamos modificá-lo para ficar assim:

Agora clique em ‘OK’ e nosso projeto está ajustado, vamos agora baixar o runtime apropriado.

Baixando o runtime apropriado

Visite novamente a página do projeto CEF, a saber:

https://github.com/salvadordf/CEF4Delphi

Rolando a tela, verá que você precisa baixar o runtime que são pacotes comprimidos (tarballs) que variam conforme o sistema operacional usado (windows, linux, macos) e arquitetura (32 ou 64bits):

Então baixe o pacote apropriado para a versão que pretende compilar no Lazarus, no nosso exemplo, é Windows 32bits (Win32).

Recomendo que baixe-o na pasta de Downloads e depois descompacte-o ali mesmo.

Em Downloads você terá uma subpasta “cef_binary(…)” um nome de pasta bem grande, mas seu conteúdo inteiro não nos é importante, apenas a subpasta “Release” e “Locales”:

De todos arquivos e subpastas, iremos precisar apenas das duas grifadas na imagem acima.

Vá até a subpasta “Resources”, então selecione todos os arquivos e subpastas que houverem:

Então copie-os para a pasta do nosso SimpleProject.

Agora entre na pasta “Release”, selecione todos os arquivos dentro dela e copie-os para a pasta do SimpleProject:

No final, sua pasta ficará mais ou menos assim:

A partir desse momento, você já tem um runtime viável para seu SimpleProject compilar e rodar, faça o teste e dê um F9:

Como preparar a cama

Muitas vezes, o código do CEF é alienígena para mim, isto acontece porque trata-se dum port para object pascal a partir de bibliotecas externas para Windows, Linux e MacOS, daí então não é um código trivial, assim como você tem que preparar a cama para dormir, neste caso tem inicializar objetos e valores antes de consumir o componente e depois liberá-los, caso contrário será um show de ‘access viollation’. Por isso, se você almeja fazer algo intrigante com o CEF, parta dos exemplos que acompanham ele. Usei como referencia o SimpleProject porque ele é o mais minimalista que existe e que você pode levar para outras aplicações com pouca adaptação.

Neste simples projeto, voce irá notar em SimpleProject.lpi:

program SimpleBrowser;

{$I cef.inc}

uses
  Forms, Interfaces,
  uCEFApplication,
  uSimpleBrowser in 'uSimpleBrowser.pas' {Form1};

{$IFDEF WIN32}
  // CEF3 needs to set the LARGEADDRESSAWARE flag which allows 32-bit processes to use up to 3GB of RAM.
  // If you don't add this flag the rederer process will crash when you try to load large images.
  {$SetPEFlags $20}
{$ENDIF}

begin
  GlobalCEFApp := TCefApplication.Create;

  // In case you want to use custom directories for the CEF3 binaries, cache and user data.
  // If you don't set a cache directory the browser will use in-memory cache.
{
  GlobalCEFApp.FrameworkDirPath     := 'c:\cef';
  GlobalCEFApp.ResourcesDirPath     := 'c:\cef';
  GlobalCEFApp.LocalesDirPath       := 'c:\cef\locales';
  GlobalCEFApp.EnableGPU            := True;      // Enable hardware acceleration
  GlobalCEFApp.cache                := 'c:\cef\cache';
  GlobalCEFApp.UserDataPath         := 'c:\cef\User Data';
}

  // You *MUST* call GlobalCEFApp.StartMainProcess in a if..then clause
  // with the Application initialization inside the begin..end.
  // Read this https://www.briskbard.com/index.php?lang=en&pageid=cef
  if GlobalCEFApp.StartMainProcess then
    begin
      Application.Initialize;
      Application.CreateForm(TForm1, Form1);
      Application.Run;
    end;           

  GlobalCEFApp.Free;
  GlobalCEFApp := nil;
end.

Alguns parâmetros ali são muito interessantes de serem modificados, por exemplo:

GlobalCEFApp.LocalesDirPath := 'c:\cef\locales';

que tal remover o comentário e definir uma pasta para ‘locales’ como:

GlobalCEFApp.LocalesDirPath := UTF8Decode(GetCurrentDir + PathDelim + 'locales');

Assim podemos definir um local mais conveniente para nossas aplicações.

E agora?

Use os exemplos, eles contém um universo de aplicações diferentes com estes componentes, os exemplos estão em:

components/cef4Delphi/demos/

    Estude-os, quase tudo que você pensou em fazer usando um navegador, outro já o fez e colocou o exemplo ali.

    Referencias externas:

    https://www.briskbard.com/index.php?lang=en&pageid=cef

    Conclusion

    É um excelente componente, mas seu uso não é para amadores. A transição do TWebbrowser(Delphi) para ele é enorme, mas em compensação é um navegador completo, repleto de recursos. Ótimo para navegar e também criar bots.