参考谷歌浏览器设置页面下载为例：

1、前端js  lazy_load.js 
需要在chrome\browser\resources\settings\BUILD.gn里面加进来
 
 if (optimize_webui) {
  build_manifest = "build_manifest.json"

  optimize_webui("build") {
    host = "settings"
    input = rebase_path("$target_gen_dir/tsc", root_build_dir)
    js_module_in_files = [
      "settings.js",
      "lazy_load.js", #追加自己的js即可
    ]
    js_out_files = [
      "settings.rollup.js",
      "lazy_load.rollup.js",
      "shared.rollup.js",
    ]
    out_manifest = "$target_gen_dir/$build_manifest"

    deps = [
      ":build_ts",
      "//ui/webui/resources:preprocess",
    ]

    if (!is_chromeos_ash) {
      deps += [ "//ui/webui/resources/cr_components/customize_themes:build_ts" ]
    }

    if (use_nss_certs) {
      deps +=
          [ "//ui/webui/resources/cr_components/certificate_manager:build_ts" ]
    }

    excludes = [
      "chrome://resources/js/cr.m.js",
      "chrome://resources/mojo/mojo/public/js/bindings.js",
      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js",
    ]
  }
}
 if (optimize_webui) {
    deps = [
      ":build",
      "privacy_sandbox:build_grdp",
    ]
    manifest_files = [ "$target_gen_dir/$build_manifest" ]
    resource_path_rewrites = [
      "settings.rollup.js|settings.js",
      "lazy_load.rollup.js|lazy_load.js",
    ]
    grdp_files = [ "$target_gen_dir/privacy_sandbox/resources.grdp" ]
  } else {
    deps = [ ":build_ts" ]
    manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
  }

 
方法:
  selectDownloadLocation() {
        chrome.send("selectDownloadLocation")
  }

================================================================

2、chrome\browser\ui\webui\settings\settings_ui.cc
在SettingsUI::SettingsUI(content::WebUI* web_ui) 注册下
{

  AddSettingsPageUIHandler(std::make_unique<DownloadsHandler>(profile));
}

3、自定义页面按照这个复制即可
chrome\browser\ui\webui\settings\downloads_handler.cc
chrome\browser\ui\webui\settings\downloads_handler.h

namespace settings {

// Chrome "Downloads" settings page UI handler.
class DownloadsHandler : public SettingsPageUIHandler,
                         public ui::SelectFileDialog::Listener {
 public:
  explicit DownloadsHandler(Profile* profile);

  DownloadsHandler(const DownloadsHandler&) = delete;
  DownloadsHandler& operator=(const DownloadsHandler&) = delete;

  ~DownloadsHandler() override;

  // SettingsPageUIHandler implementation.
  void RegisterMessages() override; //需要重载这个注册回调函数
  void OnJavascriptAllowed() override;
  void OnJavascriptDisallowed() override;
.............
 };

}

4、在DownloadsHandler 里面添加webui注册函数
void DownloadsHandler::RegisterMessages() {
  web_ui()->RegisterMessageCallback(
      "initializeDownloads",
      base::BindRepeating(&DownloadsHandler::HandleInitialize,
                          base::Unretained(this)));
  web_ui()->RegisterMessageCallback(
      "resetAutoOpenFileTypes",
      base::BindRepeating(&DownloadsHandler::HandleResetAutoOpenFileTypes,
                          base::Unretained(this)));
  web_ui()->RegisterMessageCallback(
      "selectDownloadLocation",
      base::BindRepeating(&DownloadsHandler::HandleSelectDownloadLocation,
                          base::Unretained(this)));
#if BUILDFLAG(IS_CHROMEOS_ASH)
  web_ui()->RegisterMessageCallback(
      "getDownloadLocationText",
      base::BindRepeating(&DownloadsHandler::HandleGetDownloadLocationText,
                          base::Unretained(this)));
#endif

  web_ui()->RegisterMessageCallback(
      "setDownloadsConnectionAccountLink",
      base::BindRepeating(
          &DownloadsHandler::HandleSetDownloadsConnectionAccountLink,
          base::Unretained(this)));
}

5、对应实现
void DownloadsHandler::HandleSelectDownloadLocation(
    const base::Value::List& args) {
  // Early return if the select folder dialog is already active.
  if (select_folder_dialog_)
    return;

  PrefService* pref_service = profile_->GetPrefs();
  select_folder_dialog_ = ui::SelectFileDialog::Create(
      this,
      std::make_unique<ChromeSelectFilePolicy>(web_ui()->GetWebContents()));
  ui::SelectFileDialog::FileTypeInfo info;
  info.allowed_paths = ui::SelectFileDialog::FileTypeInfo::NATIVE_PATH;
  select_folder_dialog_->SelectFile(
      ui::SelectFileDialog::SELECT_FOLDER,
      l10n_util::GetStringUTF16(IDS_SETTINGS_DOWNLOAD_LOCATION),
      pref_service->GetFilePath(prefs::kDownloadDefaultDirectory), &info, 0,
      base::FilePath::StringType(),
      web_ui()->GetWebContents()->GetTopLevelNativeWindow(), NULL);
}

6、webui调用c++代码执行结果效果如图：