如何在Chrome扩展程序中使用promises?

时间:2018-06-13 18:58:18

标签: google-chrome google-chrome-extension promise extension-methods

我要做的是创建一个chrome扩展程序,使用promises创建新的嵌套书签文件夹。

执行此操作的功能是 chrome.bookmarks.create()。但我不能只是 循环这个函数,因为chrome.bookmarks.create是异步的。我需要等到创建文件夹,然后获取其新ID,然后再继续使用它。

承诺似乎是要走的路。不幸的是,我找不到一个使用异步调用的最小工作示例,该调用具有自己的回调,如 chrome.bookmarks.create。

我已阅读了一些教程1234。我已经搜索了stackOverflow,但所有问题似乎都不是关于chrome扩展库的普通承诺。

我不想使用插件或库:没有node.js或jquery或Q等等。

我已经尝试过按照教程中的示例,但很多事情都没有意义。例如,教程声明:

  

promise构造函数接受一个参数 - 一个带有两个的回调   参数:解决和拒绝。

但后来我看到这样的例子:

  

const wait = ms =>新的Promise(resolve => setTimeout(resolve,ms));

这对我来说是一个谜。

另外,如果从未定义过它,如何调用 resolve()?教程中没有任何示例似乎与现实代码相匹配。另一个例子是:

function isUserTooYoung(id) {
   return openDatabase() // returns a promise   
.then(function(col) {return find(col, {'id': id});})

如何传入 col ,或获得任何结果!

因此,如果有人能够通过具有自己的回调的异步函数给我一个最小的promises工作示例,那将非常感激。

所以想要代码,所以这是我的非工作尝试:

//loop through all
function createBookmarks(nodes, parentid){  

  var jlen = nodes.length;
  var i;
  var node;
  for(var i = 0; i < nodes.length; i++){
        var node = nodes[i];

        createBookmark(node, parentid);
  }
}

//singular create
function createBookmark(node, parentid){  
      var bookmark = { 
    parentId : parentid,
    index : node['index'],
    title : node['title'],
    url : node['url']
  }

  var callback = function(result){
    console.log("creation callback happened.");
    return result.id;  //pass ID to the callback, too
  }

    var promise = new Promise(function(resolve, reject) {

        var newid = chrome.bookmarks.create(bookmark, callback)

      if (newid){
        console.log("Creating children with new id: " + newid);
        resolve( createBookmarks(bookmark.children, newid));
      }

    });
}

//allnodes already exists
createBookmarks(allnodes[0],"0");

只是不起作用。回调的结果总是未定义的,它应该是,我不知道promise对象如何改变任何东西。当我尝试使用promise.then()时,我同样神秘。

var newid = promise.then(  //wait for a response?
            function(result){
            return chrome.bookmarks.create(bookmark, callback); 
            }
        ).catch(function(error){
            console.log("error " + error);
        });  

        if (node.children) createBookmarks(node.children, newid);

同样,newid总是未定义的,因为bookmarks.create()当然是异步的。

感谢您提供任何帮助。

2 个答案:

答案 0 :(得分:2)

老实说,你应该使用web extension polyfill。手动宣传chrome API是浪费时间和容易出错的。

如果你绝对坚持,这就是你如何宣传 chrome.bookmarks.create 的一个例子。对于其他chrome。* API,您还必须拒绝回调的错误参数。

function createBookmark(bookmark) {
  return new Promise(function(resolve, reject) {
    try {
      chrome.bookmarks.create(bookmark, function (result) {
        if (chrome.runtime.lastError) reject(chrome.runtime.lastError)
        else resolve(result)
      })
    } catch (error) {
      reject(error)
    }
  })
}


createBookmark({})
  .then(function (result) {
     console.log(result)
   }).catch(function (error) {
     console.log(error)
   })

要创建多个书签,您可以:

function createBookmarks(bookmarks) {
  return Promise.all(
    bookmarks.map(function (bookmark) {
      return createBookmark(bookmark)
    })
  )
}

createBookmarks([{}, {}, {}, {}])
  .catch(function (error) {
    console.log(error)
  })

答案 1 :(得分:0)

利用约定,即回调函数始终是最后一个参数,我使用一个简单的辅助函数来简化chrome API:

0

并像这样使用它:

function toPromise(api) {
  return (...args) => {
    return new Promise((resolve) => {
      api(...args, resolve);
    });
  };
}

在我的用例中,它大部分时间都可以正常工作。