--- description: Capacitor plugin to open URLs in the external browser, the system browser, or an embedded web view on Android, iOS, and the web. title: Capacitor In-App Browser Plugin - Capawesome image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/in-app-browser.png --- [Skip to content ](#capacitor-in-app-browser-plugin) [πŸ” Introducing the **Capacitor Vault** plugin β€” store secrets behind biometrics or a device passcode. ](/blog/announcing-the-capacitor-vault-plugin/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ Gyroscope ](/docs/sdks/capacitor/gyroscope/) * In-App Browser [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/) * [ iOS ](#ios) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Messaging ](#messaging) * [ Platform Behavior ](#platform-behavior) * [ Changelog ](#changelog) * [ License ](#license) * [ Install Referrer ](/docs/sdks/capacitor/install-referrer/) * [ Keep Awake ](/docs/sdks/capacitor/keep-awake/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Localization ](/docs/sdks/capacitor/localization/) * [ Mail Composer ](/docs/sdks/capacitor/mail-composer/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ Node.js ](/docs/sdks/capacitor/nodejs/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Passkeys ](/docs/sdks/capacitor/passkeys/) * [ Password Autofill ](/docs/sdks/capacitor/password-autofill/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ PixLive ](/docs/sdks/capacitor/pixlive/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Root Detection ](/docs/sdks/capacitor/root-detection/) * [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Shake ](/docs/sdks/capacitor/shake/) * [ Silent Mode ](/docs/sdks/capacitor/silent-mode/) * [ SIM ](/docs/sdks/capacitor/sim/) * [ SMS Composer ](/docs/sdks/capacitor/sms-composer/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ Thermal State ](/docs/sdks/capacitor/thermal-state/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Volume ](/docs/sdks/capacitor/volume/) * [ Wallet ](/docs/sdks/capacitor/wallet/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ iOS ](#ios) * [ Configuration ](#configuration) * [ Usage ](#usage) * [ API ](#api) * [ Type Aliases ](#type-aliases) * [ Messaging ](#messaging) * [ Platform Behavior ](#platform-behavior) * [ Changelog ](#changelog) * [ License ](#license) # Capacitor In-App Browser Plugin[ΒΆ](#capacitor-in-app-browser-plugin "Permanent link") Capacitor plugin to open URLs in the external browser, the system browser or an embedded web view. [ ![Deliver Live Updates to your Capacitor app with Capawesome Cloud](../../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](https://cloud.capawesome.io/) ## Features[ΒΆ](#features "Permanent link") We are proud to offer one of the most complete and feature-rich Capacitor plugins for in-app browsing. Here are some of the key features: * 🌐 **Three browser modes**: Open URLs in the external browser, the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS) or an embedded web view. * 🧭 **Navigation events**: Get notified when the browser is closed, a page has been loaded or a navigation has been completed. * πŸ’‰ **JavaScript execution**: Execute any JavaScript code in the embedded web view. * πŸ’¬ **Messaging**: Exchange messages between your app and the web page in both directions. * 🎨 **Toolbar theming**: Customize the toolbar color, title, close button and navigation buttons. * πŸͺ **Session control**: Clear the cache and session data, or use an isolated data store on iOS. * πŸŽ₯ **Media permissions**: Camera and microphone permission requests from web pages are forwarded to the app. * πŸ“¦ **CocoaPods & SPM**: Supports CocoaPods and Swift Package Manager for iOS. * πŸ” **Up-to-date**: Always supports the latest Capacitor version. Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look! ## Newsletter[ΒΆ](#newsletter "Permanent link") Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/). ## Compatibility[ΒΆ](#compatibility "Permanent link") | Plugin Version | Capacitor Version | Status | | -------------- | ----------------- | -------------- | | 0.x.x | \>=8.x.x | Active support | ## Installation[ΒΆ](#installation "Permanent link") You can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command: `[](#%5F%5Fcodelineno-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins ` Then use the following prompt: `` [](#%5F%5Fcodelineno-1-1) Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-in-app-browser` plugin in my project. `` If you prefer **Manual Setup**, install the plugin by running the following commands and follow the platform-specific instructions below: `[](#%5F%5Fcodelineno-2-1)npm install @capawesome/capacitor-in-app-browser [](#%5F%5Fcodelineno-2-2)npx cap sync ` ### Android[ΒΆ](#android "Permanent link") #### Variables[ΒΆ](#variables "Permanent link") This plugin will use the following project variables (defined in your app’s `variables.gradle` file): * `$androidxBrowserVersion` version of `androidx.browser:browser` (default: `1.9.0`) #### Permissions[ΒΆ](#permissions "Permanent link") If web pages opened in the embedded web view should be able to access the camera or microphone, the following elements must be added to your `AndroidManifest.xml` before or after the `application` tag: `[](#%5F%5Fcodelineno-3-1) [](#%5F%5Fcodelineno-3-2) [](#%5F%5Fcodelineno-3-3) [](#%5F%5Fcodelineno-3-4) ` The permissions must also be granted before a web page requests access to the camera or microphone. ### iOS[ΒΆ](#ios "Permanent link") #### Privacy Descriptions[ΒΆ](#privacy-descriptions "Permanent link") If web pages opened in the embedded web view should be able to access the camera or microphone, the `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` keys must be added to the `Info.plist` file of your app: `[](#%5F%5Fcodelineno-4-1)NSCameraUsageDescription [](#%5F%5Fcodelineno-4-2)The camera is used by websites opened in the in-app browser. [](#%5F%5Fcodelineno-4-3)NSMicrophoneUsageDescription [](#%5F%5Fcodelineno-4-4)The microphone is used by websites opened in the in-app browser. ` ## Configuration[ΒΆ](#configuration "Permanent link") No configuration required for this plugin. ## Usage[ΒΆ](#usage "Permanent link") `[](#%5F%5Fcodelineno-5-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser'; [](#%5F%5Fcodelineno-5-2) [](#%5F%5Fcodelineno-5-3)const openInExternalBrowser = async () => { [](#%5F%5Fcodelineno-5-4) await InAppBrowser.openInExternalBrowser({ [](#%5F%5Fcodelineno-5-5) url: 'https://capawesome.io', [](#%5F%5Fcodelineno-5-6) }); [](#%5F%5Fcodelineno-5-7)}; [](#%5F%5Fcodelineno-5-8) [](#%5F%5Fcodelineno-5-9)const openInSystemBrowser = async () => { [](#%5F%5Fcodelineno-5-10) await InAppBrowser.openInSystemBrowser({ [](#%5F%5Fcodelineno-5-11) url: 'https://capawesome.io', [](#%5F%5Fcodelineno-5-12) android: { [](#%5F%5Fcodelineno-5-13) showTitle: true, [](#%5F%5Fcodelineno-5-14) toolbarColor: '#008080', [](#%5F%5Fcodelineno-5-15) }, [](#%5F%5Fcodelineno-5-16) ios: { [](#%5F%5Fcodelineno-5-17) dismissButtonStyle: 'close', [](#%5F%5Fcodelineno-5-18) toolbarColor: '#008080', [](#%5F%5Fcodelineno-5-19) }, [](#%5F%5Fcodelineno-5-20) }); [](#%5F%5Fcodelineno-5-21)}; [](#%5F%5Fcodelineno-5-22) [](#%5F%5Fcodelineno-5-23)const openInWebView = async () => { [](#%5F%5Fcodelineno-5-24) await InAppBrowser.openInWebView({ [](#%5F%5Fcodelineno-5-25) url: 'https://capawesome.io', [](#%5F%5Fcodelineno-5-26) toolbar: { [](#%5F%5Fcodelineno-5-27) backgroundColor: '#008080', [](#%5F%5Fcodelineno-5-28) color: '#FFFFFF', [](#%5F%5Fcodelineno-5-29) showNavigationButtons: true, [](#%5F%5Fcodelineno-5-30) }, [](#%5F%5Fcodelineno-5-31) }); [](#%5F%5Fcodelineno-5-32)}; [](#%5F%5Fcodelineno-5-33) [](#%5F%5Fcodelineno-5-34)const close = async () => { [](#%5F%5Fcodelineno-5-35) await InAppBrowser.close(); [](#%5F%5Fcodelineno-5-36)}; [](#%5F%5Fcodelineno-5-37) [](#%5F%5Fcodelineno-5-38)const executeScript = async () => { [](#%5F%5Fcodelineno-5-39) const { result } = await InAppBrowser.executeScript({ [](#%5F%5Fcodelineno-5-40) script: 'document.title', [](#%5F%5Fcodelineno-5-41) }); [](#%5F%5Fcodelineno-5-42) return result; [](#%5F%5Fcodelineno-5-43)}; [](#%5F%5Fcodelineno-5-44) [](#%5F%5Fcodelineno-5-45)const postMessage = async () => { [](#%5F%5Fcodelineno-5-46) await InAppBrowser.postMessage({ [](#%5F%5Fcodelineno-5-47) data: { name: 'Capawesome' }, [](#%5F%5Fcodelineno-5-48) }); [](#%5F%5Fcodelineno-5-49)}; [](#%5F%5Fcodelineno-5-50) [](#%5F%5Fcodelineno-5-51)const clearCache = async () => { [](#%5F%5Fcodelineno-5-52) await InAppBrowser.clearCache(); [](#%5F%5Fcodelineno-5-53)}; [](#%5F%5Fcodelineno-5-54) [](#%5F%5Fcodelineno-5-55)const clearSessionData = async () => { [](#%5F%5Fcodelineno-5-56) await InAppBrowser.clearSessionData(); [](#%5F%5Fcodelineno-5-57)}; [](#%5F%5Fcodelineno-5-58) [](#%5F%5Fcodelineno-5-59)const addListeners = async () => { [](#%5F%5Fcodelineno-5-60) await InAppBrowser.addListener('browserClosed', () => { [](#%5F%5Fcodelineno-5-61) console.log('Browser closed'); [](#%5F%5Fcodelineno-5-62) }); [](#%5F%5Fcodelineno-5-63) await InAppBrowser.addListener('browserPageLoaded', () => { [](#%5F%5Fcodelineno-5-64) console.log('Browser page loaded'); [](#%5F%5Fcodelineno-5-65) }); [](#%5F%5Fcodelineno-5-66) await InAppBrowser.addListener('browserPageNavigationCompleted', event => { [](#%5F%5Fcodelineno-5-67) console.log('Navigation completed', event.url); [](#%5F%5Fcodelineno-5-68) }); [](#%5F%5Fcodelineno-5-69) await InAppBrowser.addListener('messageReceived', event => { [](#%5F%5Fcodelineno-5-70) console.log('Message received', event.data); [](#%5F%5Fcodelineno-5-71) }); [](#%5F%5Fcodelineno-5-72)}; ` ## API[ΒΆ](#api "Permanent link") * [clearCache()](#clearcache) * [clearSessionData()](#clearsessiondata) * [close()](#close) * [executeScript(...)](#executescript) * [getCookies(...)](#getcookies) * [openInExternalBrowser(...)](#openinexternalbrowser) * [openInSystemBrowser(...)](#openinsystembrowser) * [openInWebView(...)](#openinwebview) * [postMessage(...)](#postmessage) * [addListener('browserClosed', ...)](#addlistenerbrowserclosed-) * [addListener('browserPageLoaded', ...)](#addlistenerbrowserpageloaded-) * [addListener('browserPageNavigationCompleted', ...)](#addlistenerbrowserpagenavigationcompleted-) * [addListener('messageReceived', ...)](#addlistenermessagereceived-) * [removeAllListeners()](#removealllisteners) * [Interfaces](#interfaces) * [Type Aliases](#type-aliases) ### clearCache()[ΒΆ](#clearcache "Permanent link") `[](#%5F%5Fcodelineno-6-1)clearCache() => Promise ` Clear the cache of the web view. Only available on Android and iOS. **Since:** 0.1.0 --- ### clearSessionData()[ΒΆ](#clearsessiondata "Permanent link") `[](#%5F%5Fcodelineno-7-1)clearSessionData() => Promise ` Clear the session data (cookies and web storage) of the web view. Only available on Android and iOS. **Since:** 0.1.0 --- ### close()[ΒΆ](#close "Permanent link") `[](#%5F%5Fcodelineno-8-1)close() => Promise ` Close the currently open browser. This closes browsers opened with `openInWebView(...)` or `openInSystemBrowser(...)`. Only available on Android and iOS. **Since:** 0.1.0 --- ### executeScript(...)[ΒΆ](#executescript "Permanent link") `[](#%5F%5Fcodelineno-9-1)executeScript(options: ExecuteScriptOptions) => Promise ` Execute a JavaScript script in the currently open web view. This method is only available for browsers opened with `openInWebView(...)`. Only available on Android and iOS. | Param | Type | | ----------- | --------------------------------------------- | | **options** | [ExecuteScriptOptions](#executescriptoptions) | **Returns:** `Promise<[ExecuteScriptResult](#executescriptresult)>` **Since:** 0.1.0 --- ### getCookies(...)[ΒΆ](#getcookies "Permanent link") `[](#%5F%5Fcodelineno-10-1)getCookies(options: GetCookiesOptions) => Promise ` Get the cookies for a specific URL. On iOS, only cookies from the shared data store are returned. Cookies from a web view opened with `dataStore: 'isolated'` are not included. Only available on Android and iOS. | Param | Type | | ----------- | --------------------------------------- | | **options** | [GetCookiesOptions](#getcookiesoptions) | **Returns:** `Promise<[GetCookiesResult](#getcookiesresult)>` **Since:** 0.1.0 --- ### openInExternalBrowser(...)[ΒΆ](#openinexternalbrowser "Permanent link") `[](#%5F%5Fcodelineno-11-1)openInExternalBrowser(options: OpenInExternalBrowserOptions) => Promise ` Open a URL in the default browser app of the device. | Param | Type | | ----------- | ------------------------------------------------------------- | | **options** | [OpenInExternalBrowserOptions](#openinexternalbrowseroptions) | **Since:** 0.1.0 --- ### openInSystemBrowser(...)[ΒΆ](#openinsystembrowser "Permanent link") `[](#%5F%5Fcodelineno-12-1)openInSystemBrowser(options: OpenInSystemBrowserOptions) => Promise ` Open a URL in the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS). Only available on Android and iOS. | Param | Type | | ----------- | --------------------------------------------------------- | | **options** | [OpenInSystemBrowserOptions](#openinsystembrowseroptions) | **Since:** 0.1.0 --- ### openInWebView(...)[ΒΆ](#openinwebview "Permanent link") `[](#%5F%5Fcodelineno-13-1)openInWebView(options: OpenInWebViewOptions) => Promise ` Open a URL in an embedded web view with a native toolbar. Only available on Android and iOS. | Param | Type | | ----------- | --------------------------------------------- | | **options** | [OpenInWebViewOptions](#openinwebviewoptions) | **Since:** 0.1.0 --- ### postMessage(...)[ΒΆ](#postmessage "Permanent link") `[](#%5F%5Fcodelineno-14-1)postMessage(options: PostMessageOptions) => Promise ` Post a message to the currently open web view. The web page receives the message by listening for the `capacitorInAppBrowserMessage` window event. The message data is available in the `detail` property of the event. This method is only available for browsers opened with `openInWebView(...)`. Only available on Android and iOS. | Param | Type | | ----------- | ----------------------------------------- | | **options** | [PostMessageOptions](#postmessageoptions) | **Since:** 0.1.0 --- ### addListener('browserClosed', ...)[ΒΆ](#addlistenerbrowserclosed "Permanent link") `[](#%5F%5Fcodelineno-15-1)addListener(eventName: 'browserClosed', listenerFunc: () => void) => Promise ` Called when the browser is closed. Only available on Android and iOS. | Param | Type | | ---------------- | --------------- | | **eventName** | 'browserClosed' | | **listenerFunc** | () => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('browserPageLoaded', ...)[ΒΆ](#addlistenerbrowserpageloaded "Permanent link") `[](#%5F%5Fcodelineno-16-1)addListener(eventName: 'browserPageLoaded', listenerFunc: () => void) => Promise ` Called when the initial page of the browser has finished loading. On Android, this event is only emitted for browsers opened with `openInWebView(...)`. Only available on Android and iOS. | Param | Type | | ---------------- | ------------------- | | **eventName** | 'browserPageLoaded' | | **listenerFunc** | () => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('browserPageNavigationCompleted', ...)[ΒΆ](#addlistenerbrowserpagenavigationcompleted "Permanent link") `[](#%5F%5Fcodelineno-17-1)addListener(eventName: 'browserPageNavigationCompleted', listenerFunc: (event: BrowserPageNavigationCompletedEvent) => void) => Promise ` Called when a page navigation has been completed in the web view. This event is only emitted for browsers opened with `openInWebView(...)`. Only available on Android and iOS. | Param | Type | | ---------------- | -------------------------------------------------------------------------------------------- | | **eventName** | 'browserPageNavigationCompleted' | | **listenerFunc** | (event: [BrowserPageNavigationCompletedEvent](#browserpagenavigationcompletedevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### addListener('messageReceived', ...)[ΒΆ](#addlistenermessagereceived "Permanent link") `[](#%5F%5Fcodelineno-18-1)addListener(eventName: 'messageReceived', listenerFunc: (event: MessageReceivedEvent) => void) => Promise ` Called when the web page posts a message to the app using the injected `window.CapacitorInAppBrowser.postMessage(...)` function. This event is only emitted for browsers opened with `openInWebView(...)`. Only available on Android and iOS. | Param | Type | | ---------------- | -------------------------------------------------------------- | | **eventName** | 'messageReceived' | | **listenerFunc** | (event: [MessageReceivedEvent](#messagereceivedevent)) => void | **Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>` **Since:** 0.1.0 --- ### removeAllListeners()[ΒΆ](#removealllisteners "Permanent link") `[](#%5F%5Fcodelineno-19-1)removeAllListeners() => Promise ` Remove all listeners for this plugin. **Since:** 0.1.0 --- ### Interfaces[ΒΆ](#interfaces "Permanent link") #### ExecuteScriptResult[ΒΆ](#executescriptresult "Permanent link") | Prop | Type | Description | Since | | ---------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----- | | **result** | string \| null | The result of the script execution serialized as a JSON string. If the script does not return a JSON-serializable value, null is returned. | 0.1.0 | #### ExecuteScriptOptions[ΒΆ](#executescriptoptions "Permanent link") | Prop | Type | Description | Since | | ---------- | ------ | ----------------------------------------------- | ----- | | **script** | string | The JavaScript code to execute in the web view. | 0.1.0 | #### GetCookiesResult[ΒΆ](#getcookiesresult "Permanent link") | Prop | Type | Description | Since | | ----------- | ---------------------------- | ----------------------------------------------------------- | ----- | | **cookies** | { \[key: string\]: string; } | The cookies for the URL as a map of cookie names to values. | 0.1.0 | #### GetCookiesOptions[ΒΆ](#getcookiesoptions "Permanent link") | Prop | Type | Description | Since | | ------- | ------ | ------------------------------- | ----- | | **url** | string | The URL to get the cookies for. | 0.1.0 | #### OpenInExternalBrowserOptions[ΒΆ](#openinexternalbrowseroptions "Permanent link") | Prop | Type | Description | Since | | ------- | ------ | ---------------------------------------- | ----- | | **url** | string | The URL to open in the external browser. | 0.1.0 | #### OpenInSystemBrowserOptions[ΒΆ](#openinsystembrowseroptions "Permanent link") | Prop | Type | Description | Since | | ----------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------- | ----- | | **android** | [OpenInSystemBrowserAndroidOptions](#openinsystembrowserandroidoptions) | Options that are only applied on Android. Only available on Android. | 0.1.0 | | **ios** | [OpenInSystemBrowserIosOptions](#openinsystembrowseriosoptions) | Options that are only applied on iOS. Only available on iOS. | 0.1.0 | | **url** | string | The URL to open in the system browser. | 0.1.0 | #### OpenInSystemBrowserAndroidOptions[ΒΆ](#openinsystembrowserandroidoptions "Permanent link") | Prop | Type | Description | Default | Since | | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | ------- | ----- | | **hideToolbarOnScroll** | boolean | Whether or not the toolbar should be hidden when the user scrolls down and shown when the user scrolls up. | false | 0.1.0 | | **showTitle** | boolean | Whether or not the title of the web page should be shown in the toolbar. | false | 0.1.0 | | **toolbarColor** | string | The background color of the toolbar as a hex color code. | | 0.1.0 | #### OpenInSystemBrowserIosOptions[ΒΆ](#openinsystembrowseriosoptions "Permanent link") | Prop | Type | Description | Default | Since | | ---------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------- | ------- | ----- | | **barCollapsing** | boolean | Whether or not the toolbar should collapse when the user scrolls down. | true | 0.1.0 | | **dismissButtonStyle** | [DismissButtonStyle](#dismissbuttonstyle) | The style of the dismiss button in the toolbar. | 'done' | 0.1.0 | | **readerMode** | boolean | Whether or not the reader mode should be entered if it is available for the web page. | false | 0.1.0 | | **toolbarColor** | string | The background color of the toolbar as a hex color code. | | 0.1.0 | #### OpenInWebViewOptions[ΒΆ](#openinwebviewoptions "Permanent link") | Prop | Type | Description | Default | Since | | ----------------------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----- | | **android** | [OpenInWebViewAndroidOptions](#openinwebviewandroidoptions) | Options that are only applied on Android. Only available on Android. | | 0.1.0 | | **dataStore** | [WebViewDataStore](#webviewdatastore) | The data store to use for the web view. On Android, this option is ignored. The web view always uses the app-global (shared) data store. Only available on iOS. | 'shared' | 0.1.0 | | **headers** | { \[key: string\]: string; } | Additional HTTP headers to send with the initial request. | | 0.1.0 | | **ios** | [OpenInWebViewIosOptions](#openinwebviewiosoptions) | Options that are only applied on iOS. Only available on iOS. | | 0.1.0 | | **mediaPlaybackRequiresUserAction** | boolean | Whether or not media playback requires user action. | false | 0.1.0 | | **toolbar** | [WebViewToolbarOptions](#webviewtoolbaroptions) | Options for the toolbar of the web view. | | 0.1.0 | | **url** | string | The URL to open in the web view. | | 0.1.0 | | **userAgent** | string | The custom user agent to use for the web view. | | 0.1.0 | #### OpenInWebViewAndroidOptions[ΒΆ](#openinwebviewandroidoptions "Permanent link") | Prop | Type | Description | Default | Since | | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----- | | **allowZoom** | boolean | Whether or not the user can zoom the web page. | false | 0.1.0 | | **hardwareBackButton** | boolean | Whether or not the hardware back button navigates back in the web view's history before closing the web view. If false, the hardware back button closes the web view immediately. | true | 0.1.0 | | **pauseMediaWhenHidden** | boolean | Whether or not media playback is paused when the app is hidden. | true | 0.1.0 | #### OpenInWebViewIosOptions[ΒΆ](#openinwebviewiosoptions "Permanent link") | Prop | Type | Description | Default | Since | | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------- | ------- | ----- | | **allowsBackForwardNavigationGestures** | boolean | Whether or not horizontal swipe gestures navigate back and forward in the web view's history. | false | 0.1.0 | | **overscroll** | boolean | Whether or not the web view bounces when scrolled past the edge of the content. | true | 0.1.0 | #### WebViewToolbarOptions[ΒΆ](#webviewtoolbaroptions "Permanent link") | Prop | Type | Description | Default | Since | | ------------------------- | ------- | ------------------------------------------------------------------------------------------------------ | ------- | ----- | | **backgroundColor** | string | The background color of the toolbar as a hex color code. | | 0.1.0 | | **closeButtonText** | string | The text of the close button in the toolbar. | 'Close' | 0.1.0 | | **color** | string | The text color of the toolbar as a hex color code. | | 0.1.0 | | **showNavigationButtons** | boolean | Whether or not the back and forward navigation buttons should be shown in the toolbar. | false | 0.1.0 | | **showUrl** | boolean | Whether or not the current URL should be displayed in the toolbar instead of the title. | false | 0.1.0 | | **title** | string | The fixed title to display in the toolbar. If not set, the title of the current web page is displayed. | | 0.1.0 | | **visible** | boolean | Whether or not the toolbar should be visible. | true | 0.1.0 | #### PostMessageOptions[ΒΆ](#postmessageoptions "Permanent link") | Prop | Type | Description | Since | | -------- | ----------------------------- | ----------------------------------------------------------------------------- | ----- | | **data** | { \[key: string\]: unknown; } | The message data to post to the web view. Must be a JSON-serializable object. | 0.1.0 | #### PluginListenerHandle[ΒΆ](#pluginlistenerhandle "Permanent link") | Prop | Type | | ---------- | ------------------- | | **remove** | () => Promise | #### BrowserPageNavigationCompletedEvent[ΒΆ](#browserpagenavigationcompletedevent "Permanent link") | Prop | Type | Description | Since | | ------- | ------ | ------------------------------------------ | ----- | | **url** | string | The URL of the page that was navigated to. | 0.1.0 | #### MessageReceivedEvent[ΒΆ](#messagereceivedevent "Permanent link") | Prop | Type | Description | Since | | -------- | ------- | ---------------------------------------- | ----- | | **data** | unknown | The message data posted by the web page. | 0.1.0 | ### Type Aliases[ΒΆ](#type-aliases "Permanent link") #### DismissButtonStyle[ΒΆ](#dismissbuttonstyle "Permanent link") The style of the dismiss button in the toolbar of the system browser. * `cancel`: A button with the text "Cancel". * `close`: A button with the text "Close". * `done`: A button with the text "Done". `'cancel' | 'close' | 'done'` #### WebViewDataStore[ΒΆ](#webviewdatastore "Permanent link") The data store to use for the web view. * `isolated`: The web view uses a non-persistent data store. Cookies and web storage are discarded when the web view is closed. * `shared`: The web view uses the app-global data store which is shared with other web views. `'isolated' | 'shared'` ## Messaging[ΒΆ](#messaging "Permanent link") The embedded web view injects a small message bridge into every web page. This allows you to exchange messages between your app and the web page in both directions. ### From the web page to the app[ΒΆ](#from-the-web-page-to-the-app "Permanent link") The web page can post a message to the app using the injected `window.CapacitorInAppBrowser.postMessage(...)` function: `[](#%5F%5Fcodelineno-20-1)window.CapacitorInAppBrowser.postMessage({ name: 'Capawesome' }); ` The app receives the message via the `messageReceived` event. ### From the app to the web page[ΒΆ](#from-the-app-to-the-web-page "Permanent link") The app can post a message to the web page using the `postMessage(...)` method. The web page receives the message by listening for the `capacitorInAppBrowserMessage` window event: `[](#%5F%5Fcodelineno-21-1)window.addEventListener('capacitorInAppBrowserMessage', event => { [](#%5F%5Fcodelineno-21-2) console.log('Message received', event.detail); [](#%5F%5Fcodelineno-21-3)}); ` ## Platform Behavior[ΒΆ](#platform-behavior "Permanent link") The three browser modes behave differently on each platform. Keep the following differences in mind: * **System browser**: Tracking the visited URLs is not possible by design. If you need the `browserPageNavigationCompleted` event, use the `openInWebView(...)` method instead. On Android, the `browserPageLoaded` event is not emitted for the system browser and the `browserClosed` event is emitted when the user returns to the app. * **Embedded web view**: The web view always uses the app-global (`shared`) data store on Android. The `dataStore` option is only supported on iOS. On iOS, hiding the toolbar removes the close button, so the browser can then only be closed using the `close(...)` method. * **External browser**: The browser is opened in a separate app. For this reason, no events are emitted and the `close(...)` method has no effect. ## Changelog[ΒΆ](#changelog "Permanent link") See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/in-app-browser/CHANGELOG.md). ## License[ΒΆ](#license "Permanent link") See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/in-app-browser/LICENSE). July 7, 2026 Back to top ```json {"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/#article", "headline": "Capacitor In-App Browser Plugin", "name": "Capacitor In-App Browser Plugin", "description": "Capacitor plugin to open URLs in the external browser, the system browser, or an embedded web view on Android, iOS, and the web.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/#software", "name": "Capacitor In-App Browser Plugin", "description": "Capacitor plugin to open URLs in the external browser, the system browser, or an embedded web view on Android, iOS, and the web.", "url": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]} ```