javascript，在chrome web应用中创建窗口，如何包含成功调用新窗口功能的承诺？

Question

I want to create a window and when it is created, run a function that has been pre-loaded. I do have to wait until the window is created, otherwise the function is not available and fails. And I'd say I can do it with a promise.

How to do it? Here there's the code with my attempt to do it

one().then(function() {
  new_panel.contentWindow.load_content(something);
})

function one() {
  var promise = chrome.app.window.create('empty.html', 
  {
    id: 'protein_panel',
    outerBounds: {
      width: 300,
      height: 800,
    },
  },
  function(createdWindow) {
    createdWindow.contentWindow.load_content = function(data) {
      createdWindow.contentWindow.document.getElementById('loading_content').appendChild(data);
    }
    new_panel = createdWindow;
  });

  return promise;
}

It complains about the then of the one() function: Uncaught TypeError: Cannot read property 'then' of undefined

UPDATE: Slightly modified code, still doesn't work, I've used the promise from angular since I'm using it

one().then(function() {
  new_panel.contentWindow.load_content(something);
})

function one() {
  return chrome.app.window.create('empty.html', 
  {
    id: 'protein_panel',
    outerBounds: {
      width: 300,
      height: 800,
    },
  },
  function(createdWindow) {
    createdWindow.contentWindow.load_content = function(data) {
      createdWindow.contentWindow.document.getElementById('loading_content').appendChild(data);
    }
    new_panel = createdWindow;

    var deferred = $q.defer();
    deferred.resolve();
    console.log(deferred.promise)
    return deferred.promise;
  });
}

In theory, deferred.promise should only be returned when it is resolved, but it is like the then() function is executed before it actually happens. Why?

UPDATE2: or another way to do the same (doesn't work either)

one();

function one() {
  chrome.app.window.create('empty.html', 
  {
    id: 'protein_panel',
    outerBounds: {
      width: 300,
      height: 800,
    },
  },
  function(createdWindow) {
    createdWindow.contentWindow.load_content = function(data) {
      createdWindow.contentWindow.document.getElementById('loading_content').appendChild(data);
    }
    new_panel = createdWindow;

    var deferred = $q.defer();
    deferred.resolve();
    console.log('first '+deferred.promise)
    return deferred.promise;
  }).then(function() {
    console.log('second')
    new_panel.contentWindow.load_content(something);
  });
}

The log 'second' is printed before 'first'. Is there anything wrong with the code?

Answer 1

You want to synchronously return a promise from one() and resolve the promise with the new window once it has been created:

one().then(function(createdWindow) {
  // Window has been created
  createdWindow.contentWindow.load_content(something);
})

function one() {
  // create a promise
  var deferred = $q.defer();

  chrome.app.window.create('empty.html', 
  {
    id: 'protein_panel',
    outerBounds: {
      width: 300,
      height: 800,
    },
  },
  function(createdWindow) {
     // resolve our promise and pass the window to the `then` block
     deferred.resolve(createdWindow)
  });

  // synchronously return a promise
  return deferred.promise;
}