diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3ebb7451..b207281e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,40 @@
 # Changelog
 
 
+## v1.2.0-beta.4
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.2.0-beta.3...v1.2.0-beta.4)
+
+### 🚀 Enhancements
+
+- **style:** Update ModelSelector container position ([1ddfcba](https://github.com/NativeMindBrowser/NativeMindExtension/commit/1ddfcba))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.2.0-beta.3
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.2.0-beta.2...v1.2.0-beta.3)
+
+### 🩹 Fixes
+
+- Implement URL validation and timeout handling for url like chrome webstore ([8e4726a](https://github.com/NativeMindBrowser/NativeMindExtension/commit/8e4726a))
+- Adjust textarea height handling and update tab selection order ([441d2d0](https://github.com/NativeMindBrowser/NativeMindExtension/commit/441d2d0))
+
+### 💅 Refactors
+
+- **auto-imports:** Disable auto imports ([8bb6192](https://github.com/NativeMindBrowser/NativeMindExtension/commit/8bb6192))
+- **lint:** Update eslint rules ([eda482f](https://github.com/NativeMindBrowser/NativeMindExtension/commit/eda482f))
+
+### ❤️ Contributors
+
+- Tony Hu ([@tonyhu-012](http://github.com/tonyhu-012))
+
+## v1.2.0-beta.2
+
+[compare changes](https://github.com/NativeMindBrowser/NativeMindExtension/compare/v1.2.0-beta.1...v1.2.0-beta.2)
+
 ## v1.2.0-beta.1
 
 
diff --git a/app.config.ts b/app.config.ts
index 59e7213d..f93afc06 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -1,4 +1,4 @@
-import { defineAppConfig } from '#imports'
+import { defineAppConfig } from 'wxt/utils/define-app-config'
 
 // Define types for your config
 declare module 'wxt/utils/define-app-config' {
diff --git a/components/AutoExpandTextArea.vue b/components/AutoExpandTextArea.vue
index f3fc4d7f..c6739383 100644
--- a/components/AutoExpandTextArea.vue
+++ b/components/AutoExpandTextArea.vue
@@ -7,8 +7,10 @@
     @input="onInput"
   />
 </template>
+
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { nextTick, ref, watch } from 'vue'
 
 const emit = defineEmits<{
   (e: 'input', ev: Event): void
@@ -19,18 +21,23 @@ const props = defineProps<{
   modelValue?: string
 }>()
 
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
 const inputValue = useVModel(props, 'modelValue', emit, {
-  passive: true,
   eventName: 'update:modelValue',
 })
 
-const onInput = (event: Event) => {
-  emit('input', event)
-  const textarea = event.target as HTMLTextAreaElement
+watch(inputValue, async () => {
+  await nextTick()
+  const textarea = textareaRef.value as HTMLTextAreaElement
+  if (!textarea) return
   textarea.style.height = 'auto' // Reset height to auto to shrink if needed
   // force a reflow to ensure the height is recalculated
   const _ = textarea.offsetHeight
   const scrollHeight = textarea.scrollHeight
   textarea.style.height = `${scrollHeight}px` // Set height to scrollHeight to expand
+})
+
+const onInput = (event: Event) => {
+  emit('input', event)
 }
 </script>
diff --git a/components/Checkbox.vue b/components/Checkbox.vue
index 9400323f..970d95c1 100644
--- a/components/Checkbox.vue
+++ b/components/Checkbox.vue
@@ -9,6 +9,7 @@
     >
   </div>
 </template>
+
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 
diff --git a/components/Input.vue b/components/Input.vue
index f7f8b61a..296bff67 100644
--- a/components/Input.vue
+++ b/components/Input.vue
@@ -4,6 +4,7 @@
     :class="classNames('relative focus:shadow-[0px_0px_0px_1px_#24B960] rounded-[6px] shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_0px_rgba(0,0,0,0.12)] p-2 outline-none', props.class)"
   >
 </template>
+
 <script setup lang="tsx">
 import { useVModel } from '@vueuse/core'
 
diff --git a/components/Loading.vue b/components/Loading.vue
index ecb958bd..06462e05 100644
--- a/components/Loading.vue
+++ b/components/Loading.vue
@@ -11,6 +11,7 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
 withDefaults(
   defineProps<{
diff --git a/components/Modal.vue b/components/Modal.vue
index 5830edd9..8317bc92 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -57,10 +57,12 @@
     </div>
   </Teleport>
 </template>
+
 <script lang="ts">
 import { useElementBounding } from '@vueuse/core'
-import { reactive } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
+import { useInjectContext } from '@/composables/useInjectContext'
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 const modalStack: { close(): void, canCloseByEsc(): boolean }[] = reactive([])
@@ -74,6 +76,7 @@ const onEscPressed = (e: KeyboardEvent) => {
 
 window.addEventListener('keydown', onEscPressed, false)
 </script>
+
 <script setup lang="ts">
 import IconClose from '@/assets/icons/close.svg?component'
 import { useZIndex } from '@/composables/useZIndex'
@@ -201,6 +204,7 @@ const onClose = () => {
   props.onClose?.()
 }
 </script>
+
 <style lang="scss" scoped>
 @keyframes fade-in {
   from {
diff --git a/components/ModelLogo.vue b/components/ModelLogo.vue
index ece811c9..7e08c2b0 100644
--- a/components/ModelLogo.vue
+++ b/components/ModelLogo.vue
@@ -6,7 +6,10 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import LogoCohere from '@/assets/icons/model-logo-cohere.svg?component'
 import LogoDeepseek from '@/assets/icons/model-logo-deepseek.svg?component'
 import LogoFallback from '@/assets/icons/model-logo-fallback.svg?component'
diff --git a/components/ModelSelector.vue b/components/ModelSelector.vue
index 17ffd3f5..57aa73b2 100644
--- a/components/ModelSelector.vue
+++ b/components/ModelSelector.vue
@@ -10,7 +10,7 @@
       class="text-xs max-w-full"
       :disabled="modelList.length === 0"
       dropdownClass="text-xs text-black w-52"
-      containerClass="max-w-full"
+      :containerClass="classNames('max-w-full', containerClass)"
       :dropdownAlign="dropdownAlign"
     >
       <template #button="{ option }">
@@ -72,8 +72,9 @@
     </Selector>
   </div>
 </template>
+
 <script setup lang="ts">
-import { toRefs } from 'vue'
+import { computed, onMounted, toRefs, watch } from 'vue'
 
 import IconDelete from '@/assets/icons/delete.svg?component'
 import ModelLogo from '@/components/ModelLogo.vue'
@@ -83,6 +84,7 @@ import { formatSize } from '@/utils/formatter'
 import { SUPPORTED_MODELS } from '@/utils/llm/web-llm'
 import { getTabStore } from '@/utils/tab-store'
 import { getUserConfig } from '@/utils/user-config'
+import { classNames } from '@/utils/vue/utils'
 
 import Selector from './Selector.vue'
 
@@ -90,6 +92,7 @@ defineProps<{
   showDetails?: boolean
   allowDelete?: boolean
   dropdownAlign?: 'left' | 'center' | 'right' | 'stretch' | undefined
+  containerClass?: string
 }>()
 
 const { modelList: ollamaModelList } = toRefs(useOllamaStatusStore())
diff --git a/components/ProgressBar.vue b/components/ProgressBar.vue
index 179ccec1..c702ad08 100644
--- a/components/ProgressBar.vue
+++ b/components/ProgressBar.vue
@@ -6,7 +6,10 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   progress: number
 }>()
diff --git a/components/ScrollContainer.vue b/components/ScrollContainer.vue
index 73a2c009..7ec8edc1 100644
--- a/components/ScrollContainer.vue
+++ b/components/ScrollContainer.vue
@@ -38,8 +38,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { useElementBounding, useScroll } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
diff --git a/components/Selector.vue b/components/Selector.vue
index 6c8eb2f8..859b409a 100644
--- a/components/Selector.vue
+++ b/components/Selector.vue
@@ -96,7 +96,10 @@
 
 <script setup lang="tsx" generic="Id extends string, OptionValue, Option extends { id: Id; value?: OptionValue; label: string | Component, textLabel?: string, disabled?: boolean }">
 import { useElementBounding, useEventListener, useVModel } from '@vueuse/core'
-import { Component, computed, FunctionalComponent, ref, watch } from 'vue'
+import { Component, computed, FunctionalComponent, Ref, ref, watch, watchEffect } from 'vue'
+
+import { useInjectContext } from '@/composables/useInjectContext'
+import { useZIndex } from '@/composables/useZIndex'
 
 import ScrollContainer from './ScrollContainer.vue'
 import Button from './ui/Button.vue'
diff --git a/components/StatusBadge.vue b/components/StatusBadge.vue
index 04b48db1..a3706a41 100644
--- a/components/StatusBadge.vue
+++ b/components/StatusBadge.vue
@@ -22,6 +22,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import Text from '@/components/ui/Text.vue'
 
diff --git a/components/Switch.vue b/components/Switch.vue
index 6dc026ba..0c105414 100644
--- a/components/Switch.vue
+++ b/components/Switch.vue
@@ -66,9 +66,12 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts" generic="T extends unknown, Key extends string | boolean, Item extends SwitchItem<T, Key>">
 import { useElementBounding } from '@vueuse/core'
-import type { CSSProperties, UnwrapRef, VNode } from 'vue'
+import { computed, type CSSProperties, nextTick, onMounted, reactive, ref, type UnwrapRef, type VNode, watch } from 'vue'
+
+import { debounce } from '@/utils/debounce'
 
 export interface SwitchItem<T = unknown, Key extends string | boolean = string> {
   name?: string
diff --git a/components/Tag.vue b/components/Tag.vue
index 8586a6c2..8a705db4 100644
--- a/components/Tag.vue
+++ b/components/Tag.vue
@@ -5,6 +5,7 @@
     <slot name="button" />
   </div>
 </template>
+
 <script setup lang="ts">
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
diff --git a/components/Textarea.vue b/components/Textarea.vue
index f609b5ca..324032a1 100644
--- a/components/Textarea.vue
+++ b/components/Textarea.vue
@@ -34,6 +34,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="tsx">
 import { useVModel } from '@vueuse/core'
 import { computed, onUnmounted, ref } from 'vue'
diff --git a/components/ToastGroup.vue b/components/ToastGroup.vue
index a98e3221..d7c19646 100644
--- a/components/ToastGroup.vue
+++ b/components/ToastGroup.vue
@@ -27,7 +27,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconClose from '@/assets/icons/close.svg?component'
 import IconWarning from '@/assets/icons/warning.svg?component'
 
diff --git a/components/ui/Button.vue b/components/ui/Button.vue
index aa276cab..4caf3bf6 100644
--- a/components/ui/Button.vue
+++ b/components/ui/Button.vue
@@ -6,7 +6,10 @@
     <slot />
   </button>
 </template>
+
 <script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 const props = withDefaults(defineProps<{
diff --git a/components/ui/Text.vue b/components/ui/Text.vue
index 48be8257..6787c6e1 100644
--- a/components/ui/Text.vue
+++ b/components/ui/Text.vue
@@ -6,7 +6,10 @@
     <slot />
   </div>
 </template>
+
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { classNames, ComponentClassAttr } from '@/utils/vue/utils'
 
 type Color = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'placeholder'
@@ -42,6 +45,7 @@ const sizeClass = computed(() => {
 })
 
 </script>
+
 <style scoped>
 .text-container {
   display: contents;
diff --git a/composables/useElementsBounding.ts b/composables/useElementsBounding.ts
index 45f02829..c32c4fda 100644
--- a/composables/useElementsBounding.ts
+++ b/composables/useElementsBounding.ts
@@ -1,3 +1,5 @@
+import { onScopeDispose, ref } from 'vue'
+
 interface WatchItem {
   el: HTMLElement
   observer: ResizeObserver
diff --git a/composables/useInjectStyle.ts b/composables/useInjectStyle.ts
index a8d12257..d6b34d47 100644
--- a/composables/useInjectStyle.ts
+++ b/composables/useInjectStyle.ts
@@ -1,3 +1,5 @@
+import { onScopeDispose } from 'vue'
+
 export function useInjectStyle(inlineCss: string) {
   const styleElement = document.createElement('style')
   styleElement.textContent = inlineCss
diff --git a/composables/useObserverElements.ts b/composables/useObserverElements.ts
index 6ddc4971..483946b4 100644
--- a/composables/useObserverElements.ts
+++ b/composables/useObserverElements.ts
@@ -1,11 +1,11 @@
 import { useEventListener, useMutationObserver } from '@vueuse/core'
+import { ref } from 'vue'
 
 export function useObserveElements(matched: (el: HTMLElement) => boolean, initElements: HTMLElement[], attributeFilter: string[] = ['contenteditable', 'type']) {
   const elements = ref<HTMLElement[]>([...initElements])
   useEventListener(window, 'focusin', (event) => {
     const target = event.target as HTMLElement
     if (!elements.value.includes(target) && matched(target)) {
-      logger.debug('Focusin on new element:', target)
       elements.value.push(target)
     }
   }, { capture: true })
@@ -19,21 +19,14 @@ export function useObserveElements(matched: (el: HTMLElement) => boolean, initEl
           }
         })
         mutation.addedNodes.forEach((node) => {
-          if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'INPUT') {
-            logger.debug('Input node added:', node)
-          }
           const exist = elements.value.find((el) => el === node)
           if (!exist && node instanceof HTMLElement && matched(node)) {
-            logger.debug('Added node:', node, elements.value)
             elements.value.push(node as HTMLElement)
           }
         })
       }
       else if (mutation.type === 'attributes') {
         const target = mutation.target as HTMLElement
-        if (target.nodeName === 'INPUT') {
-          logger.debug('Attribute changed:', target, mutation.attributeName)
-        }
         if (!elements.value.includes(target) && matched(target)) {
           elements.value.push(target)
         }
diff --git a/composables/useRefSnapshot.ts b/composables/useRefSnapshot.ts
index a67e343d..caa461ad 100644
--- a/composables/useRefSnapshot.ts
+++ b/composables/useRefSnapshot.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { Ref, ref } from 'vue'
 
 export function useRefSnapshot<T>(refValue: Ref<T>) {
   const snapshot = ref(refValue.value)
diff --git a/composables/useShadow.ts b/composables/useShadow.ts
index a78e79df..b2bf7422 100644
--- a/composables/useShadow.ts
+++ b/composables/useShadow.ts
@@ -1,3 +1,4 @@
+import { onScopeDispose } from 'vue'
 import { makeShadow } from 'vue-shadow-dom'
 
 export function useShadow(attachedEl: HTMLElement) {
diff --git a/composables/useToast.tsx b/composables/useToast.tsx
index d8c05b56..cb65491c 100644
--- a/composables/useToast.tsx
+++ b/composables/useToast.tsx
@@ -1,31 +1,32 @@
+import { createApp, inject, Plugin } from 'vue'
+
 import ToastGroup, {
   ToastFunction,
   ToastOptions,
-} from "@/components/ToastGroup.vue";
-import { createApp, Plugin } from "vue";
-import { logger } from "@/utils/logger";
+} from '@/components/ToastGroup.vue'
+import { logger } from '@/utils/logger'
 
-const log = logger.child("useToast");
+const log = logger.child('useToast')
 
-const TOAST_ROOT_PROVIDER = Symbol("toastRootElement");
+const TOAST_ROOT_PROVIDER = Symbol('toastRootElement')
 
 export const initToast: (rootEl: HTMLElement) => Plugin = (rootEl) => {
   return {
     install(app) {
-      const toastApp = createApp(ToastGroup);
-      toastApp.mount(rootEl);
+      const toastApp = createApp(ToastGroup)
+      toastApp.mount(rootEl)
       const toast = (message: string, options?: ToastOptions) => {
         if (!toastApp._instance?.exposed?.addToast) {
-          log.error("Toast function not available, please initialize first.");
+          log.error('Toast function not available, please initialize first.')
         }
-        toastApp._instance?.exposed?.addToast?.(message, options);
-      };
-      app.provide(TOAST_ROOT_PROVIDER, toast);
+        toastApp._instance?.exposed?.addToast?.(message, options)
+      }
+      app.provide(TOAST_ROOT_PROVIDER, toast)
     },
-  };
-};
+  }
+}
 
 export const useToast = () => {
-  const toast = inject<ToastFunction>(TOAST_ROOT_PROVIDER);
-  return toast!;
-};
+  const toast = inject<ToastFunction>(TOAST_ROOT_PROVIDER)
+  return toast!
+}
diff --git a/composables/useZIndex.ts b/composables/useZIndex.ts
index dc01de70..bd40a26d 100644
--- a/composables/useZIndex.ts
+++ b/composables/useZIndex.ts
@@ -1,3 +1,7 @@
+import { ref } from 'vue'
+
+import { lazyInitialize } from '@/utils/cache'
+
 const getZIndexStore = lazyInitialize(() => {
   const groups = new Map<string, number>()
   const getNextIndex = (groupName: string, baseLevel: number) => {
diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index 5df36664..757f83f9 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -2,7 +2,9 @@ import '@/utils/polyfill'
 import '@/utils/rpc'
 
 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 logger from '@/utils/logger'
 import { bgBroadcastRpc } from '@/utils/rpc'
@@ -35,7 +37,7 @@ export default defineBackground(() => {
 
   const setPopupStatusBasedOnUrl = async (tabId: number, url: string) => {
     const isValidUrl = /https?:\/\//.test(url ?? '')
-    if (!isValidUrl || unAttachedTabs.has(tabId)) {
+    if (!isValidUrl || unAttachedTabs.has(tabId) || INVALID_URLS.some((regex) => regex.test(url))) {
       await browser.action.setPopup({ popup: 'popup.html' })
     }
     else {
diff --git a/entrypoints/content/App.vue b/entrypoints/content/App.vue
index a7cc9a66..a4e9bd3c 100644
--- a/entrypoints/content/App.vue
+++ b/entrypoints/content/App.vue
@@ -27,10 +27,12 @@
     </SideContainer>
   </Suspense>
 </template>
+
 <script setup lang="tsx">
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
 
 import Modal from '@/components/Modal.vue'
+import { useToast } from '@/composables/useToast'
 import { useZIndex } from '@/composables/useZIndex'
 import { registerContentScriptRpcEvent } from '@/utils/rpc'
 import { registerContentScriptRpcEventFromMainWorld } from '@/utils/rpc/content-main-world-fns'
@@ -106,6 +108,7 @@ onMounted(async () => {
   if (tabInfo.faviconUrl) tabStore.tabInfo.value.faviconUrl = tabInfo.faviconUrl
 })
 </script>
+
 <style lang="scss">
 .wrapper-enter-active,
 .wrapper-leave-active {
diff --git a/entrypoints/content/components/Chat/Messages/Action.vue b/entrypoints/content/components/Chat/Messages/Action.vue
index 41012deb..059ed476 100644
--- a/entrypoints/content/components/Chat/Messages/Action.vue
+++ b/entrypoints/content/components/Chat/Messages/Action.vue
@@ -37,6 +37,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import Text from '@/components/ui/Text.vue'
 import { Chat } from '@/entrypoints/content/utils/chat'
diff --git a/entrypoints/content/components/Chat/Messages/Assistant.vue b/entrypoints/content/components/Chat/Messages/Assistant.vue
index 1fc0f697..197ef404 100644
--- a/entrypoints/content/components/Chat/Messages/Assistant.vue
+++ b/entrypoints/content/components/Chat/Messages/Assistant.vue
@@ -83,7 +83,9 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import IconReasoningFinished from '@/assets/icons/reasoning-finished.svg?component'
diff --git a/entrypoints/content/components/Chat/Messages/Task.vue b/entrypoints/content/components/Chat/Messages/Task.vue
index 1d9d4f0f..d8b9d33c 100644
--- a/entrypoints/content/components/Chat/Messages/Task.vue
+++ b/entrypoints/content/components/Chat/Messages/Task.vue
@@ -34,6 +34,7 @@
     </Text>
   </div>
 </template>
+
 <script setup lang="ts">
 import Loading from '@/components/Loading.vue'
 import Text from '@/components/ui/Text.vue'
diff --git a/entrypoints/content/components/Chat/index.vue b/entrypoints/content/components/Chat/index.vue
index f3e3a118..4122a1d9 100644
--- a/entrypoints/content/components/Chat/index.vue
+++ b/entrypoints/content/components/Chat/index.vue
@@ -47,7 +47,7 @@
     </ScrollContainer>
     <div
       ref="inputContainerRef"
-      class="p-3 absolute bottom-0 left-0 right-0 flex flex-col gap-3 z-50"
+      class="p-4 pt-2 absolute bottom-0 left-0 right-0 flex flex-col gap-3 z-50"
     >
       <div>
         <TabSelector v-model:selectedTabs="contextTabs" />
@@ -55,7 +55,7 @@
       <div class="flex gap-1">
         <ScrollContainer
           class="max-h-72 grow shadow-02 bg-white rounded-md"
-          itemContainerClass="p-2"
+          itemContainerClass="p-1"
         >
           <div class="flex gap-1 items-stretch">
             <AutoExpandTextArea
@@ -67,7 +67,7 @@
                 ? 'Ask anything...'
                 : 'Ask follow up...'
               "
-              class="w-full block outline-none border-none resize-none p-2 field-sizing-content leading-3 text-sm"
+              class="w-full block outline-none border-none resize-none p-2 field-sizing-content leading-5 text-sm wrap-anywhere"
               @keydown="onKeydown"
               @compositionstart="isComposing = true"
               @compositionend="isComposing = false"
@@ -98,6 +98,8 @@
 
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core'
+import { onMounted } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 import IconSendFill from '@/assets/icons/send-fill.svg?component'
 import AutoExpandTextArea from '@/components/AutoExpandTextArea.vue'
diff --git a/entrypoints/content/components/DebugSettings/Block.vue b/entrypoints/content/components/DebugSettings/Block.vue
index 07ad532a..f0d21e78 100644
--- a/entrypoints/content/components/DebugSettings/Block.vue
+++ b/entrypoints/content/components/DebugSettings/Block.vue
@@ -8,6 +8,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 defineProps<{
   title: string
diff --git a/entrypoints/content/components/DebugSettings/index.vue b/entrypoints/content/components/DebugSettings/index.vue
index 5e841069..704aebba 100644
--- a/entrypoints/content/components/DebugSettings/index.vue
+++ b/entrypoints/content/components/DebugSettings/index.vue
@@ -359,11 +359,15 @@
     </div>
   </div>
 </template>
+
 <script setup lang="tsx">
+import { ref, watch } from 'vue'
+
 import IconDelete from '@/assets/icons/delete.svg?component'
 import Input from '@/components/Input.vue'
 import Selector from '@/components/Selector.vue'
 import Switch from '@/components/Switch.vue'
+import { parseDocument } from '@/utils/document-parser'
 import { formatSize } from '@/utils/formatter'
 import { SUPPORTED_MODELS, WebLLMSupportedModel } from '@/utils/llm/web-llm'
 import logger from '@/utils/logger'
diff --git a/entrypoints/content/components/ExternalImage.vue b/entrypoints/content/components/ExternalImage.vue
index 82aa48e7..0ec5020f 100644
--- a/entrypoints/content/components/ExternalImage.vue
+++ b/entrypoints/content/components/ExternalImage.vue
@@ -11,12 +11,15 @@
     />
   </div>
 </template>
+
 <script lang="ts">
 import { LRUCache } from 'lru-cache'
+import { ref, watchEffect } from 'vue'
 const imageCache = new LRUCache<string, string>({
   max: 50,
 })
 </script>
+
 <script setup lang="ts">
 import { c2bRpc } from '@/utils/rpc'
 
diff --git a/entrypoints/content/components/Main.vue b/entrypoints/content/components/Main.vue
index 767ab07d..19029b57 100644
--- a/entrypoints/content/components/Main.vue
+++ b/entrypoints/content/components/Main.vue
@@ -4,19 +4,23 @@
       ref="topRef"
       class="bg-[#E9E9EC]"
     >
-      <div class="h-13 px-3 flex items-center justify-between border-b border-gray-200 ">
+      <div class="h-15 px-4 flex items-center justify-between border-b border-gray-200 ">
         <div class="left flex items-center gap-2">
           <Logo
-            showText
             class="font-bold text-base"
           />
+          <ModelSelector
+            containerClass="h-7"
+            class="max-w-44"
+            dropdownAlign="left"
+          />
+        </div>
+        <div class="right flex items-center gap-4">
           <IconAdd
             v-if="!chat.historyManager.onlyHasDefaultMessages()"
             class="w-4 cursor-pointer hover:text-gray-500"
             @click="onNewChat"
           />
-        </div>
-        <div class="right flex items-center gap-4">
           <IconSetting
             class="w-4 cursor-pointer hover:text-gray-500 ml-1"
             @click="onClickSetting"
@@ -38,15 +42,6 @@
           />
         </div>
       </div>
-      <div
-        class="w-full flex justify-end px-4 pb-px"
-        :style="{ top: `${topBounding.height.value}px` }"
-      >
-        <ModelSelector
-          class="max-w-44"
-          dropdownAlign="right"
-        />
-      </div>
     </div>
     <div class="px-5 py-2">
       <div
@@ -58,8 +53,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="tsx">
 import { useElementBounding } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 import IconClose from '@/assets/icons/close.svg?component'
 import IconAdd from '@/assets/icons/new-chat-add.svg?component'
@@ -95,6 +92,7 @@ const onClickSetting = () => {
   tabStore.showSetting.value = !tabStore.showSetting.value
 }
 </script>
+
 <style lang="scss">
 .fade-enter-active,
 .fade-leave-active {
diff --git a/entrypoints/content/components/MarkdownViewer.vue b/entrypoints/content/components/MarkdownViewer.vue
index 47af92b2..5eb88731 100644
--- a/entrypoints/content/components/MarkdownViewer.vue
+++ b/entrypoints/content/components/MarkdownViewer.vue
@@ -4,12 +4,14 @@
     v-html="html"
   />
 </template>
+
 <script setup lang="ts">
 import dompurify from 'dompurify'
 import hljs from 'highlight.js'
 import { Marked, Renderer, Tokens } from 'marked'
 import { createDirectives, type DirectiveConfig } from 'marked-directive'
 import { markedHighlight } from 'marked-highlight'
+import { ref, watchEffect } from 'vue'
 
 import IconMDLink from '@/assets/icons/md-link.svg?raw'
 import logger from '@/utils/logger'
@@ -203,9 +205,11 @@ watchEffect(async () => {
   html.value = await renderMarkdown(props.text)
 })
 </script>
+
 <style lang="scss">
 @import 'highlight.js/styles/atom-one-light.css';
 </style>
+
 <style scoped lang="scss">
 .markdown-viewer {
   line-height: 1.25;
diff --git a/entrypoints/content/components/OllamaDownloadModal.vue b/entrypoints/content/components/OllamaDownloadModal.vue
index 6959a42b..1a54b1d1 100644
--- a/entrypoints/content/components/OllamaDownloadModal.vue
+++ b/entrypoints/content/components/OllamaDownloadModal.vue
@@ -60,12 +60,16 @@
     </div>
   </Modal>
 </template>
+
 <script setup lang="ts">
+import { computed, onBeforeUnmount, ref } from 'vue'
+
 import IconWarning from '@/assets/icons/warning.svg?component'
 import Modal from '@/components/Modal.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import Button from '@/components/ui/Button.vue'
 import Divider from '@/components/ui/Divider.vue'
+import { useInjectContext } from '@/composables/useInjectContext'
 import { formatSize } from '@/utils/formatter'
 import { PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
 import logger from '@/utils/logger'
diff --git a/entrypoints/content/components/Onboarding/OllamaModelDownloader.vue b/entrypoints/content/components/Onboarding/OllamaModelDownloader.vue
index 7a46ce70..503bfe66 100644
--- a/entrypoints/content/components/Onboarding/OllamaModelDownloader.vue
+++ b/entrypoints/content/components/Onboarding/OllamaModelDownloader.vue
@@ -115,8 +115,11 @@
     />
   </div>
 </template>
+
 <script setup lang="ts">
 
+import { ref } from 'vue'
+
 import ModelLogo from '@/components/ModelLogo.vue'
 import Selector from '@/components/Selector.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
diff --git a/entrypoints/content/components/Onboarding/OllamaTutorialCard.vue b/entrypoints/content/components/Onboarding/OllamaTutorialCard.vue
index 8aebac67..d854d2c9 100644
--- a/entrypoints/content/components/Onboarding/OllamaTutorialCard.vue
+++ b/entrypoints/content/components/Onboarding/OllamaTutorialCard.vue
@@ -95,17 +95,21 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { useCountdown } from '@vueuse/core'
+import { watch } from 'vue'
 
 import IconTick from '@/assets/icons/tick.svg?component'
 import Button from '@/components/ui/Button.vue'
 import Divider from '@/components/ui/Divider.vue'
 import Text from '@/components/ui/Text.vue'
 import { OLLAMA_HOMEPAGE_URL, OLLAMA_TUTORIAL_URL } from '@/utils/constants'
+import logger from '@/utils/logger'
 
 import { useOllamaStatusStore } from '../../store'
 
+const log = logger.child('OllamaTutorialCard')
 const emit = defineEmits(['installed', 'settings'])
 const ollamaStatusStore = useOllamaStatusStore()
 
@@ -123,7 +127,7 @@ const onClickInstall = () => {
 
 const reScanOllama = async () => {
   const success = await ollamaStatusStore.updateConnectionStatus()
-  logger.info('Ollama connection test result:', success)
+  log.info('Ollama connection test result:', success)
   if (success) emit('installed')
 }
 
diff --git a/entrypoints/content/components/Onboarding/SloganCard.vue b/entrypoints/content/components/Onboarding/SloganCard.vue
index 4cbae97d..5b889415 100644
--- a/entrypoints/content/components/Onboarding/SloganCard.vue
+++ b/entrypoints/content/components/Onboarding/SloganCard.vue
@@ -16,6 +16,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import ImageElements from '@/assets/images/onboarding/elements.svg'
 import Text from '@/components/ui/Text.vue'
diff --git a/entrypoints/content/components/Onboarding/WebLLMTutorialCard.vue b/entrypoints/content/components/Onboarding/WebLLMTutorialCard.vue
index ebca88c8..c3279775 100644
--- a/entrypoints/content/components/Onboarding/WebLLMTutorialCard.vue
+++ b/entrypoints/content/components/Onboarding/WebLLMTutorialCard.vue
@@ -43,7 +43,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconWarning from '@/assets/icons/warning.svg?component'
 import Modal from '@/components/Modal.vue'
 import Button from '@/components/ui/Button.vue'
diff --git a/entrypoints/content/components/Onboarding/index.vue b/entrypoints/content/components/Onboarding/index.vue
index 4dc5b0cf..84e5c989 100644
--- a/entrypoints/content/components/Onboarding/index.vue
+++ b/entrypoints/content/components/Onboarding/index.vue
@@ -60,8 +60,9 @@
     </ScrollContainer>
   </div>
 </template>
+
 <script setup lang="tsx">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 import IconClose from '@/assets/icons/close.svg?component'
 import IconPin from '@/assets/icons/pin.svg?component'
diff --git a/entrypoints/content/components/RootProvider.vue b/entrypoints/content/components/RootProvider.vue
index c60f9d1d..3377ae8b 100644
--- a/entrypoints/content/components/RootProvider.vue
+++ b/entrypoints/content/components/RootProvider.vue
@@ -1,7 +1,10 @@
 <template>
   <slot />
 </template>
+
 <script setup lang="ts">
+import { useInjectContext } from '@/composables/useInjectContext'
+
 const props = defineProps<{
   rootElement: HTMLDivElement
 }>()
diff --git a/entrypoints/content/components/Settings/Block.vue b/entrypoints/content/components/Settings/Block.vue
index 136a167a..d5530bc8 100644
--- a/entrypoints/content/components/Settings/Block.vue
+++ b/entrypoints/content/components/Settings/Block.vue
@@ -14,6 +14,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import Divider from '@/components/ui/Divider.vue'
 import Text from '@/components/ui/Text.vue'
diff --git a/entrypoints/content/components/Settings/QuickAction/EditCard.vue b/entrypoints/content/components/Settings/QuickAction/EditCard.vue
index 6479a7f1..bda31aa7 100644
--- a/entrypoints/content/components/Settings/QuickAction/EditCard.vue
+++ b/entrypoints/content/components/Settings/QuickAction/EditCard.vue
@@ -66,7 +66,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { ref, watch } from 'vue'
+
 import Checkbox from '@/components/Checkbox.vue'
 import Input from '@/components/Input.vue'
 import Textarea from '@/components/Textarea.vue'
diff --git a/entrypoints/content/components/Settings/Section.vue b/entrypoints/content/components/Settings/Section.vue
index 6e0a0de5..a68c1443 100644
--- a/entrypoints/content/components/Settings/Section.vue
+++ b/entrypoints/content/components/Settings/Section.vue
@@ -13,6 +13,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import Text from '@/components/ui/Text.vue'
 
diff --git a/entrypoints/content/components/Settings/index.vue b/entrypoints/content/components/Settings/index.vue
index ee7fb9b7..69f5219b 100644
--- a/entrypoints/content/components/Settings/index.vue
+++ b/entrypoints/content/components/Settings/index.vue
@@ -287,9 +287,10 @@
     </ScrollContainer>
   </div>
 </template>
+
 <script setup lang="tsx">
 import { useCountdown } from '@vueuse/core'
-import { computed } from 'vue'
+import { computed, onMounted, ref, toRef, watch } from 'vue'
 
 import IconClose from '@/assets/icons/close.svg?component'
 import IconOllama from '@/assets/icons/ollama.png'
@@ -312,6 +313,7 @@ import { useI18n } from '@/utils/i18n'
 import { SUPPORTED_LANGUAGES } from '@/utils/language/detect'
 import { PREDEFINED_OLLAMA_MODELS } from '@/utils/llm/predefined-models'
 import { SUPPORTED_MODELS } from '@/utils/llm/web-llm'
+import logger from '@/utils/logger'
 import { getTabStore } from '@/utils/tab-store'
 import { DEFAULT_CHAT_SYSTEM_PROMPT, DEFAULT_TRANSLATOR_SYSTEM_PROMPT, getUserConfig } from '@/utils/user-config'
 
@@ -323,6 +325,7 @@ import DownloadWebLLMModel from '../WebLLMDownloadModal.vue'
 import Block from './Block.vue'
 import Section from './Section.vue'
 
+const log = logger.child('Settings')
 const DEFAULT_WEBLLM_MODEL = SUPPORTED_MODELS[0]
 
 const { t } = useI18n()
@@ -413,7 +416,7 @@ const setupOllama = async () => {
 
 const reScanOllama = async () => {
   const success = await ollamaStatusStore.updateConnectionStatus()
-  logger.info('Ollama connection test result:', success)
+  log.info('Ollama connection test result:', success)
   if (success) {
     endpointType.value = 'ollama'
     stopCheckConnection()
diff --git a/entrypoints/content/components/SideContainer.vue b/entrypoints/content/components/SideContainer.vue
index d7794d04..94c0a71a 100644
--- a/entrypoints/content/components/SideContainer.vue
+++ b/entrypoints/content/components/SideContainer.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 
 import { useInjectContext } from '@/composables/useInjectContext'
 import { registerContentScriptRpcEvent } from '@/utils/rpc'
@@ -41,6 +41,7 @@ const isShowSidebar = computed(() => {
   return pinSidebar.value || tabStore.showContainer.value
 })
 </script>
+
 <style lang="scss">
 .side-enter-active,
 .side-leave-active {
diff --git a/entrypoints/content/components/Summary.vue b/entrypoints/content/components/Summary.vue
index f10fe94b..d1bcd57c 100644
--- a/entrypoints/content/components/Summary.vue
+++ b/entrypoints/content/components/Summary.vue
@@ -9,6 +9,7 @@
     </button>
   </div>
 </template>
+
 <script setup lang="tsx">
 import IconMenu from '@/assets/icons/menu.svg?component'
 
diff --git a/entrypoints/content/components/TabSelector.vue b/entrypoints/content/components/TabSelector.vue
index 3286881d..616d2dac 100644
--- a/entrypoints/content/components/TabSelector.vue
+++ b/entrypoints/content/components/TabSelector.vue
@@ -106,8 +106,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { useEventListener, useVModel } from '@vueuse/core'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import IconAdd from '@/assets/icons/add.svg?component'
 import IconTab from '@/assets/icons/tab.svg?component'
@@ -189,7 +191,7 @@ const toggleSelect = (tab: TabInfo) => {
     vSelectedTabs.value.splice(index, 1)
   }
   else {
-    vSelectedTabs.value.push(tab)
+    vSelectedTabs.value.unshift(tab)
   }
   tabStore.contextTabIds.value = vSelectedTabs.value.map((tab) => tab.tabId)
 }
@@ -234,6 +236,7 @@ onBeforeUnmount(() => {
   cleanUpTabRemovedListener()
 })
 </script>
+
 <style lang="scss">
 .selector-enter-active,
 .selector-leave-active {
diff --git a/entrypoints/content/components/Translate.vue b/entrypoints/content/components/Translate.vue
index 8ba8b8f7..d783a64d 100644
--- a/entrypoints/content/components/Translate.vue
+++ b/entrypoints/content/components/Translate.vue
@@ -14,6 +14,7 @@
     </button>
   </div>
 </template>
+
 <script setup lang="tsx">
 import IconTranslate from '@/assets/icons/translate.svg?component'
 import Loading from '@/components/Loading.vue'
diff --git a/entrypoints/content/components/WebLLMDownloadModal.vue b/entrypoints/content/components/WebLLMDownloadModal.vue
index 3af65061..2abe76c2 100644
--- a/entrypoints/content/components/WebLLMDownloadModal.vue
+++ b/entrypoints/content/components/WebLLMDownloadModal.vue
@@ -56,17 +56,23 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { ref } from 'vue'
+
 import IconWarning from '@/assets/icons/warning.svg?component'
 import ProgressBar from '@/components/ProgressBar.vue'
 import Button from '@/components/ui/Button.vue'
 import Divider from '@/components/ui/Divider.vue'
 import { formatSize } from '@/utils/formatter'
 import { SUPPORTED_MODELS, WebLLMSupportedModel } from '@/utils/llm/web-llm'
+import logger from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
 
 import { initWebLLMEngine } from '../utils/llm'
 
+const log = logger.child('WebLLMDownloadModal')
+
 const emit = defineEmits<{
   (e: 'canceled'): void
   (e: 'finished', model: WebLLMSupportedModel): void
@@ -83,7 +89,7 @@ const initWebLLM = async () => {
   webLLMInitializeProgress.value.started = true
   const progressIter = initWebLLMEngine(DEFAULT_MODEL.modelId)
   for await (const progress of progressIter) {
-    logger.debug('WebLLM model download progress', progress)
+    log.debug('WebLLM model download progress', progress)
     if (progress.type === 'progress') {
       webLLMInitializeProgress.value.downloaded = progress.progress.progress * webLLMInitializeProgress.value.total
     }
diff --git a/entrypoints/content/components/WritingTools/EditableEntry.vue b/entrypoints/content/components/WritingTools/EditableEntry.vue
index b180de7c..89011f3b 100644
--- a/entrypoints/content/components/WritingTools/EditableEntry.vue
+++ b/entrypoints/content/components/WritingTools/EditableEntry.vue
@@ -62,12 +62,14 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { useElementBounding, useEventListener } from '@vueuse/core'
-import { UnwrapRef } from 'vue'
+import { computed, ref, UnwrapRef } from 'vue'
 
 import IconClose from '@/assets/icons/close.svg?component'
 import { useRefSnapshot } from '@/composables/useRefSnapshot'
+import { getCommonAncestorElement, getEditableElementSelectedText, getSelectionBoundingRect, isInputOrTextArea, replaceContentInRange } from '@/utils/selection'
 
 import SuggestionCard from './SuggestionCard.vue'
 import { WritingToolType } from './types'
@@ -105,6 +107,7 @@ const selectedRange = computed(() => {
       return selection.getRangeAt(0)
     }
   }
+  return undefined
 })
 
 const selectedBounding = computed(() => {
diff --git a/entrypoints/content/components/WritingTools/SuggestionCard.vue b/entrypoints/content/components/WritingTools/SuggestionCard.vue
index 3ab28fd1..eddfbf0d 100644
--- a/entrypoints/content/components/WritingTools/SuggestionCard.vue
+++ b/entrypoints/content/components/WritingTools/SuggestionCard.vue
@@ -49,7 +49,10 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+
 import ExhaustiveError from '@/components/ExhaustiveError.vue'
 import Loading from '@/components/Loading.vue'
 import logger from '@/utils/logger'
diff --git a/entrypoints/content/components/WritingTools/index.vue b/entrypoints/content/components/WritingTools/index.vue
index a6c5ad83..833ed81d 100644
--- a/entrypoints/content/components/WritingTools/index.vue
+++ b/entrypoints/content/components/WritingTools/index.vue
@@ -26,7 +26,9 @@
     </ShadowRoot>
   </Teleport>
 </template>
+
 <script setup lang="ts">
+import { ref, watch } from 'vue'
 import { ShadowRoot } from 'vue-shadow-dom'
 
 import { useObserveElements } from '@/composables/useObserverElements'
diff --git a/entrypoints/content/composables/useTranslator.ts b/entrypoints/content/composables/useTranslator.ts
index 45d579ff..0a7f3867 100644
--- a/entrypoints/content/composables/useTranslator.ts
+++ b/entrypoints/content/composables/useTranslator.ts
@@ -1,4 +1,5 @@
 import { createSharedComposable, useEventListener } from '@vueuse/core'
+import { ref, watch } from 'vue'
 
 import { getTranslatorEnv, handleTranslatorEnvUpdated, init, setTranslatorEnv, toggleTranslation, translation } from '@/entrypoints/content/utils/translator'
 import { LanguageCode } from '@/utils/language/detect'
diff --git a/entrypoints/content/index.tsx b/entrypoints/content/index.tsx
index 0c26f3f4..75a89f62 100644
--- a/entrypoints/content/index.tsx
+++ b/entrypoints/content/index.tsx
@@ -1,11 +1,14 @@
 import '@/utils/polyfill'
-import { Suspense } from 'vue'
-import App from './App.vue'
-import { createShadowRootOverlay } from './ui'
 import 'tailwindcss/index.css'
 import './utils/time'
 import './style.css'
+
+import { Suspense } from 'vue'
+import { defineContentScript } from 'wxt/utils/define-content-script'
+
+import App from './App.vue'
 import RootProvider from './components/RootProvider.vue'
+import { createShadowRootOverlay } from './ui'
 
 export default defineContentScript({
   matches: ['*://*/*'],
diff --git a/entrypoints/content/store.ts b/entrypoints/content/store.ts
index c7378798..524c83dc 100644
--- a/entrypoints/content/store.ts
+++ b/entrypoints/content/store.ts
@@ -1,13 +1,17 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
+import { logger } from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
 
+const log = logger.child('store')
+
 export const useOllamaStatusStore = defineStore('ollama-status', () => {
   const modelList = ref<{ name: string, model: string, size_vram?: number, size?: number }[]>([])
   const connectionStatus = ref<'connected' | 'error' | 'unconnected'>('unconnected')
   const updateModelList = async () => {
     const response = await c2bRpc.getLocalModelList()
-    logger.debug('Model list fetched:', response)
+    log.debug('Model list fetched:', response)
     modelList.value = response.models
     return modelList.value
   }
diff --git a/entrypoints/content/ui.ts b/entrypoints/content/ui.ts
index b074a5fa..c8ff3544 100644
--- a/entrypoints/content/ui.ts
+++ b/entrypoints/content/ui.ts
@@ -1,9 +1,11 @@
 import { createPinia } from 'pinia'
 import type { Component } from 'vue'
 import { createApp } from 'vue'
+import { ContentScriptContext } from 'wxt/utils/content-script-context'
+import { createShadowRootUi } from 'wxt/utils/content-script-ui/shadow-root'
 
+import { initToast } from '@/composables/useToast'
 import { i18n } from '@/utils/i18n'
-import type { ContentScriptContext } from '#imports'
 
 export async function createShadowRootOverlay(ctx: ContentScriptContext, component: Component<{ rootElement: HTMLDivElement }>) {
   const ui = await createShadowRootUi(ctx, {
diff --git a/entrypoints/content/utils/chat/chat.ts b/entrypoints/content/utils/chat/chat.ts
index 884797ab..58e9c7d9 100644
--- a/entrypoints/content/utils/chat/chat.ts
+++ b/entrypoints/content/utils/chat/chat.ts
@@ -1,6 +1,8 @@
 import EventEmitter from 'events'
-import type { Ref } from 'vue'
+import { type Ref, ref, watch } from 'vue'
 
+import { nonNullable } from '@/utils/array'
+import { parseDocument } from '@/utils/document-parser'
 import { AbortError, AppError } from '@/utils/error'
 import logger from '@/utils/logger'
 import { chatWithPageContent, generateSearchKeywords, nextStep, Page, summarizeWithPageContent } from '@/utils/prompts'
@@ -295,7 +297,7 @@ export class Chat {
     const relevantTabIds = this.contextTabs.value.map((tab) => tab.tabId)
     const pages = await getDocumentContentOfTabs(relevantTabIds)
     const abortController = this.createAbortController()
-    const prompt = await nextStep(contextMsgs, pages)
+    const prompt = await nextStep(contextMsgs, pages.filter(nonNullable))
     const next = await generateObjectInBackground({
       schema: 'nextStep',
       prompt: prompt.user,
@@ -403,7 +405,7 @@ export class Chat {
     const abortController = this.createAbortController()
     const relevantTabIds = this.contextTabs.value.map((tab) => tab.tabId)
     const pages = await getDocumentContentOfTabs(relevantTabIds)
-    const prompt = await generateSearchKeywords(contextMsgs, pages)
+    const prompt = await generateSearchKeywords(contextMsgs, pages.filter(nonNullable))
     const r = await generateObjectInBackground({
       schema: 'searchKeywords',
       system: prompt.system,
@@ -458,7 +460,7 @@ export class Chat {
     }
     const relevantTabIds = this.contextTabs.value.map((tab) => tab.tabId)
     const pages = await getDocumentContentOfTabs(relevantTabIds)
-    const prompt = await chatWithPageContent(question, pages, onlineResults)
+    const prompt = await chatWithPageContent(question, pages.filter(nonNullable), onlineResults)
     await this.sendMessage(prompt.user, prompt.system, { assistantMsg: loading })
   }
 
diff --git a/entrypoints/content/utils/chat/side-effects.ts b/entrypoints/content/utils/chat/side-effects.ts
index a01a2346..a9639cc9 100644
--- a/entrypoints/content/utils/chat/side-effects.ts
+++ b/entrypoints/content/utils/chat/side-effects.ts
@@ -1,5 +1,6 @@
-import { watch } from 'vue'
+import { effectScope, watch } from 'vue'
 
+import { lazyInitialize } from '@/utils/cache'
 import { ActionMessageV1 } from '@/utils/tab-store/history'
 import { getUserConfig } from '@/utils/user-config'
 
diff --git a/entrypoints/content/utils/context-menu.ts b/entrypoints/content/utils/context-menu.ts
index f3f2a32a..de01da82 100644
--- a/entrypoints/content/utils/context-menu.ts
+++ b/entrypoints/content/utils/context-menu.ts
@@ -1,3 +1,5 @@
+import { watch } from 'vue'
+
 import { getLanguageName, LanguageCode } from '@/utils/language/detect'
 import logger from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
diff --git a/entrypoints/content/utils/llm.ts b/entrypoints/content/utils/llm.ts
index 0594a9f9..531f9c89 100644
--- a/entrypoints/content/utils/llm.ts
+++ b/entrypoints/content/utils/llm.ts
@@ -1,9 +1,10 @@
 import { InitProgressReport } from '@mlc-ai/web-llm'
 import { TextStreamPart, ToolSet } from 'ai'
 import type { ProgressResponse } from 'ollama/browser'
+import { browser } from 'wxt/browser'
 
 import { toAsyncIter } from '@/utils/async'
-import { AbortError, ModelRequestTimeoutError } from '@/utils/error'
+import { AbortError, fromError, ModelRequestTimeoutError } from '@/utils/error'
 import { SchemaName } from '@/utils/llm/output-schema'
 import { WebLLMSupportedModel } from '@/utils/llm/web-llm'
 import logger from '@/utils/logger'
diff --git a/entrypoints/content/utils/search.ts b/entrypoints/content/utils/search.ts
index 821a754a..b2b8b141 100644
--- a/entrypoints/content/utils/search.ts
+++ b/entrypoints/content/utils/search.ts
@@ -1,3 +1,6 @@
+import { browser } from 'wxt/browser'
+
+import { toAsyncIter } from '@/utils/async'
 import { c2bRpc } from '@/utils/rpc'
 import { SearchingMessage } from '@/utils/search'
 
diff --git a/entrypoints/content/utils/tabs.ts b/entrypoints/content/utils/tabs.ts
index 011d09d5..79336d0d 100644
--- a/entrypoints/content/utils/tabs.ts
+++ b/entrypoints/content/utils/tabs.ts
@@ -1,5 +1,11 @@
+import { INVALID_URLS } from '@/utils/constants'
+import { parseDocument } from '@/utils/document-parser'
+import logger from '@/utils/logger'
 import { c2bRpc } from '@/utils/rpc'
 import { getTabStore } from '@/utils/tab-store'
+import { timeout } from '@/utils/timeout'
+
+const log = logger.child('tabs')
 
 export type TabInfo = {
   tabId: number
@@ -14,7 +20,10 @@ export type TabContent = TabInfo & {
 
 export async function getValidTabs(): Promise<TabInfo[]> {
   const tabs = await c2bRpc.getAllTabs()
-  return tabs.filter((tab) => tab.url?.startsWith('http') && tab.tabId) as TabInfo[]
+  return tabs.filter((tab) => {
+    const { url, tabId } = tab
+    return url && url.startsWith('http') && tabId && !INVALID_URLS.some((regex) => regex.test(url))
+  }) as TabInfo[]
 }
 
 export async function getTabInfo(tabId: number) {
@@ -23,7 +32,10 @@ export async function getTabInfo(tabId: number) {
 }
 
 export async function getDocumentContentOfTabs(tabIds: number[]) {
-  const contents = await Promise.all(tabIds.map((tabId) => c2bRpc.getDocumentContentOfTab(tabId)))
+  const contents = await Promise.all(tabIds.map((tabId) => timeout(c2bRpc.getDocumentContentOfTab(tabId), 5000).catch(() => {
+    log.error(`Failed to get content for tab ${tabId}, it might not be a valid HTML page or the tab is closed.`)
+    return undefined
+  })))
   return contents
 }
 
diff --git a/entrypoints/main-world-injected/index.ts b/entrypoints/main-world-injected/index.ts
index 72218426..34aee69e 100644
--- a/entrypoints/main-world-injected/index.ts
+++ b/entrypoints/main-world-injected/index.ts
@@ -1,3 +1,5 @@
+import { defineContentScript } from 'wxt/utils/define-content-script'
+
 import { logger } from '@/utils/logger'
 
 import { exposeToGlobal, generateText, ping, polyfillForBuiltInAI } from './utils'
diff --git a/entrypoints/popup/App.vue b/entrypoints/popup/App.vue
index 4a4f4fd9..d9c3f1af 100644
--- a/entrypoints/popup/App.vue
+++ b/entrypoints/popup/App.vue
@@ -2,11 +2,14 @@
 import { ref } from 'vue'
 import { browser } from 'wxt/browser'
 
+import { INVALID_URLS } from '@/utils/constants'
+
 const isValidUrl = ref(false)
 browser.tabs.query({ active: true, currentWindow: true }).then(async (tabs) => {
   if (tabs.length === 1) {
     const tab = tabs[0]
-    isValidUrl.value = /https?:\/\//.test(tab.url ?? '')
+    const { url } = tab || {}
+    isValidUrl.value = !!url && /https?:\/\//.test(url) && !INVALID_URLS.some((regexp) => regexp.test(url))
   }
 })
 </script>
diff --git a/eslint.config.js b/eslint.config.js
index 2c1f6d4c..b5b1a87b 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,36 +6,21 @@ import globals from 'globals'
 import typescriptEslint from 'typescript-eslint'
 
 export default typescriptEslint.config(
-  { ignores: ['*.d.ts', '**/coverage', '**/.output', '**/.wxt', '**/node_modules'] },
+  { ignores: ['*.d.ts', '**/coverage', '**/.output', '**/.wxt', '**/node_modules', '**/*.test.ts'] },
   {
     plugins: {
       '@stylistic': stylistic,
       '@typescript-eslint': typescriptEslint.plugin,
-    },
-  },
-  {
-    plugins: {
       'simple-import-sort': simpleImportSort,
     },
-    rules: {
-      'simple-import-sort/imports': 'error',
-      'simple-import-sort/exports': 'error',
-    },
   },
-  stylistic.configs.customize({
-    indent: 2,
-    quotes: 'single',
-    semi: false,
-    jsx: true,
-    arrowParens: 'always',
-  }),
   {
+    files: ['**/*.{ts,tsx,vue}'],
     extends: [
       eslint.configs.recommended,
       ...typescriptEslint.configs.recommended,
       ...eslintPluginVue.configs['flat/recommended'],
     ],
-    files: ['**/*.{ts,vue}'],
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
@@ -54,11 +39,33 @@ export default typescriptEslint.config(
       'vue/multi-word-component-names': ['off'],
       'vue/no-v-html': ['off'],
       'vue/require-default-prop': ['off'],
+      'vue/padding-line-between-blocks': ['error'],
+      'vue/array-bracket-spacing': ['error'],
+      'vue/block-spacing': ['error'],
+      'vue/arrow-spacing': ['error'],
+      'template-curly-spacing': ['error'],
     },
   },
+  stylistic.configs.customize({
+    indent: 2,
+    quotes: 'single',
+    semi: false,
+    jsx: true,
+    arrowParens: 'always',
+  }),
   {
     rules: {
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
       'no-console': ['error'],
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            { name: '#imports', message: `please use "import * from 'wxt/xxx' instead" ` },
+          ],
+        },
+      ],
       '@typescript-eslint/no-unused-vars': [
         'error',
         {
@@ -89,7 +96,4 @@ export default typescriptEslint.config(
       ],
     },
   },
-  {
-    ignores: ['node_modules', '**/*.test.ts', 'wxt.config.ts'],
-  },
 )
diff --git a/package.json b/package.json
index 789f4afa..6b9d2acf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nativemind-extension",
-  "version": "1.2.0-beta.1",
+  "version": "1.2.0-beta.4",
   "private": false,
   "author": "NativeMind",
   "keywords": [
diff --git a/utils/array.ts b/utils/array.ts
index 32aa89be..e873c792 100644
--- a/utils/array.ts
+++ b/utils/array.ts
@@ -83,3 +83,7 @@ export class ObservableArray<T> extends Array<T> {
     this.eventEmitter.emit('change', this, oldArray)
   }
 }
+
+export function nonNullable<T>(value: T | null | undefined): value is T {
+  return value !== null && value !== undefined
+}
diff --git a/utils/constants.ts b/utils/constants.ts
index e203a4f6..079a7996 100644
--- a/utils/constants.ts
+++ b/utils/constants.ts
@@ -5,3 +5,8 @@ export const VERSION = version.split('-')[0]
 export const OLLAMA_TUTORIAL_URL = 'https://nativemind.app/blog/tutorial/ollama-setup'
 export const OLLAMA_DOWNLOAD_URL = 'https://ollama.com/download'
 export const OLLAMA_HOMEPAGE_URL = 'https://ollama.com'
+
+export const INVALID_URLS = [
+  /^https:\/\/chromewebstore.google.com/,
+  /^https:\/\/chrome.google.com\/webstore\//,
+]
diff --git a/utils/error.ts b/utils/error.ts
index 40e1ef3d..6d85eca7 100644
--- a/utils/error.ts
+++ b/utils/error.ts
@@ -1,4 +1,4 @@
-export type ErrorCode = 'unknown' | 'requestError' | 'requestTimeout' | 'abortError'
+export type ErrorCode = 'unknown' | 'requestError' | 'requestTimeout' | 'abortError' | 'timeoutError'
 
 export abstract class AppError<Code extends ErrorCode> extends Error {
   private _appError = true
@@ -58,11 +58,23 @@ export class AbortError extends AppError<'abortError'> {
   }
 }
 
+// common timeout error for various operations
+export class TimeoutError extends AppError<'timeoutError'> {
+  constructor(message: string) {
+    super('timeoutError', message)
+  }
+
+  toLocaleMessage(): string {
+    return 'Operation timed out: ' + this.message
+  }
+}
+
 const errors = {
   unknown: UnknownError,
   requestError: ModelRequestError,
   requestTimeout: ModelRequestTimeoutError,
   abortError: AbortError,
+  timeoutError: TimeoutError,
 } satisfies Record<ErrorCode, typeof AppError<ErrorCode>>
 
 export function fromError(error: unknown): AppError<ErrorCode> {
diff --git a/utils/llm/providers/web-llm/openai-compatible-chat-language-model.ts b/utils/llm/providers/web-llm/openai-compatible-chat-language-model.ts
index 5dc0ecd0..c042380c 100644
--- a/utils/llm/providers/web-llm/openai-compatible-chat-language-model.ts
+++ b/utils/llm/providers/web-llm/openai-compatible-chat-language-model.ts
@@ -12,7 +12,7 @@ import { ChatCompletionChunk } from '@mlc-ai/web-llm'
 import { z } from 'zod'
 
 import { UnknownError } from '@/utils/error'
-import { logger } from '#imports'
+import { logger } from '@/utils/logger'
 
 import { ExtendedMLCEngineInterface } from '../../web-llm'
 import { convertToOpenAICompatibleChatMessages } from './convert-to-openai-compatible-chat-messages'
diff --git a/utils/rpc/background-fns.ts b/utils/rpc/background-fns.ts
index 3225754c..b5d3ac0c 100644
--- a/utils/rpc/background-fns.ts
+++ b/utils/rpc/background-fns.ts
@@ -1,5 +1,6 @@
 import { deleteModelInCache, hasModelInCache } from '@mlc-ai/web-llm'
 import { generateObject as originalGenerateObject, GenerateObjectResult, generateText as originalGenerateText, streamObject as originalStreamObject, streamText as originalStreamText } from 'ai'
+import { Browser, browser } from 'wxt/browser'
 import { z } from 'zod'
 
 import logger from '@/utils/logger'
diff --git a/utils/rpc/content-fns.ts b/utils/rpc/content-fns.ts
index 376d74cd..d234b2e4 100644
--- a/utils/rpc/content-fns.ts
+++ b/utils/rpc/content-fns.ts
@@ -1,6 +1,8 @@
 import { EventEmitter } from 'events'
+import { Browser } from 'wxt/browser'
 
 import { ContextMenuId } from '../context-menu'
+import { parseDocument } from '../document-parser'
 import { logger } from '../logger'
 
 const eventEmitter = new EventEmitter()
diff --git a/utils/rpc/content-main-world-fns.ts b/utils/rpc/content-main-world-fns.ts
index 57ef3d22..d991a952 100644
--- a/utils/rpc/content-main-world-fns.ts
+++ b/utils/rpc/content-main-world-fns.ts
@@ -1,10 +1,14 @@
 import { TextStreamPart, ToolSet } from 'ai'
 import EventEmitter from 'events'
+import { browser } from 'wxt/browser'
 
+import { toAsyncIter } from '../async'
+import { logger } from '../logger'
 import { getTabStore } from '../tab-store'
 import { getUserConfig } from '../user-config'
 import { c2bRpc } from '.'
 
+const log = logger.child('main-world-fns')
 const eventEmitter = new EventEmitter()
 
 export type Events = {
@@ -71,7 +75,7 @@ export async function checkBackendModelReady() {
     }
   }
   catch (error) {
-    logger.debug('Error checking backend model', error)
+    log.debug('Error checking backend model', error)
     return false
   }
 }
diff --git a/utils/rpc/index.ts b/utils/rpc/index.ts
index a4a179b0..acdd218a 100644
--- a/utils/rpc/index.ts
+++ b/utils/rpc/index.ts
@@ -1,11 +1,13 @@
 import { createBirpc } from 'birpc'
 
-import { only } from '../runtime'
+import { Entrypoint, only } from '../runtime'
 import { backgroundFunctions } from './background-fns'
 import { contentFunctions } from './content-fns'
 import { popupFunctions } from './popup-fns'
 export { registerContentScriptRpcEvent } from './content-fns'
 export { registerPopupRpcEvent } from './popup-fns'
+import { browser } from 'wxt/browser'
+
 import logger from '@/utils/logger'
 
 import { contentFnsForMainWorld } from './content-main-world-fns'
diff --git a/utils/search.ts b/utils/search.ts
index 141c8dd4..b31f432d 100644
--- a/utils/search.ts
+++ b/utils/search.ts
@@ -1,3 +1,5 @@
+import { browser } from 'wxt/browser'
+
 import logger from '@/utils/logger'
 
 import { Tab } from './tab'
diff --git a/utils/shared-store/helpers.ts b/utils/shared-store/helpers.ts
index 930a4c14..33f4eed2 100644
--- a/utils/shared-store/helpers.ts
+++ b/utils/shared-store/helpers.ts
@@ -1,4 +1,7 @@
-import { storage } from '#imports'
+import { customRef, Ref, ref, toRaw, watch } from 'vue'
+import { storage } from 'wxt/utils/storage'
+
+import { debounce } from '../debounce'
 
 export async function persistentRef<T>(
   storeKey: string,
diff --git a/utils/tab-store/index.ts b/utils/tab-store/index.ts
index ccc27c6d..bab26e91 100644
--- a/utils/tab-store/index.ts
+++ b/utils/tab-store/index.ts
@@ -1,8 +1,8 @@
-import { customRef } from 'vue'
-
-import { storage } from '#imports'
+import { customRef, ref, toRaw, watch } from 'vue'
+import { storage } from 'wxt/utils/storage'
 
 import { lazyInitialize } from '../cache'
+import { debounce } from '../debounce'
 import { c2bRpc } from '../rpc'
 import type { HistoryItemV1 } from './history'
 
diff --git a/utils/tab.ts b/utils/tab.ts
index 8524d507..875e9262 100644
--- a/utils/tab.ts
+++ b/utils/tab.ts
@@ -1,3 +1,5 @@
+import { Browser, browser } from 'wxt/browser'
+
 import logger from '@/utils/logger'
 
 export function waitForTabLoaded(tabId: number, options: { timeout?: number, matchUrl?: (url: string) => boolean, errorIfTimeout?: boolean } = {}) {
diff --git a/utils/timeout.ts b/utils/timeout.ts
new file mode 100644
index 00000000..b31dbcdc
--- /dev/null
+++ b/utils/timeout.ts
@@ -0,0 +1,17 @@
+import { TimeoutError } from './error'
+
+export function timeout<R, E>(p: Promise<R>, ms: number, onTimeout?: () => E): Promise<R> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      reject(onTimeout?.() || new TimeoutError(`Promise timed out after ${ms} ms`))
+    }, ms)
+
+    p.then((result) => {
+      clearTimeout(timer)
+      resolve(result)
+    }).catch((error) => {
+      clearTimeout(timer)
+      reject(error)
+    })
+  })
+}
diff --git a/utils/user-config/helpers.ts b/utils/user-config/helpers.ts
index 6ba9b4b6..b932af38 100644
--- a/utils/user-config/helpers.ts
+++ b/utils/user-config/helpers.ts
@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
-import { storage } from '#imports'
+import { customRef, ref, toRaw, watch } from 'vue'
+import { storage, StorageItemKey } from 'wxt/utils/storage'
 
 const getItem = async <T>(key: StorageItemKey) => {
   const item = await storage.getItem<T>(key)
diff --git a/utils/user-config/index.ts b/utils/user-config/index.ts
index 90ae7adf..a85a010d 100644
--- a/utils/user-config/index.ts
+++ b/utils/user-config/index.ts
@@ -1,3 +1,4 @@
+import { lazyInitialize } from '../cache'
 import { LanguageCode } from '../language/detect'
 import { LLMEndpointType } from '../llm/models'
 import { Config } from './helpers'
diff --git a/wxt.config.ts b/wxt.config.ts
index 746487e7..265b12a6 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -1,9 +1,10 @@
-import { defineConfig } from 'wxt'
-import { VERSION } from './utils/constants'
 import tailwindcss from '@tailwindcss/vite'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import webfontDownload from 'vite-plugin-webfont-dl'
 import svgLoader from 'vite-svg-loader'
-import webfontDownload from 'vite-plugin-webfont-dl';
+import { defineConfig } from 'wxt'
+
+import { VERSION } from './utils/constants'
 
 const IS_FIREFOX = process.argv.includes('firefox')
 
@@ -37,6 +38,7 @@ svgLoaderPlugin.name = 'svg-loader'
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
+  imports: false,
   modules: ['@wxt-dev/module-vue', './wxt-modules/auto-icons/index.mjs'],
   webExt: {
     chromiumArgs: ['--user-data-dir=./.wxt/chrome-data'],
@@ -46,26 +48,27 @@ export default defineConfig({
   },
   hooks: {
     // replace the default svg-loader plugin provided by wxt with our custom one
-    "vite:build:extendConfig": (_entrypoint, config) => {
-      const idx = config.plugins?.findIndex(plugin => plugin && 'name' in plugin && plugin.name === 'svg-loader')
+    'vite:build:extendConfig': (_entrypoint, config) => {
+      const idx = config.plugins?.findIndex((plugin) => plugin && 'name' in plugin && plugin.name === 'svg-loader')
       if (idx === undefined || idx === -1) {
         config.plugins = config.plugins || []
         config.plugins.push(svgLoaderPlugin)
         return
-      } else {
+      }
+      else {
         config.plugins?.splice(idx, 1, svgLoaderPlugin)
       }
     },
   },
-  vite: _env => {
+  vite: (_env) => {
     return {
       plugins: [
         webfontDownload([
-          'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'
+          'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
         ]),
         vueJsx({ babelPlugins: ['@babel/plugin-proposal-explicit-resource-management'] }),
         tailwindcss(),
-      ] as any[],
+      ],
     }
   },
   manifest: {
@@ -76,7 +79,7 @@ export default defineConfig({
     permissions: ['declarativeNetRequest', 'tabs', 'storage', 'scripting', 'contextMenus', ...extraPermissions],
     minimum_chrome_version: '124',
     content_security_policy: {
-      extension_pages: "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
+      extension_pages: 'script-src \'self\' \'wasm-unsafe-eval\'; object-src \'self\';',
     },
     web_accessible_resources: [
       {
@@ -90,7 +93,7 @@ export default defineConfig({
         js: ['/main-world-injected.js'],
         run_at: 'document_start',
         world: 'MAIN',
-      }
+      },
     ],
     host_permissions: ['*://*/*'],
   },