Hacking Chromium on OpenHarmony

janihau
41 阅读4分钟

cover.jpeg

This article is written in English.

Originally posted on Medium

Chromium is the web engine on OpenHarmony, powering the platform’s web capabilities. It is integrated deeply throughout the system, from low-level platform components up to the application UI framework, giving it first-class support and good performance on OpenHarmony.

Chromium on OpenHarmony is wrapped by NWeb, CEF, the Platform Adapter, and various extension interfaces. These layers isolate system-wide Web APIs from the Chromium kernel, and they also isolate platform integration details from the underlying operating system. This design allows different versions of Chromium to run on the same system and enables independent upgrades of the Chromium engine. The Platform Adapter also makes it possible to run and upgrade different versions of OpenHarmony without requiring changes to the Chromium kernel.

NWeb and the Chromium engine receive special handling from the system in areas such as application lifecycle, memory management, and resource management. Chromium also benefits from optimizations like preloading during system startup.

How Chromium Is Integrated Into the OpenHarmony Platform

OHOS chromium.png

ArkTS WebView

  • ArkTS (a superset of TypeScript) implementation of WebView
  • High-level declarative web component for the ArkUI framework
  • Allows embedding web content directly into ArkTS applications

ArkUI WebComponent and WebView

  • Native C++ implementation of the Web component and WebviewController
  • Provides declarative and imperative APIs for controlling web content
  • Bridges ArkTS or JS calls to the native layer

NWeb

  • Native web engine abstraction layer
  • Bridges system WebView APIs to CEF or Chromium internals
  • Maps callbacks between the engine and ArkWeb

CEF (Chromium Embedded Framework)

  • A framework that allows applications to embed a Chromium-based web browser engine inside native applications
  • Provides a simplified C++ API on top of Chromium

CEF Extension Layer ( cef_ext )

  • Extends standard CEF with richer APIs for security, privacy, networking, storage, UI, and rendering
  • Maintains CEF compatibility while adding platform-specific features

Chromium Engine

  • The actual web rendering engine
  • Handles HTML parsing, CSS styling, JavaScript execution, GPU rendering, and more
  • Integrated with OpenHarmony through the Platform Adapter

Chromium Extension Layer (chromium_ext)

  • Enhances Chromium libraries, components, media, and networking with OpenHarmony-specific capabilities

Platform Adapter

  • Wraps OpenHarmony NDK and services to integrate graphics, networking, sensors, and media with Chromium
  • Connects Chromium with the underlying OpenHarmony system

In short, NWeb is the interface between the ArkUI framework and Chromium, and the Platform Adapter connects Chromium with OpenHarmony-based platforms.

Chromium is built as two shared libraries:

  • libarkweb_engine.so
  • libarkweb_render.so

Depending on platform configuration, Chromium may use multiple renderer processes or a shared renderer process. Renderer processes are launched through the AppSpawn service. AppSpawn forks a new process and loads libarkweb_render.so inside it.

Here is a diagram that shows how Chromium uses the Platform Adapter to launch the renderer process:

Launch_renderer_process.png

WebView Architecture on OpenHarmony

Applications that need to render web content, either as a browser or as an embedded view, use the WebView component. WebView consists of several layers with Chromium at the core.

webview.png

The WebView component is built from ArkTS, ArkWeb, and native layers.
The ArkTS layer provides declarative APIs, while the native layer implements ArkWeb components that communicate with NWeb.

ArkTS Web

  • Declarative API for embedding web content in ArkUI applications
  • Properties for URL, HTML content, settings, and configuration
  • Events for load start, load finish, errors, and more

ArkTS WebviewController

  • Imperative API for controlling the WebView component
  • Provides navigation methods, JavaScript execution, and state control

WebComponent / WebView (Native)

  • ArkUI native components
  • Manage the render tree
  • Handle event distribution
  • Integrate with the system compositor
  • Bridge ArkTS or JS to native C++
  • Integrate with NWeb

Native Bindings in OpenHarmony

OpenHarmony offers several native binding mechanisms.

N-API (Node-API)

The officially supported method for third-party developers.A C-based API used for native add-ons.

CJ (Cangjie Interface) and ANI (Ark Native Interface?)

Other native binding mechanisms used inside the system. Not intended for external use.

Setting Up a Development Environment for Chromium on OpenHarmony

