Chrome扩展（Plasmo+Supabase）右键菜单首次打开数据更新延迟问题

你的问题核心在于右键菜单弹出时机和异步数据获取/菜单创建的时序不匹配：Chrome右键菜单是即时渲染的，当你右键点击触发事件时才开始请求Supabase数据并创建菜单，此时菜单已经开始显示，所以首次看到的是旧数据；第二次点击时，上一次的异步操作已完成，菜单更新完毕，因此显示正确。

核心解决方案：提前预加载+按需更新 #

不要等到右键点击时才拉取数据，而是提前把数据缓存好，右键点击时直接用缓存数据更新菜单，同时在数据可能变化的时机主动刷新缓存和菜单。

具体实现步骤 #

1. 预加载并缓存数据
   在扩展背景脚本（Plasmo的background.ts）启动时，以及用户登录状态变化、数据可能更新的时机，主动从Supabase获取数据并缓存：

// background.ts
import { Storage } from "@plasmohq/storage"

const storage = new Storage()
let cachedLinks = []

// 初始化加载数据
async function loadLinks() {
  cachedLinks = await fetchUserLinks()
  await storage.set("userLinks", cachedLinks)
}

// 扩展启动时加载
loadLinks()

// 监听数据更新事件（比如用户在popup修改了链接）
chrome.runtime.onMessage.addListener(async (message) => {
  if (message.type === "links-updated") {
    await loadLinks()
    updateContextMenu()
  }
})

2. 优化菜单更新逻辑
   避免每次删除所有菜单再重建，改为检查菜单是否存在，存在则更新子项，不存在再创建，减少异步操作耗时：

// background.ts
async function updateContextMenu() {
  // 检查主菜单是否存在，不存在则创建
  try {
    await chrome.contextMenus.get("context-menu")
  } catch {
    await chrome.contextMenus.create({
      id: "context-menu",
      title: "ExtensionName",
      contexts: ["editable"]
    })
    await chrome.contextMenus.create({
      id: "my-links",
      parentId: "context-menu",
      title: "My Links",
      contexts: ["editable"]
    })
  }

  // 删除旧的子链接项
  const existingLinks = await chrome.contextMenus.getAll()
  existingLinks.forEach(item => {
    if (item.id.startsWith("link-")) {
      chrome.contextMenus.remove(item.id)
    }
  })

  // 添加新的子链接项
  cachedLinks.forEach((link, index) => {
    chrome.contextMenus.create({
      id: `link-${index}`,
      parentId: "my-links",
      title: link.short_name,
      contexts: ["editable"]
    })
  })
}

// 监听右键菜单即将显示的事件，强制刷新菜单
chrome.contextMenus.onShown.addListener(async () => {
  // 同步最新数据
  cachedLinks = await fetchUserLinks()
  await updateContextMenu()
  // 强制Chrome重新渲染菜单
  chrome.contextMenus.refresh()
})

3. 替换原消息监听逻辑
   原来的refresh-context-menu消息可直接调用updateContextMenu()，或改用onShown事件触发更新，更贴合右键菜单生命周期。

关键注意点 #

• 用chrome.contextMenus.onShown事件：该事件在右键菜单即将显示前触发，配合chrome.contextMenus.refresh()可强制Chrome渲染最新菜单。
• 减少重复删除重建菜单：直接更新子项能降低延迟，提升首次加载的响应速度。
• 缓存数据：减少Supabase重复请求，同时在数据变化时主动更新缓存和菜单，保证数据一致性。

内容的提问来源于stack exchange，提问作者adm