Simple CEF Boilerplate

From GTA Network Wiki
Jump to: navigation, search

Simple CEF Boilerplate


as I've been noticing a lot of interest and confusion regarding CEFs, I will explain them a little bit here. First of all, here's a little helper class, that makes it easy to implement CEFs.

class CefHelper {
  constructor (resourcePath) {
    this.path = resourcePath = false

  show () {
    if ( === false) { = true

      var resolution = API.GetScreenResolution()

      this.browser = API.CreateCefBrowser(resolution.Width, resolution.Height, true)
      API.SetCefBrowserPosition(this.browser, 0, 0)
      API.LoadPageCefBrowser(this.browser, this.path)

  destroy () { = false

  eval (string) {

Now, somewhere in the same file, define a new CefHelper object, using following syntax. You can now show the CEF simply by calling the show() function on the object and destroy it with destroy()!

var cef = null;

API.OnResourceStart.connect(function() {
  cef = new CefHelper('clientside/resources/boilerplate.html');;

API.OnResourceStop.connect(function() {

That's about it from the JavaScriptside of things - now let's head over to the HTML and CSS files.

  • clientside/resources/boilerplate.html
<!doctype html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="main.css">
        <!-- Add your site or application content here -->
        <p>Hello world! This is HTML5 Boilerplate.</p>
  • clientside/resources/main.css
body {
    min-height: 100vh; /* edit or delete line to remove scrollbar */
    margin: 0;
    padding: 0;
  • meta.xml
    <!-- Boilerplate-->        
        <file src="clientside/resources/main.css" />    
        <file src="clientside/resources/boilerplate.html" />

    <!-- Main -->
        <script src="clientside/main.js" type="client" lang="javascript" />