Javascript (typescript) Chrome extension, function callback as promises?

Question

for a code like this

let anotherFolder='whatever';
let anotherFolder2='whatever';

chrome.bookmarks.create( {title:'whatever2'}, function( parentFolder ) {
  chrome.bookmarks.move( anotherFolder, {parentId: parentFolder.id}, function() {
    chrome.bookmarks.removeTree( anotherFolder2, function() {
      resolve();
    });
  });
});

can I transform it to chain functions? Something like

let anotherFolder='whatever';
let anotherFolder2='whatever';

return new Promise(function(resolve){
  chrome.bookmarks.create( {title:'whatever2'}, function( parentFolder ) {
    resolve(parentFolder);
  }).then( (parentFolder) => {
    chrome.bookmarks.move( anotherFolder, {parentId: parentFolder.id}, function() {
      resolve();
    })
  }).then () => {
    chrome.bookmarks.removeTree( anotherFolder2, function() {
      resolve();
    });
  });
});

Because I get the error of 'Property 'then' does not exist on type 'void'.'

*this is javascript-typescript, but it shouldn't matter here (?)

Answer 1

You'll need to "promisify" any chrome.bookmarks.* functions - this, incidently, makes them work the same as browser.bookmarks.* functions in Firefox and (eventually) Edge Web Extensions

Promisifying the functions you use

let create = p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.create(p1, resolve);
});
let move = (p1, p2) =>  new Promise((resolve, reject) => {
    chrome.bookmarks.move(p1, p2, resolve);
});
let removeTree = p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.removeTree(p1, resolve);
});

Then you can use these functions as follows:

let anotherFolder='whatever';
let anotherFolder2='whatever';


create({title:'whatever2'})
.then(parentFolder => move(anotherFolder, {parentId: parentFolder.id}))
.then(() => removeTree(anotherFolder));

If you are thinking of having your extension available in Firefox (and eventually Edge)

not tested

let create = browser.bookmarks.create || p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.create(p1, resolve);
});
let move = browser.bookmarks.move || (p1, p2) => new Promise((resolve, reject) => {
    chrome.bookmarks.move(p1, p2, resolve);
});
let removeTree = browser.bookmarks.removeTree || p1 => new Promise((resolve, reject) => {
    chrome.bookmarks.removeTree(p1, resolve);
});

Then your code above should work in any Web Extension

Answer 2

The accepted answer is good, but there are libraries that already do this for you, such as chrome-extension-async. That also includes TypeScript definitions for the promisified callbacks.

Install it with bower

bower install chrome-extension-async

Or npm

npm i chrome-extension-async

Or download chrome-extension-async.js file and include it directly:

<script type="text/javascript" src="chrome-extension-async.js"></script>

You can use this library with promises, which allows you to chain functions (rather than nest callbacks):

function whatever(anotherFolder, anotherFolder2) {
    return  chrome.bookmarks.create({title:'whatever2'}).
        then(parentFolder => 
            chrome.bookmarks.move(anotherFolder, {parentId: parentFolder.id})).
        then(() => 
            chrome.bookmarks.removeTree(anotherFolder2));
}

I strongly recommend that you use the (fairly new) async and await syntax, and TypeScript can transpile it to older versions of JS if you want. Then your code becomes:

async function whatever(anotherFolder, anotherFolder2) {
    const parentFolder = await chrome.bookmarks.create({title:'whatever2'});
    await chrome.bookmarks.move(anotherFolder, {parentId: parentFolder.id});
    await chrome.bookmarks.removeTree(anotherFolder2);
}

This does the same thing as the promise based code, but bubbles exceptions up and make it easier to use with logic flow (if branching logic can be messy even with promises).