I'm building a Chrome extension with the Plasmo and Supabase, where I fetch data from whenever the browser's context menu is opened, using a broadcasted contextmenu event. I aim to dynamically update context menu items (child elements) with the fetched data.
The problem is that on the first right-click, the context menu shows the correct number of child items, but their titles reflect outdated data (e.g., from a previous fetch or initial state). Only on the second context menu open do the titles update correctly with the latest data.
How can I ensure that the context menu items are updated with fresh data immediately on the first open? I was trying different approaches without any luck so far.
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'refresh-context-menu') {
chrome.contextMenus.removeAll(() => {
fetchUserLinks().then(links => {
chrome.contextMenus.create({
id: "context-menu",
title: "ExtensionName",
contexts: ["editable"]
}, () => {
chrome.contextMenus.create({
id: "my-links",
parentId: "context-menu",
title: "My Links",
contexts: ["editable"]
}, () => {
links.forEach((link, index) => {
chrome.contextMenus.create({
id: `link-${index}`,
parentId: "my-links",
title: link.short_name,
contexts: ["editable"]
})
})
})
})
})
})
}
})
mousedownevent instead ofcontextmenu, but it won't help you if fetchUserLinks() takes a long time. 2) Instead of remove+create use update(). Create the items just once in chrome.runtime.onInstalled event.mousedown? This will not create chrome context menu entry.