feat(context-menu): refactor context menu items and update translation menu on tab activation

Author: tonyhu-012

entrypoints/background.ts

@@ -5,7 +5,7 @@ import { browser } from 'wxt/browser'
 import { defineBackground } from 'wxt/utils/define-background'
 
 import { INVALID_URLS } from '@/utils/constants'
-import { CONTEXT_MENU } from '@/utils/context-menu'
+import { CONTEXT_MENU, CONTEXT_MENU_ITEM_TRANSLATE_PAGE } from '@/utils/context-menu'
 import logger from '@/utils/logger'
 import { bgBroadcastRpc } from '@/utils/rpc'
 import { isTabValid } from '@/utils/tab'
@@ -50,6 +50,11 @@ export default defineBackground(() => {
   }
 
   browser.tabs.onActivated.addListener(async ({ tabId }) => {
+    // reset the translate context menu to default
+    await browser.contextMenus.update(CONTEXT_MENU_ITEM_TRANSLATE_PAGE.id, {
+      title: CONTEXT_MENU_ITEM_TRANSLATE_PAGE.title,
+      contexts: CONTEXT_MENU_ITEM_TRANSLATE_PAGE.contexts,
+    })
     const tab = await browser.tabs.get(tabId)
     const url = tab.url
     url && (await setPopupStatusBasedOnUrl(tabId, url))

entrypoints/content/composables/useTranslator.ts

@@ -16,6 +16,9 @@ import { showSettings } from '../utils/settings'
 async function _useTranslator() {
   // useToast must be called before the first await
   const toast = useToast()
+  onMounted(() => {
+    setTranslationMenuTargetLanguage(enabled.value, targetLocale.value)
+  })
   const userConfig = await getUserConfig()
   const targetLocale = userConfig.translation.targetLocale.toRef()
   const ollamaStatusStore = useOllamaStatusStore()
@@ -51,10 +54,6 @@ async function _useTranslator() {
     })
   }
 
-  onMounted(() => {
-    setTranslationMenuTargetLanguage(enabled.value, targetLocale.value)
-  })
-
   useEventListener(document, 'visibilitychange', async () => {
     if (document.visibilityState === 'visible') {
       setTranslationMenuTargetLanguage(enabled.value, targetLocale.value)

utils/context-menu.ts

@@ -10,27 +10,28 @@ type ContextMenuItem = {
   contexts: ContextTypeList
 }
 
+export const CONTEXT_MENU_ITEM_TRANSLATE_SELECTED_TEXT: ContextMenuItem = {
+  id: 'native-mind-selection-translate',
+  title: 'NativeMind: Translate selected text',
+  contexts: [ContextType.SELECTION],
+}
+
+export const CONTEXT_MENU_ITEM_TRANSLATE_PAGE: ContextMenuItem = {
+  id: 'native-mind-page-translate',
+  title: 'NativeMind: Translate this page',
+  contexts: [ContextType.PAGE],
+}
+
+export const CONTEXT_MENU_ITEM_SETTINGS: ContextMenuItem = {
+  id: 'native-mind-settings',
+  title: 'Settings',
+  contexts: [ContextType.ACTION],
+}
+
 export const CONTEXT_MENU: ContextMenuItem[] = [
-  {
-    id: 'native-mind-page-translate',
-    title: 'NativeMind: Translate this page',
-    contexts: [ContextType.PAGE],
-  },
-  {
-    id: 'native-mind-selection-translate',
-    title: 'NativeMind: Translate selected text',
-    contexts: [ContextType.SELECTION],
-  },
-  {
-    id: 'native-mind-settings',
-    title: 'Settings',
-    contexts: [ContextType.ACTION],
-  },
-  // {
-  //   id: 'native-mind-selection-translate',
-  //   title: 'NativeMind: Writing Tools',
-  //   contexts: [ContextType.EDITABLE],
-  // },
+  CONTEXT_MENU_ITEM_TRANSLATE_PAGE,
+  CONTEXT_MENU_ITEM_TRANSLATE_SELECTED_TEXT,
+  CONTEXT_MENU_ITEM_SETTINGS,
 ]
 
 export type ContextMenu = typeof CONTEXT_MENU