Capacitor plugin in app browser with urlChangeEvent, two way communication, camera and microphone usage, etc.

The official Capacitor Browser plugin has strict security limitations that prevent advanced features. InAppBrowser removes these restrictions, enabling:

• Two-way communication between your app and the browser
• JavaScript injection for dynamic content manipulation
• Camera and microphone access within the browser context
• URL change monitoring for navigation tracking
• Custom toolbars and UI for branded experiences
• Cookie and cache management for session control
• Custom sizes for extra control of the display position

Perfect for OAuth flows, embedded web apps, video calls, and any scenario requiring deep integration with web content.

The most complete doc is available here: https://capgo.app/docs/plugins/inappbrowser/

npm install @capgo/inappbrowser
npx cap sync

import { InAppBrowser } from '@capgo/inappbrowser'

InAppBrowser.open({ url: "YOUR_URL" });

By default, the webview opens in fullscreen. You can set custom dimensions to control the size and position:

import { InAppBrowser } from '@capgo/inappbrowser'

// Open with custom dimensions (400x600 at position 50,100)
InAppBrowser.openWebView({
  url: "YOUR_URL",
  width: 400,
  height: 600,
  x: 50,
  y: 100
});

// Update dimensions at runtime
InAppBrowser.updateDimensions({
  width: 500,
  height: 700,
  x: 100,
  y: 150
});

Touch Passthrough: When custom dimensions are set (not fullscreen), touches outside the webview bounds will pass through to the underlying Capacitor webview, allowing the user to interact with your app in the exposed areas. This enables picture-in-picture style experiences where the InAppBrowser floats above your content.

To create a webView with a 20px bottom margin (safe margin area outside the browser):

import { InAppBrowser } from '@capgo/inappbrowser'

InAppBrowser.openWebView({
  url: "YOUR_URL",
  enabledSafeBottomMargin: true
});

Web platform is not supported. Use window.open instead.

https://github.com/Cap-go/demo-app/blob/main/src/views/plugins/Web.vue

Add the following to your AndroidManifest.xml file:

    <uses-permission android:name="android.permission.CAMERA" />
		<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
		<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Then the permission will be asked when the camera is used.

Add the following to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>We need access to the camera to record audio.</string>

Add the following to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

Then the permission will be asked when the microphone is used.

Add the following to your Info.plist file:

<key>NSMicrophoneUsageDescription</key>
<string>We need access to the microphone to record audio.</string>

Add the following to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Then the permission will be asked when location is requested by a website in the webview.

Add the following to your Info.plist file:

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need access to your location to provide location-based services.</string>

With this plugin you can send events from the main app to the inappbrowser and vice versa.

The data is sent as a JSON object, so no functions or other non-JSON-serializable types are allowed.

InAppBrowser.postMessage({ detail: { message: "myMessage" } });

window.addEventListener("messageFromNative", (event) => {
  console.log(event);
});

window.mobileApp.postMessage({ detail: { message: "myMessage" } });

InAppBrowser.addEventListener("messageFromWebview", (event) => {
  console.log(event);
});

window.mobileApp.close();

• goBack()
• open(...)
• clearCookies(...)
• clearAllCookies()
• clearCache()
• getCookies(...)
• close(...)
• openWebView(...)
• executeScript(...)
• postMessage(...)
• setUrl(...)
• addListener('urlChangeEvent', ...)
• addListener('buttonNearDoneClick', ...)
• addListener('closeEvent', ...)
• addListener('confirmBtnClicked', ...)
• addListener('messageFromWebview', ...)
• addListener('browserPageLoaded', ...)
• addListener('pageLoadError', ...)
• removeAllListeners()
• reload()
• updateDimensions(...)
• Interfaces
• Type Aliases
• Enums

goBack() => Promise<{ canGoBack: boolean; }>

Navigates back in the WebView's history if possible

Returns: Promise<{ canGoBack: boolean; }>

Since: 7.21.0

open(options: OpenOptions) => Promise<any>

Open url in a new window fullscreen, on android it use chrome custom tabs, on ios it use SFSafariViewController

Returns: Promise<any>

Since: 0.1.0

clearCookies(options: ClearCookieOptions) => Promise<any>

Clear cookies of url

Returns: Promise<any>

Since: 0.5.0

clearAllCookies() => Promise<any>

Clear all cookies

Returns: Promise<any>

