AndroidBrowser AndroidBrowserPopup

The default Cordova InAppBrowser (WebView in iOS terminology) is pretty ugly (different kinds of ugly on iOS and Android) and, besides, we needed to add a Jibebuy toolbar icon so users can save their favorite houses, cars, etc., in Jibebuy. So I decided to figure out how to customize the Cordova InAppBrowser. This required a significant dive into Objective C and Java native code.

My favorite InAppBrowser is the one included with Twitter. It is small, simple and allows you to change orientation (take that Facebook!). The Cordova InAppBrowser is implemented as a plugin. Like many plugins that offer native functionality to Cordova apps, it has different implementations for various platforms. Not all the platforms are supported, but typically, iOS and Android. The Cordova InAppBrowser plugin supports both. As with other native plugins I’ve used the customization capabilities are limited and different on different platforms. I decided that the “quick and dirty” approach was to copy and modify the plugin source code. Fortunately, I had already setup a system to apply patches to Cordova plugins, so, though changing the code is a hack, at least it is repeatable and easy to use.

iOSBrowser iOSBrowserPopup

As you can see in the images above, I was able to add the Jibebuy icon and popup to the browser’s toolbar. The popup is another WebView that runs the same HTML, CSS and JavaScript as our Chrome Browser Extension!

One quirk about my design is that, because the address bar is editable, Jibebuy allows “unrestricted web access”  and is tagged with “You must be at least 17 years old to download this app” on the iOS App Store. Other apps like Facebook and Twitter avoid this designation by only allowing you to open URLs input into other parts of their app – the URL in their InAppBrowser’s toolbar is read only. Personally, I think this is a silly distinction, but Apple is the gatekeeper for their walled garden! If we get questions or complaints, I can change the control to be read only (as was the default for the stock Cordova InAppBrowser).