Dropbox and Box choosers don't work on default Chrome page

Question

I have a Chrome extension AngularJS app that implements the Dropbox and Box file chooser APIs. The extension runs within the page context via content scripts.

Everything works great except when running it on the default "New Tab" page - the chooser opens up and you can pick files but clicking the buttons on the chooser doesn't send any response back and the chooser popup just sits there. It only starts working after you navigate somewhere (anywhere), and refreshing the default page doesn't help. Here's my code, but it's standard per the respective Dropbox and Box APIs:

Dropbox:

    var dropboxOptions = {
        success: function(files) {
            $scope.$apply(function() {
                for (var i = 0; i < files.length; i++)
                    $scope.attachments.push({"link" : files[i].link, "name" : files[i].name, "provider" : "DROPBOX"});
            });
        },
        cancel: function() {},
        multiselect: true
    };
    $scope.dropBoxAttachment = function() {
        Dropbox.choose(dropboxOptions);
    };

Box:

    var boxOptions = {'clientId': MY_CLIENT_ID, 'linkType': 'shared', 'multiselect': true};
    var boxSelect = new BoxSelect(boxOptions);
    boxSelect.success(function(response) {
        $scope.$apply(function() {
            for (var i = 0; i < response.length; i++)
                $scope.attachments.push({"link" : response[i].url, "name" : response[i].name, "provider" : "BOX"});
        });
        boxSelect.closePopup();
    });
    boxSelect.cancel(function() {
        boxSelect.closePopup();
    });
    $scope.boxAttachment = function() {
        boxSelect.launchPopup();
    };

With respect to the Dropbox Chooser at least, there may not be a way to make this work, depending on what capabilities the new tab page supports. Are you getting any errors in the console though? (Be sure to check on both the host page and the Chooser itself.) That may give us a bit more insight into what is failing exactly. — Greg
Unfortunately, there's nothing reported to the console on either page. :( — Abe Hendlish

Peter Peter · Accepted Answer · 2014-07-12T04:30:52

The file picker uses window.postMessage to pass messages between the file picker window and the 3rd party page. Chrome extensions require a different method for message passing. https://developer.chrome.com/extensions/messaging.

Dropbox and Box choosers don't work on default Chrome page

1 Answers