Since: 6.5.0

clearCache() => Promise<any>

Clear cache

Returns: Promise<any>

Since: 6.5.0

getCookies(options: GetCookieOptions) => Promise<Record<string, string>>

Get cookies for a specific URL.

Returns: Promise<Record<string, string>>

close(options?: CloseWebviewOptions | undefined) => Promise<any>

Close the webview.

Returns: Promise<any>

openWebView(options: OpenWebViewOptions) => Promise<any>

Open url in a new webview with toolbars, and enhanced capabilities, like camera access, file access, listen events, inject javascript, bi directional communication, etc.

JavaScript Interface: When you open a webview with this method, a JavaScript interface is automatically injected that provides:

• window.mobileApp.close(): Closes the webview from JavaScript
• window.mobileApp.postMessage({detail: {message: "myMessage"}}): Sends a message from the webview to the app, detail object is the data you want to send to the webview

Returns: Promise<any>

Since: 0.1.0

executeScript({ code }: { code: string; }) => Promise<void>

Injects JavaScript code into the InAppBrowser window.

postMessage(options: { detail: Record<string, any>; }) => Promise<void>

Sends an event to the webview(inappbrowser). you can listen to this event in the inappbrowser JS with window.addEventListener("messageFromNative", listenerFunc: (event: Record<string, any>) => void) detail is the data you want to send to the webview, it's a requirement of Capacitor we cannot send direct objects Your object has to be serializable to JSON, so no functions or other non-JSON-serializable types are allowed.

setUrl(options: { url: string; }) => Promise<any>

Sets the URL of the webview.

Returns: Promise<any>

addListener(eventName: 'urlChangeEvent', listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>

Listen for url change, only for openWebView

Returns: Promise<PluginListenerHandle>

Since: 0.0.1

addListener(eventName: 'buttonNearDoneClick', listenerFunc: ButtonNearListener) => Promise<PluginListenerHandle>

Returns: Promise<PluginListenerHandle>

addListener(eventName: 'closeEvent', listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>

Listen for close click only for openWebView

Returns: Promise<PluginListenerHandle>

Since: 0.4.0

addListener(eventName: 'confirmBtnClicked', listenerFunc: ConfirmBtnListener) => Promise<PluginListenerHandle>

Will be triggered when user clicks on confirm button when disclaimer is required, works with openWebView shareDisclaimer and closeModal

Returns: Promise<PluginListenerHandle>

Since: 0.0.1

addListener(eventName: 'messageFromWebview', listenerFunc: (event: { detail: Record<string, any>; }) => void) => Promise<PluginListenerHandle>

Will be triggered when event is sent from webview(inappbrowser), to send an event to the main app use window.mobileApp.postMessage({ "detail": { "message": "myMessage" } }) detail is the data you want to send to the main app, it's a requirement of Capacitor we cannot send direct objects Your object has to be serializable to JSON, no functions or other non-JSON-serializable types are allowed.

This method is inject at runtime in the webview

Returns: Promise<PluginListenerHandle>

addListener(eventName: 'browserPageLoaded', listenerFunc: () => void) => Promise<PluginListenerHandle>

Will be triggered when page is loaded

Returns: Promise<PluginListenerHandle>

addListener(eventName: 'pageLoadError', listenerFunc: () => void) => Promise<PluginListenerHandle>

Will be triggered when page load error

Returns: Promise<PluginListenerHandle>

removeAllListeners() => Promise<void>

Remove all listeners for this plugin.

Since: 1.0.0

reload() => Promise<any>

Reload the current web page.

Returns: Promise<any>

Since: 1.0.0

updateDimensions(options: DimensionOptions) => Promise<void>

Update the dimensions of the webview. Allows changing the size and position of the webview at runtime.

Omit<HttpCookie, 'key' | 'value'>

Construct a type with the properties of T except for those in type K.

Pick<T, Exclude<keyof T, K>>

From T, pick a set of properties whose keys are in the union K

{ [P in K]: T[P]; }

Exclude from T those types that are assignable to U

T extends U ? never : T

Construct a type with a set of properties K of type T

{ [P in K]: T; }

Omit<HttpCookie, 'key' | 'value'>

(state: UrlEvent): void

(state: object): void

(state: BtnEvent): void

Credits

• WKWebViewController - for iOS
• CapBrowser - For the base in capacitor v2