{"_id":"@cordova-ohos/cordova-plugin-themeablebrowser","_rev":"3-6e959578396667d46ea6825ffed64e50","name":"@cordova-ohos/cordova-plugin-themeablebrowser","dist-tags":{"latest":"0.2.19"},"versions":{"0.2.18":{"name":"@cordova-ohos/cordova-plugin-themeablebrowser","version":"0.2.18","keywords":["cordova","themeablebrowser","ecosystem:cordova","cordova-openharmony"],"author":{"name":"Huawei Device, Inc. Ltd. and","email":"马弓手"},"license":"Apache-2.0","_id":"@cordova-ohos/cordova-plugin-themeablebrowser@0.2.18","maintainers":[{"name":"luqi_tan","email":"295099422@qq.com"},{"name":"wanpengsz","email":"wanpengsz@163.com"},{"name":"xkh111","email":"xukaihui11@163.com"}],"bugs":{"url":"https://gitcode.com/OpenHarmony-Cordova/cordova-plugin-themeablebrowser/issues"},"dist":{"shasum":"5462f227a4ac81490baaa9bfc6b047263ea41e03","tarball":"https://registry.npmjs.org/@cordova-ohos/cordova-plugin-themeablebrowser/-/cordova-plugin-themeablebrowser-0.2.18.tgz","fileCount":9,"integrity":"sha512-zREHi/QzHeXV6FxBniE7yOy85TvR1iZ9sBHLFND2FKdbIzZn4+Gu9+KRLpcz0mR3/0t5d5/eL7N6tKCPiiHPsA==","signatures":[{"sig":"MEQCIHuSLFLF0pRu3n0muCRZdwnJJlqLa/t7P5Xp8i17S7IRAiBaY0jV1jEicf/Jm28MdlBI+xuFyK49vPxMv6phH62MFw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64350},"cordova":{"id":"cordova-plugin-themeablebrowser","platforms":["ohos"]},"engines":{"cordovaDependencies":{"0.2.18":{"hcordova":">=1.0.0","@cordova-ohos/ohos":">=2.0.0"}}},"gitHead":"0de57afa091c7419018dad9b97d3dbd14c517236","_npmUser":{"name":"luqi_tan","email":"295099422@qq.com"},"repository":{"url":"gitcode:OpenHarmony-Cordova/cordova-plugin-themeablebrowser","type":"git"},"_npmVersion":"10.5.1","description":"Cordova themeablebrowser Plugin","directories":{},"_nodeVersion":"22.0.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/cordova-plugin-themeablebrowser_0.2.18_1774228002690_0.8697286254615415","host":"s3://npm-registry-packages-npm-production"}},"0.2.19":{"name":"@cordova-ohos/cordova-plugin-themeablebrowser","version":"0.2.19","description":"Cordova Themeable Browser Plugin","cordova":{"id":"cordova-plugin-themeablebrowser","platforms":["ohos"]},"repository":{"type":"git","url":"gitcode:CPF-Cordova/cordova-plugin-themeablebrowser"},"bugs":{"url":"https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser/issues"},"keywords":["cordova","themeablebrowser","ecosystem:cordova","cordova-openharmony"],"engines":{"cordovaDependencies":{"0.2.19":{"@cordova-ohos/ohos":">=2.0.0","hcordova":">=1.0.0"}}},"author":{"name":"Huawei Device, Inc. Ltd. and","email":"马弓手"},"license":"Apache-2.0","_id":"@cordova-ohos/cordova-plugin-themeablebrowser@0.2.19","gitHead":"7940f4d2fdecca07e81cb49a2ece12c714c335e8","_nodeVersion":"22.0.0","_npmVersion":"10.5.1","dist":{"integrity":"sha512-7qJIWEXfj0qiiSOMsqJaZPGSFJ/dJaO+5RCsT/+zzPVORp0eKRchIzUUrufMhx1XPxq2a5Bi2MGHAPo8UWxUxA==","shasum":"9bd3886b84e621d257b132aede42b734d2b475f3","tarball":"https://registry.npmjs.org/@cordova-ohos/cordova-plugin-themeablebrowser/-/cordova-plugin-themeablebrowser-0.2.19.tgz","fileCount":10,"unpackedSize":88177,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDlRdnxmF58EtVUzxz50uz++yvA+RPgUV9PTDLvbTNlvAIhAMMd2Y0o5mOHAu9pIbykVxLgIG7AbLGcVqlcr3oJvGOg"}]},"_npmUser":{"name":"luqi_tan","email":"295099422@qq.com"},"directories":{},"maintainers":[{"name":"luqi_tan","email":"295099422@qq.com"},{"name":"wanpengsz","email":"wanpengsz@163.com"},{"name":"xkh111","email":"xukaihui11@163.com"},{"name":"hcordova","email":"chenlihuiabc@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cordova-plugin-themeablebrowser_0.2.19_1785157726733_0.4313022440566354"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-23T01:06:42.552Z","modified":"2026-07-27T13:08:47.151Z","0.2.18":"2026-03-23T01:06:42.840Z","0.2.19":"2026-07-27T13:08:46.872Z"},"bugs":{"url":"https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser/issues"},"author":{"name":"Huawei Device, Inc. Ltd. and","email":"马弓手"},"license":"Apache-2.0","keywords":["cordova","themeablebrowser","ecosystem:cordova","cordova-openharmony"],"repository":{"type":"git","url":"gitcode:CPF-Cordova/cordova-plugin-themeablebrowser"},"description":"Cordova Themeable Browser Plugin","maintainers":[{"name":"luqi_tan","email":"295099422@qq.com"},{"name":"wanpengsz","email":"wanpengsz@163.com"},{"name":"xkh111","email":"xukaihui11@163.com"},{"name":"hcordova","email":"chenlihuiabc@163.com"}],"readme":"# cordova-plugin-themeablebrowser\r\n\r\n[](README.md)\r\n[](README.en.md)\r\n\r\n本项目基于 [cordova-plugin-themeablebrowser@0.2.18](https://npmjs.com/package/cordova-plugin-themeablebrowser/v/0.2.18) 开发，本文档重点阐述其在 OpenHarmony（OHOS）系统中的具体应用。\r\n\r\n- [cordova-plugin-themeablebrowser](#cordova-plugin-themeablebrowser)\r\n - [简介](#简介)\r\n - [核心优势](#核心优势)\r\n - [支持平台](#支持平台)\r\n - [下载安装](#下载安装)\r\n - [从 npm 安装（推荐）](#从-npm-安装推荐)\r\n - [指定平台安装 ohos](#指定平台安装-ohos)\r\n - [从 GitCode 仓库安装](#从-gitcode-仓库安装)\r\n - [安装指定版本](#安装指定版本)\r\n - [离线安装（本地包）](#离线安装本地包)\r\n - [安装后验证](#安装后验证)\r\n - [卸载](#卸载)\r\n - [约束与限制](#约束与限制)\r\n - [兼容性](#兼容性)\r\n - [使用示例](#使用示例)\r\n - [使用说明](#使用说明)\r\n - [配置参数（options）](#配置参数options)\r\n - [1. statusbar（状态栏配置）](#1-statusbar状态栏配置)\r\n - [2. toolbar（工具栏配置）](#2-toolbar工具栏配置)\r\n - [3. title（标题栏配置）](#3-title标题栏配置)\r\n - [4. backButton（返回按钮配置）](#4-backbutton返回按钮配置)\r\n - [5. closeButton（关闭按钮配置）](#5-closebutton关闭按钮配置)\r\n - [6. backButtonCanClose（返回按钮关闭权限配置）](#6-backbuttoncanclose返回按钮关闭权限配置)\r\n - [补充说明](#补充说明)\r\n - [目录结构](#目录结构)\r\n - [贡献代码](#贡献代码)\r\n - [许可证](#许可证)\r\n - [官方资源](#官方资源)\r\n\r\n\r\n## 简介\r\n\r\ncordova-plugin-themeablebrowser 是一款功能强大的 Cordova 自定义主题浏览器插件，基于原生 cordova-plugin-inappbrowser 插件，提供高度可定制的 UI 样式、页面交互控制、功能扩展等核心能力。支持自定义导航栏、工具栏、颜色、图标、动画效果，可嵌入应用内作为内置浏览器，也可作为独立窗口打开外部链接，适用于应用内帮助中心、新闻资讯、支付页面、第三方内容展示等场景，为混合应用提供一致且个性化的网页浏览体验。\r\n\r\n特别说明：内置浏览器插件已集成到 OHOS Cordova 框架中，在 html 页面中通过 `打开新窗口` 就可以自动激活内置浏览器，打开在线网页、本地页面等。内置浏览器已经提供了导航栏、文字、图标等自定义配置，因此该插件在 OHOS 系统中并不是必须的，您可以直接通过框架的 config.xml 修改内置浏览器样式。[点击查看 OHOS Cordova 框架](https://gitcode.com/CPF-Cordova/cordova-openharmony)\r\n\r\n### 核心优势\r\n\r\n- **全量 UI 定制**：支持导航栏、工具栏、关闭按钮、进度条等所有 UI 元素的样式自定义（颜色、大小、图标、位置）\r\n\r\n- **灵活交互控制**：支持页面前进/后退、刷新、关闭、分享，可自定义按钮点击事件，支持手势关闭（iOS 侧滑）\r\n\r\n- **功能扩展丰富**：支持文件下载、Cookie 共享、JS 桥接（应用与网页通信）、页面加载进度监听\r\n\r\n- **跨平台一致性**：统一 Android/iOS/OHOS 浏览器样式与交互，支持平台专属配置\r\n\r\n- **轻量高效**：基于原生 WebView 优化，页面加载速度接近系统浏览器，无冗余依赖（体积＜80KB）\r\n\r\n- **安全可靠**：支持 HTTPS 加密传输、JS 注入限制，提供完善的错误回调机制\r\n\r\n## 支持平台\r\n\r\n- **Android**：API 19 及以上（Android 4.4+）\r\n\r\n- **iOS**：10.0 及以上\r\n\r\n- **OHOS**：5.0+\r\n\r\n## 下载安装\r\n\r\n通过 hcordova CLI 即可快速安装插件，支持从 npm 仓库或 GitCode 仓库获取。\r\n\r\n### 从 npm 安装（推荐）\r\n\r\n```bash\r\n# 使用 hcordova CLI 安装\r\n# 安装 hcordova 命令化工具\r\nnpm install -g hcordova\r\n\r\n# 全平台安装插件\r\nhcordova plugin add cordova-plugin-themeablebrowser\r\n```\r\n\r\n### 指定平台安装 ohos\r\n\r\n仅为 OHOS 平台安装插件：\r\n\r\n```bash\r\n# 仅安装到 OHOS 平台\r\nhcordova plugin add cordova-plugin-themeablebrowser --platform ohos\r\n```\r\n\r\n### 从 GitCode 仓库安装\r\n\r\n仅为 OHOS 平台安装插件：\r\n\r\n```bash\r\n# 仅安装到 OHOS 平台\r\nhcordova plugin add https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser.git --platform ohos\r\n\r\n# 指定标签/分支安装\r\nhcordova plugin add https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser.git@develop --platform ohos\r\n```\r\n\r\n### 安装指定版本\r\n\r\n```bash\r\n# 仅安装到 OHOS 平台指定版本\r\nhcordova plugin add cordova-plugin-themeablebrowser@1.0.0 --platform ohos\r\n```\r\n\r\n### 离线安装（本地包）\r\n\r\n适用于无网络环境，先下载插件包到本地，再执行离线安装：\r\n\r\n```bash\r\n# 下载插件包到本地（示例路径：~/Downloads/cordova-plugin-themeablebrowser）\r\n# 执行离线安装\r\nhcordova plugin add ~/Downloads/cordova-plugin-themeablebrowser --platform ohos\r\n```\r\n\r\n### 安装后验证\r\n\r\n安装完成后，可通过以下命令验证插件是否成功添加到项目中：\r\n\r\n```bash\r\n# 查看已安装的插件列表，若包含本插件 ID 则表示插件已成功安装\r\nhcordova plugin list\r\n```\r\n\r\n### 卸载\r\n\r\n```bash\r\n# Cordova CLI 全平台卸载\r\nhcordova plugin remove cordova-plugin-themeablebrowser \r\n\r\n# 指定平台卸载\r\nhcordova plugin remove cordova-plugin-themeablebrowser --platform ohos\r\n```\r\n\r\n## 约束与限制\r\n\r\n依赖插件：无强制依赖，基于原生 cordova-plugin-inappbrowser 插件扩展，若需增强功能可搭配相关插件使用。\r\n\r\n### 兼容性\r\n\r\n支持：\r\n\r\n| 项目 | 版本/信息 |\r\n|-----|--------|\r\n| SDK | API12+ |\r\n| IDE | DevEco Studio: 5.0+ |\r\n| ROM | 5.1+ |\r\n| Emulator | OpenHarmony 6.0+ |\r\n\r\n在以下版本中已测试通过：\r\n\r\n| 项目 | 版本/信息 |\r\n|-----|--------|\r\n| @cordova-ohos/ohos | 14.0.1-ohos-14.0.1 |\r\n| SDK | 5.0.0(12) |\r\n| IDE | DevEco Studio: 6.0.13.200 |\r\n| ROM | 5.1.0.120 SP3 |\r\n| Emulator | OpenHarmony 6.0.1(21) |\r\n\r\n## 使用示例\r\n\r\n```javascript\r\n// 目前 OHOS 支持以下新增的属性和监听事件，具体事件参考 cordova-plugin-inappbrowser 插件介绍\r\ncordova.ThemeableBrowser.open(\r\n 'https://www.example.com', \r\n '_blank', \r\n {\r\n statusbar: {\r\n color: '#ffffffff'\r\n },\r\n toolbar: {\r\n height: 44,\r\n color: '#f0f0f0ff'\r\n },\r\n title: {\r\n color: '#000000',\r\n showPageTitle: true\r\n },\r\n backButton: {\r\n event: 'backPressed'\r\n },\r\n closeButton: {\r\n event: 'closePressed'\r\n },\r\n backButtonCanClose: true\r\n }).addEventListener('backPressed', function(e) {\r\n alert('back pressed');\r\n }).addEventListener('closePressed', function(e) {\r\n alert('closePressed');\r\n });\r\n```\r\n\r\n## 使用说明\r\n\r\n### 配置参数（options）\r\n\r\n配置参数（options）用于自定义 OHOS 系统中 ThemeableBrowser 窗口的外观、按钮及行为，以下仅列出当前 OHOS 版本支持的新增核心参数，与使用示例中的配置一一对应，未列出的参数可参考 cordova-plugin-inappbrowser 插件官方文档。\r\n\r\n所有颜色值均支持十六进制格式（如 #ffffffff，前 6 位为颜色值，后 2 位为透明度，透明度范围 00-ff，00 为完全透明，ff 为完全不透明），数值类参数单位默认与系统一致（如 toolbar 高度单位为 px）。\r\n\r\n#### 1. statusbar（状态栏配置）\r\n\r\n用于配置浏览器窗口状态栏的外观，仅支持 color 属性。\r\n\r\n| 参数名 | 类型 | 说明 | 示例 |\r\n|---|---|---|---|\r\n| color | String | 必选，状态栏背景颜色，支持十六进制颜色+透明度格式 | #ffffffff（白色不透明） |\r\n#### 2. toolbar（工具栏配置）\r\n\r\n用于配置浏览器窗口工具栏（导航栏）的外观，支持高度和背景颜色设置。\r\n\r\n| 参数名 | 类型 | 说明 | 示例 |\r\n|---|---|---|---|\r\n| height | Number | 可选，工具栏高度，默认值根据系统自适应，建议设置为 44px（适配 OHOS 主流设备） | 44 |\r\n| color | String | 必选，工具栏背景颜色，支持十六进制颜色+透明度格式 | #f0f0f0ff（浅灰色不透明） |\r\n#### 3. title（标题栏配置）\r\n\r\n用于配置浏览器窗口标题的外观及显示规则。\r\n\r\n| 参数名 | 类型 | 说明 | 示例 |\r\n|---|---|---|---|\r\n| color | String | 必选，标题文字颜色，支持十六进制纯颜色值（无需透明度，仅控制文字颜色） | #000000（黑色） |\r\n| showPageTitle | Boolean | 可选，是否显示当前网页的标题，true 显示，false 隐藏，默认值为 true | true |\r\n#### 4. backButton（返回按钮配置）\r\n\r\n用于配置浏览器返回按钮的事件绑定，点击返回按钮时触发绑定的事件。\r\n\r\n| 参数名 | 类型 | 说明 | 示例 |\r\n|---|---|---|---|\r\n| event | String | 必选，返回按钮点击时触发的事件名称，需与 addEventListener 绑定的事件名一致 | backPressed |\r\n#### 5. closeButton（关闭按钮配置）\r\n\r\n用于配置浏览器关闭按钮的事件绑定，点击关闭按钮时触发绑定的事件。\r\n\r\n| 参数名 | 类型 | 说明 | 示例 |\r\n|---|---|---|---|\r\n| event | String | 必选，关闭按钮点击时触发的事件名称，需与 addEventListener 绑定的事件名一致 | closePressed |\r\n#### 6. backButtonCanClose（返回按钮关闭权限配置）\r\n\r\n用于控制点击返回按钮时，是否允许关闭浏览器窗口。\r\n\r\n| 参数名 | 类型 | 说明 | 示例 |\r\n|---|---|---|---|\r\n| backButtonCanClose | Boolean | 可选，true 表示点击返回按钮可关闭浏览器窗口，false 表示仅触发 backPressed 事件、不关闭窗口，默认值为 false | true |\r\n\r\n### 补充说明\r\n\r\n- 配置参数需与使用示例中的属性严格对应，事件名（如 backPressed、closePressed）可自定义，但需保证 backButton/closeButton 的 event 参数与 addEventListener 绑定的事件名一致，否则事件无法触发。\r\n\r\n- 颜色值建议使用十六进制格式。\r\n\r\n- 除上述参数外，未列出的配置参数及事件，可参考 cordova-plugin-inappbrowser 插件官方文档，当前 OHOS 版本均兼容其基础功能。\r\n \r\n## 目录结构\r\n\r\n```\r\ncordova-plugin-themeablebrowser # [根目录] 可定制主题浏览器插件项目根目录\r\n├── src # [源码目录] 存放原生平台代码\r\n│ └── main # [主目录] 主代码目录\r\n│ ├── cpp # [C++ 目录] C++ 原生代码目录\r\n│ │ └── inappbrowser # [C++ 模块] 应用内浏览器 C++ 模块文件夹（注意文件夹名为小写）\r\n│ │ ├── ThemeableBrowser.cpp # [C++ 实现] C++ 源文件，实现浏览器核心逻辑及主题控制\r\n│ │ └── ThemeableBrowser.h # [C++ 声明] C++ 头文件，定义浏览器接口\r\n│ └── ets # [ArkTS 目录] ArkTS/ETS 代码目录\r\n│ └── components # [组件目录] 存放 UI 组件\r\n│ └── InAppBrowser # [TS 模块] 应用内浏览器 UI 组件文件夹\r\n│ └── BrowserAction.ets # [ETS 文件] 浏览器操作栏（如前进、后退、关闭按钮）的 UI 实现\r\n├── www # [前端目录] 存放供 Web 端调用的 JS 接口文件\r\n│ └── themeablebrowser.js # [JS 文件] 暴露给 Web 端的 JS 接口，用于打开可定制浏览器\r\n├── .gitignore # [配置] Git 版本控制忽略文件配置\r\n├── LICENSE # [文本] 开源许可证文件\r\n├── OAT.xml # [配置] 门禁配置文件\r\n├── package.json # [配置] NPM 包配置文件，包含插件版本、依赖等信息\r\n├── plugin.xml # [配置] Cordova 插件核心配置文件，定义插件元数据、文件映射等\r\n└── README.md # [文档] 项目说明文档，通常包含安装和使用指南\r\n```\r\n\r\n## 贡献代码\r\n\r\n使用过程中发现任何问题都可以提 [Issue](https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser/issues) ，当然也非常欢迎发 [PR](https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser/pulls) 共建。\r\n\r\n## 许可证\r\n\r\n本插件基于 **Apache License 2.0** 开源，详见 [LICENSE](LICENSE) 文件。\r\n\r\n## 官方资源\r\n\r\n1. 内置浏览器 Apache Cordova：访问 [Apache Cordova 官方仓库](https://github.com/apache/cordova-plugin-inappbrowser)\r\n\r\n2. OHOS cordova-plugin-themeablebrowser：访问 [https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser](https://gitcode.com/CPF-Cordova/cordova-plugin-themeablebrowser)\r\n\r\n3. cordova-plugin-inappbrowser 插件：访问 [https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser](https://gitcode.com/CPF-Cordova/cordova-plugin-inappbrowser)\r\n","readmeFilename":"README.md"}