DEV Community

Hank Chiu
Hank Chiu

Posted on • Updated on

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);
    });
  };
}
Enter fullscreen mode Exit fullscreen mode

and use it like:

toPromise(chrome.tabs.query)({}).then(...);
Enter fullscreen mode Exit fullscreen mode

This just works for me most of the time.

Top comments (4)

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

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

Collapse
 
hankchiutw profile image
Hank Chiu

Do you mean for Firefox extension?

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

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

Thread Thread
 
hankchiutw profile image
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)