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