fix: Improve capture handling in CameraButton and ensure permission request is processed correctly

NekoWings · NekoWings · commit bf8b882cc09b · 2025-11-07T18:23:30.000+08:00
diff --git a/entrypoints/sidepanel/components/Chat/CameraButton.vue b/entrypoints/sidepanel/components/Chat/CameraButton.vue
@@ -67,24 +67,25 @@ watch(currentModel, async () => {
 const showButton = computed(() => supportsVision.value)
 
 const handleCapture = async () => {
-  if (isCapturing.value || !props.attachmentSelectorRef) return
+  try {
+    if (isCapturing.value || !props.attachmentSelectorRef) return
 
-  // Check if adding a screenshot would exceed the combined limit
-  const currentAttachments = props.contextAttachmentStorage?.attachments ?? []
-  const imageAndScreenshotCount = currentAttachments.filter(
-    (attachment) => attachment.type === 'image' || attachment.type === 'captured-page',
-  ).length
+    // Permission request should be handled instantly when user clicks the button, so put it here
+    // Request permission and Capture the visible tab
+    const dataUrl = await s2bRpc.captureVisibleTab()
 
-  if (imageAndScreenshotCount >= MAX_IMAGE_COUNT) {
-    props.attachmentSelectorRef?.showErrorMessage(t('chat.input.attachment_selector.too_many_images', { max: MAX_IMAGE_COUNT }))
-    return
-  }
+    // Check if adding a screenshot would exceed the combined limit
+    const currentAttachments = props.contextAttachmentStorage?.attachments ?? []
+    const imageAndScreenshotCount = currentAttachments.filter(
+      (attachment) => attachment.type === 'image' || attachment.type === 'captured-page',
+    ).length
 
-  isCapturing.value = true
+    if (imageAndScreenshotCount >= MAX_IMAGE_COUNT) {
+      props.attachmentSelectorRef?.showErrorMessage(t('chat.input.attachment_selector.too_many_images', { max: MAX_IMAGE_COUNT }))
+      return
+    }
 
-  try {
-    // Capture the visible tab
-    const dataUrl = await s2bRpc.captureVisibleTab()
+    isCapturing.value = true
 
     if (!dataUrl) {
       throw new Error('Failed to capture screenshot')
diff --git a/utils/rpc/background-fns.ts b/utils/rpc/background-fns.ts
@@ -762,8 +762,9 @@ function getTabCaptureMediaStreamId(tabId: number, consumerTabId?: number) {
 }
 
 function captureVisibleTab(options?: Browser.tabs.CaptureVisibleTabOptions) {
-  const cachedWindowId = BackgroundWindowManager.getCurrentWindowId()
+  // For firefox, some feature need reload extension after permission granted
   browser.permissions.request({ origins: ['<all_urls>'] })
+  const cachedWindowId = BackgroundWindowManager.getCurrentWindowId()
   if (cachedWindowId) {
     const screenCaptureBase64Url = browser.tabs.captureVisibleTab(cachedWindowId, options ?? {})
     return screenCaptureBase64Url
