Ionic 5 - Open URLs in Chrome Custom Tabs with Cordova and Ionic Native 5

Ionic 5 - Open URLs in Chrome Custom Tabs with Cordova and Ionic Native 5

Chrome custom tabs allows you to open a in app chrome tab in your Ionic 5 mobile app to open external URLs and web sites.

In this tutorial we are going to see a simple Ionic 5 example that makes use of Chrome In App Custom tabs.

Creating a New Ionic 5/Angular App

The first step will be creating a new app using the Ionic CLI 5. Simply run the following command:

ionic start ChromeCustomTabsExample blank 
cd ChromeCustomTabsExample 

Installing the Chrome Browertab Cordova and Ionic Native Plugins

Next, install the required plugins from npm:

$ ionic cordova plugin add cordova-plugin-browsertab --save 
$ npm install --save @ionic-native/browser-tab    

Now you need to add this plugin to your app main module.

Head over to the src/app/app.module.ts file and update it as follows:

/* ... */
import { BrowserTab } from '@ionic-native/browser-tab';

declarations: [
imports: [
bootstrap: [IonicApp],
entryComponents: [
providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
export class AppModule {}        

Now, we are ready to use BrowserTab by injecting it in any component from where we want to launch a chrome custom tab.

Open the src/pages/home/home.ts file and add a method to open an url:

import { Component } from '@angular/core';
import { BrowserTab } from '@ionic-native/browser-tab';

selector: 'home',
templateUrl: 'home.html',
export class HomePage {

constructor(private browserTab: BrowserTab) {

        .then((isAvailable: boolean) => {

        if(isAvailable) {


        } else {

            // if custom tabs are not available you may  use InAppBrowser



You can now add a button to trigger the method as follows:

<button ion-button (click)="openUrl()"> Open Techiediaries</button>


To test your application, start by adding a target Android platform then build and run your Ionic 5 app in a real mobile device.