Use ngCordova inAppBrowser executeScript interacting with remote WebView content

Even the idea/solution very straight forward, but still, I learned ngCordova's inAppBrowser the hard way.

I am using cordovaInAppBrowser to handle my remote content in mobile's WebView.
Tutorials accessible out there mostly give you the idea of how it works in direct content display, like:

// insert Javascript via code / file
$cordovaInAppBrowser.executeScript({
  code: 'alert("some text in the webview");'
});

Yes, it does tell the code is working in the webview,
but my problem is how can the value be manipulated and pass back to our cordova app?
So what we need is more than pop up alert box in webview.

As I learned,

1. executeScript code WOULD JUST work when we have target as "_blank"
   
   

   // executeScript must has "_blank" as target
   $cordovaInAppBrowser.open(YOUR_URL, '_blank');
   

   
   
2. the executeScript code would just run once as inAppBrowser page load/refresh depend on the events triggered:

• $cordovaInAppBrowser:exit
• $cordovaInAppBrowser:loaderror
• $cordovaInAppBrowser:loadstop
• $cordovaInAppBrowser:loadstart

So what you can do with this executeScript feature is to 'grab' your expected variable.

$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
  $cordovaInAppBrowser.executeScript({
    code: "var executable = function(data) { return data; }; executable(yourJsVariable || null);"
  }).then(function(data) {
    // Do something here with your obtained value
    if (angular.isObject(data)) {
      console.log(data);
    }
  });
});

In my case above, my detection of yourJsVariable starts as the page load of the inAppBrowser stops.

Reference: Issue injecting external script with executeScript method in Cordova
(The reference above is the best working example code I found so far.)

Cordova, store image from data URL or base64

In order to get image resized and store the image right away, we need some workaround to achieve this result.

First, resize the image into thumbnail-like size
2nd, store the image into targeted directory

This is achievable with Phonegap-image-resizer

$window.imageResizer.resizeImage(function(resizedImage) {

  // Store image into local
  $window.imageResizer.storeImage(function(response) { // cache
    var filePath = response.filename,
        pathOnly = filePath.substring(0, sourceFile.lastIndexOf('/')) + '/',
        filename = filePath.split('/').pop().replace(/\#(.*?)$/, '').replace(/\?(.*?)$/, '');


    // store file into targeted location here with 
    // cordova official File plugin
    $cordovaFile.moveFile(pathOnly, filename, cordova.file.dataDirectory).then(function(success) {
      console.log(success);
    }, function(error) {
      console.log(errir);
    });


  }, function(error) {
    return error;

  }, resizedImage.imageData, {
    imageDataType: ImageResizer.IMAGE_DATA_TYPE_BASE64,
    format: 'jpg',
    filename: // new name,
    directory: // location to store,
    quality: 80
  });

}, function(error) {
  return error;

}, photo.url, 0.2, 0.2, {
  imageDataType: ImageResizer.IMAGE_DATA_TYPE_URL,
  resizeType: ImageResizer.RESIZE_TYPE_FACTOR,
  format: 'jpg'
});

Two parts here:


TL;DR

1st step, $window.imageResizer.resizeImage will resize the image
2nd step, $window.imageResizer.storeImage store image

Cursory go through resizeImage.js to better understand how to utilise the code.

Reference: Converting Large Images to Base64Strings in Ionic Framework