A simple technique to promisify Chrome extension API

Update:
Now you can use toPromise from crx-esm!

---

One of my pain when developing a Chrome extension is looking at the callback-based APIs. There are some polyfill promisified all the APIs. (e.g. webextension-polyfill)

If you just want some light-weight solution, here you are.

The simple trick is to take advantage of the truth that the callback function is always the last argument, and you can create a simple helper function to promisify the chrome API:

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

and use it like:

toPromise(chrome.tabs.query)({}).then(...);

This just works for me most of the time.

Comments

[Ivan Jeremic]

I would like to have a crossbrowser solution how would this look in Firefox?

[Hank Chiu]

Do you mean for Firefox extension?

[Ivan Jeremic]

The Extension API yes, simple develop once run in every browser.

[Hank Chiu]

From MDN, it says "Firefox also implements these APIs under the chrome namespace using callbacks".

So, I guess the code toPromise(chrome.tabs.query)({}).then(...); should work on Firefox as well.(hopefully)