Set up a mac browser application based on cef3

Reading time ~1 minute

The Chromium Embedded Framework (CEF) is a simple framework for embedding Chromium-based browsers in other applications. The cef-project can be used as the starting point for third-party applications built using CEF.



  1. Build project from cef-project.

    cd /path/to/cef-project
    mkdir product && cd product
    cmake -G "Xcode" -DPROJECT_ARCH="x86_64" -DWITH_EXAMPLES=Off  ..
  2. The base example product target is cefclient, let’s rename it.

    • To find the all related files and directories on cefclient.

      find . -type f -name "*cefclient*"
      find . -type d -name "*cefclient*"
    • Find and replace the string with case sensitive to replace cefclient with mybrowser in Sublime

    • Replace the app icon with new icns file, update the new file name in Info.plist file if needed.

  3. Remake it.

    cd product
    cmake .


Let’s Play

  1. Add new source files to project.

    • Create source files with Xcode file templates.
    • Add the relative file path to CMakeLists.txt to existing groups.
    • Remake.
  2. Add image assets to project.

    • Convert the source png files to tiff file firstly.

      tiffutil -cathidpicheck background.png background@2x.png -out background.tiff
    • Move the assets to third_party/cef/cef_binary_xxxx.xxxx/tests/mybrowser/resources/mac/ directory.

    • Add the relative file paths to RESOURCES group.

    • Remake.

    • Same with xib/nib files.

  3. Add custom framework to project, such as Sparkle.

    • Place the framework under the third_party directory, such as /third_party/Sparkle/Sparkle.framework.

    • Edit the macOS configuration in file CMakeLists.txt.

      • Define the Sparkle.framework for later usage.

        SET(SPARKLE_FRAMEWORK "${CMAKE_SOURCE_DIR}/third_party/Sparkle/Sparkle.framework")
      • Link against to the main target.

        target_link_libraries(${CEF_TARGET} ${SPARKLE_FRAMEWORK})

        Since the original target already links to the OpenGL framework with function target_link_libraries, let’s append it after it.

        target_link_libraries(${CEF_TARGET} libcef_lib libcef_dll_wrapper ${CEF_STANDARD_LIBS} "-framework OpenGL" ${SPARKLE_FRAMEWORK})
      • Copy the framework to main app bundle.

        # Copy the Sparkle framework into the Frameworks directory.
        COMMAND ${CMAKE_COMMAND} -E copy_directory
      • Specify the RUNPATH to make the framework loaded.

        set_target_properties(${CEF_TARGET} PROPERTIES INSTALL_RPATH "@executable_path/..;@loader_path/../Frameworks")
    • Remake it!

Updated on Will Han