🌐 Trang WebUI dựa trên Chromium trong iBrowe

Các trang WebUI trong iBrowe (dựa trên Chromium) sử dụng cùng một hệ thống lõi để định tuyến, biên dịch và tối ưu hóa các mô-đun HTML/JS. Các mô-đun này có thể được tham chiếu theo đường dẫn tương đối (ví dụ: ../my_module.html) hoặc tuyệt đối thông qua URL nội bộ (ví dụ: ibrowe://settings/my_module.html).

Trong quá trình biên dịch, tài nguyên cần phải truy cập được cả qua HTTP lẫn hệ thống tệp. Mỗi URL dạng ibrowe:// sẽ được ánh xạ tới đường dẫn tệp tương ứng bằng tác vụ optimize_web_ui trong hệ thống build GN.

🧱 Các bước build tiêu chuẩn cho WebUI dựa trên Chromium

Đối với hầu hết các WebUI tiêu chuẩn (như ibrowe://settings), pipeline GN bao gồm các bước sau:

  • Closure Compiler – Kiểm tra kiểu dữ liệu cho các mô-đun JavaScript
  • Grit Tool – Đóng gói tài nguyên vào tệp .pak thông qua manifest .grd
  • Unpacking – Giải nén nội dung từ .pak vào thư mục tạm
  • optimize_web_ui – Làm phẳng (flatten) và rút gọn (minify) các mô-đun thành một tệp duy nhất
  • Repacking – Tạo lại tệp .pak cuối cùng đã được tối ưu hóa bằng công cụ Grit

🔁 Cơ chế ánh xạ URL sang đường dẫn hệ thống tệp

Để ánh xạ các URL như ibrowe://resources/..., script optimize_web_ui.py sử dụng bảng ánh xạ mặc định:

_URL_MAPPINGS = [
    ('chrome://resources/cr_components/', _CR_COMPONENTS_PATH),
    ('chrome://resources/cr_elements/', _CR_ELEMENTS_PATH),
    ('chrome://resources/css/', _CSS_RESOURCES_PATH),
    ('chrome://resources/html/', _HTML_RESOURCES_PATH),
    ('chrome://resources/js/', _JS_RESOURCES_PATH),
    ('chrome://resources/polymer/v1_0/', _POLYMER_PATH),
    ('chrome://brave-resources/', _BR_RESOURCES_PATH)  # được chuyển thành ibrowe-resources trong iBrowe
]

Với các đường dẫn không thuộc hệ lõi, như ibrowe://history, ánh xạ được định nghĩa trực tiếp trong cấu hình GN:

optimize_webui("build") {
  host = "history"
  input = rebase_path(".", root_build_dir)
  ...
}

Cấu hình này hướng dẫn hệ thống build ánh xạ ibrowe://history/xyz.html đến thư mục tương ứng trên hệ thống tệp.

🧪 Bản dựng Gỡ lỗi (Debug) vs Bản dựng Phát hành (Release)

🔧 Bản dựng Gỡ lỗi

  • Phục vụ các tệp riêng lẻ trực tiếp (ví dụ: ibrowe://settings/module1.js)
  • Không thực hiện rút gọn hay gom tệp
  • Hữu ích cho việc debug quá trình nạp mô-đun ở dạng nguyên thủy

🚀 Bản dựng Phát hành

  • Các WebUI được tối ưu hóa qua optimize_web_ui
  • Cung cấp các gói đã được làm phẳng và rút gọn
  • Cần thử nghiệm bổ sung để đảm bảo tương thích ở cả hai chế độ

🐾 Các WebUI riêng của iBrowe

Đối với các WebUI được xây dựng riêng cho iBrowe (không kế thừa từ Chromium), quá trình không sử dụng optimize_web_ui. Thay vào đó, chúng sử dụng Webpack, cung cấp các tính năng:

  • Hỗ trợ TypeScript và JavaScript
  • Tự động phân giải mô-đun và loại bỏ mô-đun không sử dụng (tree-shaking)
  • Tách hoặc gom nhóm mã nguồn (code splitting / bundling)
  • Rút gọn mã (minification)
  • Sinh động tệp .grd từ các lệnh import

📚 Tham khảo thêm:

Chuyển thể và tái cấu trúc từ tài liệu Brave về Chromium WebUI: https://github.com/brave/brave-browser/wiki Mọi tham chiếu tới chrome:// và brave:// đều đã được chuyển sang ibrowe:// trong ngữ cảnh này.