Set up a mac browser application based on cef3

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!

About the software

Just think, image…

I am not good at web skills, all the html, css, javascript stuffs related are escaped during my work, but it doesn’t suppress my love for Internet browser, chrome especially. I built a lot of client-server based applications including native iOS clients, most of them have a hard user-experience, it’s more stable but difficult to upgrade. The browser-server based applications are more flexible and easy to cross all the platforms.

Recently, I prefer to build command line application via Python. Just input, compute, output. There are not interface logic and output data format. It comes from the Bill Gates’s age, the main input interface is the generic keyboard, the hardware system has only several kilobytes’ RAM. With the computers have a variety of input devices nowadays, the RAM size increases to giga level.

The personal computer has comes to its noontide, there won’t be so much input interface kinds to born. All the existing input interfaces will be used for data management specialists. No keyboard is needed for final client users in the end! Without replacement!

At that time, all the applications will have a big transition. The vendors have enough data on our life, they will have to tell us what we need, or die soon. I am not talking cloud computer, but user experience actually.

So, what’s the software? It’s hardware before, tool-likes now, interface future.