feat: side panel refactor

Author: tonyhu-012

.github/workflows/release.yml

@@ -24,9 +24,6 @@ jobs:
       contents: write
       pull-requests: write
 
-    outputs:
-      new_version: ${{ steps.get-version.outputs.version }}
-
     steps:
       - uses: actions/checkout@v4
         with:
@@ -61,6 +58,4 @@ jobs:
         id: get-version
         run: |
           VERSION=$(node -p "require('./package.json').version")
-          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
           echo "Released version: $VERSION" >> $GITHUB_STEP_SUMMARY
-          echo "RELEASE_VERSION=$VERSION" >> $GITHUB_ENV

…nts/content/components/ExternalImage.vue components/ExternalImage.vueentrypoints/content/components/ExternalImage.vue renamed to components/ExternalImage.vue entrypoints/content/components/ExternalImage.vue renamed to components/ExternalImage.vue

@@ -25,7 +25,10 @@ const imageCache = new LRUCache<string, string>({
 </script>
 
 <script setup lang="ts">
+import { useLogger } from '@/composables/useLogger'
+import { fileToDataURL } from '@/utils/base64'
 import { c2bRpc } from '@/utils/rpc'
+import { forRuntimes } from '@/utils/runtime'
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 const props = defineProps<{
@@ -35,27 +38,33 @@ const props = defineProps<{
 }>()
 
 const dataUrl = ref('')
+const logger = useLogger()
 
 const onError = () => {
   dataUrl.value = ''
 }
 
 watchEffect(async () => {
-  if (!props.src) {
+  const src = props.src
+  if (!src) {
     dataUrl.value = ''
     return
   }
-  const cached = imageCache.get(props.src)
+  const cached = imageCache.get(src)
   if (cached) {
     dataUrl.value = cached
     return
   }
-  const r = await c2bRpc.fetchAsDataUrl(props.src)
-  if ('dataUrl' in r) {
-    dataUrl.value = r.dataUrl
+  try {
+    const r = await forRuntimes({
+      content: () => c2bRpc.fetchAsDataUrl(src).then((r) => r.dataUrl),
+      default: () => fetch(src).then((res) => res.blob()).then((blob) => fileToDataURL(blob)),
+    })
+    dataUrl.value = r
   }
-  else {
-    dataUrl.value = props.src
+  catch (error) {
+    logger.error('Failed to fetch image', error)
+    onError()
   }
 })
 </script>

…ontent/components/MarkdownViewer.test.ts components/MarkdownViewer.test.tsentrypoints/content/components/MarkdownViewer.test.ts renamed to components/MarkdownViewer.test.ts entrypoints/content/components/MarkdownViewer.test.ts renamed to components/MarkdownViewer.test.ts

@@ -1,12 +1,10 @@
 import { mount, VueWrapper } from '@vue/test-utils'
-import { beforeEach, describe, expect, it } from 'vitest'
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest'
 import { fakeBrowser } from 'wxt/testing'
 
+import { resetFakeEntrypoint } from '@/tests/utils/fake-browser'
 import { sleep } from '@/utils/async'
 
-import { makeMarkdownIcon, makeParagraph, makeText } from '../utils/markdown/content'
-import MarkdownViewer from './MarkdownViewer.vue'
-
 async function waitForSelector<T extends VueWrapper, K extends (keyof HTMLElementTagNameMap)>(wrapper: T, selector: K, timeout?: number): Promise<VueWrapper<HTMLElementTagNameMap[K]>>
 async function waitForSelector<T extends VueWrapper, K extends (keyof SVGElementTagNameMap)>(wrapper: T, selector: K, timeout?: number): Promise<VueWrapper<SVGElementTagNameMap[K]>>
 async function waitForSelector<T extends VueWrapper, K extends string>(wrapper: T, selector: K, timeout?: number): Promise<VueWrapper<Element>>
@@ -27,8 +25,13 @@ describe('MarkdownViewer', () => {
     // See https://webext-core.aklinker1.io/fake-browser/reseting-state
     fakeBrowser.reset()
   })
+  beforeAll(() => {
+    resetFakeEntrypoint()
+  })
 
   it('should render directive correctly (text)', async () => {
+    const { makeText } = await import('@/entrypoints/sidepanel/utils/markdown/content')
+    const MarkdownViewer = (await import('./MarkdownViewer.vue')).default
     const wrapper = mount(MarkdownViewer, {
       props: {
         text: `# Hello World ${makeText('BIG TEXT', { size: 50 })}`,
@@ -41,6 +44,8 @@ describe('MarkdownViewer', () => {
   })
 
   it('should render directive correctly (icon)', async () => {
+    const { makeMarkdownIcon } = await import('@/entrypoints/sidepanel/utils/markdown/content')
+    const MarkdownViewer = (await import('./MarkdownViewer.vue')).default
     const wrapper = mount(MarkdownViewer, {
       props: {
         text: `Hello World ${makeMarkdownIcon('download')}`,
@@ -52,6 +57,8 @@ describe('MarkdownViewer', () => {
   })
 
   it('should render directive correctly (paragraph)', async () => {
+    const { makeParagraph } = await import('@/entrypoints/sidepanel/utils/markdown/content')
+    const MarkdownViewer = (await import('./MarkdownViewer.vue')).default
     const wrapper = mount(MarkdownViewer, {
       props: {
         text: `Hello World 

…ts/content/components/MarkdownViewer.vue components/MarkdownViewer.vueentrypoints/content/components/MarkdownViewer.vue renamed to components/MarkdownViewer.vue entrypoints/content/components/MarkdownViewer.vue renamed to components/MarkdownViewer.vue

@@ -16,7 +16,7 @@ import { ref, watchEffect } from 'vue'
 import IconMDLink from '@/assets/icons/md-link.svg?raw'
 import logger from '@/utils/logger'
 
-import { getIconSvg, IconName, unescapeDirectiveText } from '../utils/markdown/content'
+import { getIconSvg, IconName, unescapeDirectiveText } from '../entrypoints/sidepanel/utils/markdown/content'
 
 const log = logger.child('MarkdownViewer')
 

components/ModelSelector.vue

@@ -124,11 +124,11 @@ import IconRedirect from '@/assets/icons/redirect.svg?component'
 import ModelLogo from '@/components/ModelLogo.vue'
 import { useOllamaStatusStore } from '@/entrypoints/content/store'
 import { deleteOllamaModel } from '@/entrypoints/content/utils/llm'
-import { showSettings } from '@/entrypoints/content/utils/settings'
 import { OLLAMA_SEARCH_URL } from '@/utils/constants'
 import { formatSize } from '@/utils/formatter'
 import { useI18n } from '@/utils/i18n'
 import { SUPPORTED_MODELS } from '@/utils/llm/web-llm'
+import { showSettings } from '@/utils/settings'
 import { getUserConfig } from '@/utils/user-config'
 import { classNames } from '@/utils/vue/utils'
 
@@ -193,7 +193,7 @@ const onClickDelete = async (model: string) => {
 
 const onClick = () => {
   if (modelList.value.length === 0) {
-    showSettings(true, { scrollTarget: 'model-download-section' })
+    showSettings({ scrollTarget: 'model-download-section' })
   }
 }
 

…ints/content/components/RootProvider.vue components/RootProvider.vueentrypoints/content/components/RootProvider.vue renamed to components/RootProvider.vue entrypoints/content/components/RootProvider.vue renamed to components/RootProvider.vue

@@ -6,7 +6,7 @@
 import { useInjectContext } from '@/composables/useInjectContext'
 
 const props = defineProps<{
-  rootElement: HTMLDivElement
+  rootElement: HTMLElement
 }>()
 
 useInjectContext('selectorScrollListenElement').provide([props.rootElement])

composables/useExtensionEventListener.ts

@@ -0,0 +1,22 @@
+import { onScopeDispose } from 'vue'
+
+interface EventObject<L extends (...args: any[]) => void> {
+  addListener: (listener: L) => void
+  removeListener: (listener: L) => void
+}
+
+// 提取事件对象的监听器类型
+type ExtractListener<T> = T extends EventObject<infer L> ? L : never
+
+export function useExtensionEventListener<
+  T extends EventObject<(...args: any[]) => void>,
+  L extends ExtractListener<T> = ExtractListener<T>,
+>(
+  eventObject: T,
+  listener: L,
+) {
+  eventObject.addListener(listener)
+  onScopeDispose(() => {
+    eventObject.removeListener(listener)
+  })
+}

entrypoints/background/index.ts

@@ -3,87 +3,46 @@ import '@/utils/rpc'
 
 import { browser } from 'wxt/browser'
 import { defineBackground } from 'wxt/utils/define-background'
-import { storage } from 'wxt/utils/storage'
 
 import { INVALID_URLS } from '@/utils/constants'
 import { CONTEXT_MENU, CONTEXT_MENU_ITEM_TRANSLATE_PAGE, ContextMenuManager } from '@/utils/context-menu'
 import { useGlobalI18n } from '@/utils/i18n'
 import logger from '@/utils/logger'
 import { bgBroadcastRpc } from '@/utils/rpc'
-import { isTabValid } from '@/utils/tab'
-import { getTabKeys } from '@/utils/tab-store'
+import { registerTabStoreCleanupListener } from '@/utils/tab-store'
 import { registerDeclarativeNetRequestRule } from '@/utils/web-request'
 
 export default defineBackground(() => {
   if (import.meta.env.CHROME) {
     browser.storage.session.setAccessLevel({ accessLevel: 'TRUSTED_AND_UNTRUSTED_CONTEXTS' })
   }
   registerDeclarativeNetRequestRule()
-
-  const tabsWaitingForOpen = new Set<number>()
+  registerTabStoreCleanupListener()
 
   browser.action.setTitle({ title: 'NativeMind' })
 
-  browser.action.onClicked.addListener(async (tab) => {
-    logger.info('onClicked', tab)
-    if (tab.id) {
-      const validTab = await isTabValid(tab.id)
-      if (validTab) {
-        tabsWaitingForOpen.delete(tab.id)
-        await bgBroadcastRpc.emit('toggleContainer', { _toTab: tab.id })
-      }
-      else {
-        tabsWaitingForOpen.add(tab.id)
-      }
-    }
-  })
-
-  const setPopupStatusBasedOnUrl = async (tabId: number, url: string) => {
-    if (INVALID_URLS.some((regex) => regex.test(url))) {
-      await browser.action.setPopup({ popup: 'popup.html' })
-    }
-    else {
-      if (tabsWaitingForOpen.has(tabId)) {
-        tabsWaitingForOpen.delete(tabId)
-        await bgBroadcastRpc.emit('toggleContainer', { _toTab: tabId, open: true })
-      }
-      await browser.action.setPopup({ popup: '' })
-    }
-  }
+  browser.sidePanel.setPanelBehavior({ openPanelOnActionClick: true })
 
-  browser.tabs.onActivated.addListener(async ({ tabId }) => {
+  browser.tabs.onActivated.addListener(async () => {
     const { t } = await useGlobalI18n()
     // reset the translate context menu to default
     const contextMenuManager = await ContextMenuManager.getInstance()
     contextMenuManager.updateContextMenu(CONTEXT_MENU_ITEM_TRANSLATE_PAGE.id, {
       title: t(CONTEXT_MENU_ITEM_TRANSLATE_PAGE.titleKey),
       contexts: CONTEXT_MENU_ITEM_TRANSLATE_PAGE.contexts,
     })
-    const tab = await browser.tabs.get(tabId)
-    const url = tab.url
-    url && (await setPopupStatusBasedOnUrl(tabId, url))
   })
 
   browser.tabs.onRemoved.addListener(async (tabId, removeInfo) => {
     logger.info('tab removed', { tabId, removeInfo, isFirefox: import.meta.env.FIREFOX })
-    tabsWaitingForOpen.delete(tabId)
     bgBroadcastRpc.emit('tabRemoved', {
       tabId,
       ...removeInfo,
     })
-    if (import.meta.env.FIREFOX) {
-      // Firefox does not support session storage in content scripts, so we need to clean up the tab store
-      const keys = getTabKeys(tabId)
-      logger.info('Cleaning up tab store for removed tab', { tabId, keys })
-      await storage.removeItems(keys)
-    }
   })
 
   browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
     logger.info('tab updated', { tabId, changeInfo, tab })
-    if (tab.url) {
-      await setPopupStatusBasedOnUrl(tabId, tab.url)
-    }
 
     bgBroadcastRpc.emit('tabUpdated', {
       tabId,