DEV Community

loading...

A simple technique to promisify Chrome extension API

Hank Chiu
I help companies refactor/rearchitect their codebase to make it scalable, maintainable and readable.
Updated on ・1 min read

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.

Discussion (4)

Collapse
ivanjeremic profile image
Ivan Jeremic

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

Collapse
hankchiutw profile image
Hank Chiu Author

Do you mean for Firefox extension?

Collapse
ivanjeremic profile image
Ivan Jeremic

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

Thread Thread
hankchiutw profile image
Hank Chiu Author

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)