Sidepanel open issue based on subscription status

[vinodkumarh]

Hi,
Thanks for creating this package and community.

I am trying to create an extension with subscription. I want to open sidepanel based on user's status. But get an error as shown below. Pasting the background.js code (until the part where it errors out) below as well. I am newbie and almost sure I am making some dumb mistake. Can someone please help me identify the error. Thank you!

Uncaught (in promise) Error: sidePanel.open() may only be called in response to a user gesture.

const GOOGLE_SHEETS_ORIGIN = 'https://docs.google.com';

importScripts('extpay.js');
var extpay = ExtPay('octo-with-ext-pay');
extpay.startBackground();

async function checkUserSubscription() {
const user = await extpay.getUser();
return user.subscriptionStatus;
}

async function handleSubscription(tabId) {
const user = await extpay.getUser();
const now = new Date();
const sevenDays = 1000 * 60 * 60 * 24 * 7; // seven days in milliseconds

if (user.subscriptionStatus == 'active') {
// User has an active subscription
await chrome.sidePanel.setOptions({
tabId: tabId,
path: 'sidepanel.html',
enabled: true
});
} else if (user.trialStartedAt && (now - user.trialStartedAt) < sevenDays) {
// User's trial is active
await chrome.sidePanel.setOptions({
tabId: tabId,
path: 'sidepanel.html',
enabled: true
});
} else if (user.trialStartedAt === null) {
// User hasn't trialed before
await extpay.openTrialPage();
return false; // Indicate no side panel opening
} else {
await extpay.openPaymentPage();
return false; // Indicate no side panel opening
}

return true; // Indicate side panel should be opened
}

// Allows users to open the side panel by clicking on the action toolbar icon
chrome.action.onClicked.addListener(async () => {
chrome.storage.local.get('foo', async function() {
var extpay = ExtPay('octo-with-ext-pay');
const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (activeTab) {
const shouldOpenSidePanel = await handleSubscription(activeTab.id);
if (shouldOpenSidePanel) {
// Set panel behavior to open on action click and open the side panel
chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
.then(() => {
chrome.sidePanel.open({ tabId: activeTab.id });
})
.catch((error) => console.error(error));
}
}
});
});