Unable to show popup message only in certain circumstances

Add-ons Development
#1

I’m working on an add-on which performs a lookup on my server for some data, and opens a compose window with the containing data. I’ve got everything working as expected, except for error handling. I’d like to show a popup with the error only when a lookup fails. Here’s what I have so far:

browser.messageDisplayAction.onClicked.addListener((tab) =>{
browser.messageDisplay.getDisplayedMessage(tab.id).then((message) => {
httpLookup().then((response) => {
if (response.status == “success”){
browser.compose.beginNew({})
}
else {
browser.messageDisplayAction.setPopup({‘popup’:‘error.html’});
browser.messageDisplayAction.openPopup();
browser.messageDisplayAction.setPopup({‘popup’:null});
}
})
});
})

The issue is that openPopup() is throwing the following error: Error: messageDisplayAction.openPopup may only be called from a user input handler. This error is not thrown when the function is placed on the second line (before getDisplayedMessage) or outside of any asynchronous function.

Is this behaviour even expected? I have no way to not call my server asynchronously so is there any other way I can get the popup loaded?

#2

Some APIs like openPopup can only be called in reaction to some user action. MDN has some more details: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions

#3

Yeah, some API can be called only in the current iteration of the user-action-triggered event loop. So you can’t use async API and then open popup.

As an alternative you can maybe use Notification API:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications
Or inject content script to current page that will show some notification on page - this could actually be a full popup window inside an iframe.

1 Like