Building Chromium is a large task because of the size and complexity of the project. To make things easier, I created a Docker environment called openharmony-dev-sdk, which includes all required tools and dependencies.

Github: openharmony-dev-sdk

Create the Development Environment

mkdir chromium && cd chromium
git clone https://github.com/KodeGood/openharmony-dev-sdk.git
openharmony-dev-sdk/openharmony-dev-create
openharmony-dev-sdk/openharmony-dev-enter

Fetch Chromium Source Code

I am using OpenHarmony 6.0 64-bit as the target platform.

repo init -u https://gitcode.com/openharmony-tpc/manifest -b 132_trunk_6.0-Release -m developer.xml --no-repo-verify
repo sync -c
repo forall -c 'git lfs pull'

Download Prebuilt Toolchains and SDK

./prebuilts_download.sh

Building Chromium for OpenHarmony

Chromium can be built using the build_arkweb.sh script. My target device is HiHope HH-SCDAYU200 development board.

Build Native Libraries

./build_arkweb.sh -t n rk3568_64

Output is created under:

src/out/rk3568_64/

Copying Built Libraries to an OpenHarmony Device

Run these commands outside the Docker container.

Method 1: Using HDC (for development boards or rooted devices)

export PATH=$PATH:$PWD/src/ohos_sdk/18/toolchains
hdc shell mount -o remount,rw /
hdc file send src/out/rk3568_64/arkweb/libarkweb_engine.so /data/app/el1/bundle/public/com.ohos.arkwebcore/libs/arm64/
hdc file send src/out/rk3568_64/arkweb/libarkweb_render.so /data/app/el1/bundle/public/com.ohos.arkwebcore/libs/arm64/
hdc shell sync
hdc shell reboot

Your WebView application will now use your custom Chromium build.

Method 2: Using WebPlayGround

WebPlayGround allows embedding custom Chromium libraries inside your application. You can deploy a custom Chromium build without replacing system libraries. This supports only single-process rendering mode.

Build WebPlayGround Artifacts

./build_arkweb.sh -t w -A rk3568_64
./sign.sh rk3568_64

This creates:

src/out/rk3568_64/arkweb/NWeb-rk3568_64.hap

Steps to Integrate

  1. Extract NWeb-rk3568_64.hap (it is a ZIP archive)
  2. Move the libs directory into your app’s entry directory
  3. Repackage the remaining files as NWeb.hap
  4. Create entry/src/main/resource/resfile/
  5. Place NWeb.hap inside the resfile directory
  6. Enable Developer Mode on the device
  7. Ensure your app uses a debug signing certificate (appProvisionType: debug)
  8. Add this to app.json5:
"appEnvironments": [
  { "name": "enableArkWebPlayGround", "value": "true" }
]
  1. Build and install your application

I created a repository demonstrating this workflow:

Github: openharmony-webview-playground

It includes import_nweb_hap.sh, which automates most of the steps.

Debugging Chromium on OpenHarmony

I often rely on simple logging. For example:

LOG(INFO) << "SOMEIDENTIFIER: My debug string";

Then:

hdc hilog -L I -T chromium | grep "SOMEIDENTIFIER"

hilog.png

DevTools Debugging

Chrome DevTools can be used to debug frontend code inside Web components.

Documentation: Debugging Frontend Pages by Using DevTools

Debugging Chromium Crashes

Chromium may crash from time to time. You can debug crashes using FaultLogger.

FaultLogger is a system service that collects crash logs when an application or system service faults.

Logs are stored under:

/data/log/faultlog/faultlogger/

In my WebView Playground project, the following scripts help collect and symbolize logs using llvm-symbolizer and llvm-addr2line tools:

  • recv-webview-playground-faultlog.sh
  • symbolize_faultlog.sh

faultlogger.png

There are many other useful techniques for debugging and understanding Chromium on OpenHarmony, such as tracing, profiling, and performance analysis. Chromium also provides Crashpad for capturing Chromium crash dumps. Covering all of these would make this post too long, so I will leave them for another time.

That’s It for Now

Happy hacking Chromium on OpenHarmony!

Image Credits:
Cover image includes Chromium Old Logo.svg by The Chromium Authors, licensed under CC BY 2.5, via Wikimedia Commons.

avatar
文章
阅读
粉丝