feat(config): add Firefox extension ID and browser-specific settings

tonyhu-012 · tonyhu-012 · commit dc10d207a540 · 2025-07-10T23:26:15.000+08:00
diff --git a/entrypoints/content/composables/useTranslator.ts b/entrypoints/content/composables/useTranslator.ts
@@ -41,9 +41,7 @@ async function _useTranslator() {
 
   let initialized = false
   async function onInit() {
-    if (initialized) {
-      return
-    }
+    if (initialized) return
     initialized = true
     await init(targetLocale.value)
     translation.task.pieceNormalQueue.onChange((cur) => {
diff --git a/entrypoints/content/utils/llm.ts b/entrypoints/content/utils/llm.ts
@@ -1,4 +1,4 @@
-import { InitProgressReport } from '@mlc-ai/web-llm'
+import type { InitProgressReport } from '@mlc-ai/web-llm'
 import { TextStreamPart, ToolSet } from 'ai'
 import type { ProgressResponse } from 'ollama/browser'
 import { browser } from 'wxt/browser'
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "build:beta:firefox": "wxt build -c wxt.config.beta.ts -b firefox --mv3",
     "build:prod": "wxt build",
     "build:prod:firefox": "wxt build -b firefox --mv3",
+    "build:analyze": "wxt build --analyze",
     "check": "vue-tsc --noEmit && eslint",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
@@ -126,6 +127,7 @@
     "sharp": "^0.34.2",
     "typescript": "5.6.3",
     "typescript-eslint": "^8.32.0",
+    "vite-bundle-analyzer": "^1.1.0",
     "vite-plugin-webfont-dl": "^3.10.5",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^3.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
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
@@ -8,7 +8,7 @@ import {
   LanguageModelV1StreamPart,
 } from '@ai-sdk/provider'
 import { createJsonErrorResponseHandler, generateId, isParsableJson, ResponseHandler } from '@ai-sdk/provider-utils'
-import { ChatCompletionChunk } from '@mlc-ai/web-llm'
+import type { ChatCompletionChunk } from '@mlc-ai/web-llm'
 import { z } from 'zod'
 
 import { UnknownError } from '@/utils/error'
diff --git a/utils/llm/web-llm.ts b/utils/llm/web-llm.ts
@@ -1,5 +1,5 @@
 import { AutoTokenizer, PreTrainedTokenizer, ProgressInfo } from '@huggingface/transformers'
-import { CreateMLCEngine, InitProgressReport, MLCEngineInterface, ModelRecord } from '@mlc-ai/web-llm'
+import type { InitProgressReport, MLCEngineInterface, ModelRecord } from '@mlc-ai/web-llm'
 
 import logger from '@/utils/logger'
 
@@ -54,6 +54,7 @@ export async function getWebLLMEngine(config: WebLLMModelConfig): Promise<Extend
     config.onInitProgress?.(report)
   }
   log.debug('Loading model', config.model)
+  const { CreateMLCEngine } = await import('@mlc-ai/web-llm')
   const engine: MLCEngineInterface = await CreateMLCEngine(
     [config.model],
     { initProgressCallback: initProgressCallback },
diff --git a/utils/rpc/background-fns.ts b/utils/rpc/background-fns.ts
@@ -1,4 +1,3 @@
-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 { EventEmitter } from 'events'
 import { Browser, browser } from 'wxt/browser'
@@ -401,12 +400,14 @@ async function getSystemMemoryInfo() {
 }
 
 async function hasWebLLMModelInCache(model: WebLLMSupportedModel) {
+  const { hasModelInCache } = await import('@mlc-ai/web-llm')
   const hasCache = await hasModelInCache(model)
   logger.debug('Checking cache for model', model, hasCache)
   return hasCache
 }
 
 async function deleteWebLLMModelInCache(model: WebLLMSupportedModel) {
+  const { deleteModelInCache, hasModelInCache } = await import('@mlc-ai/web-llm')
   const hasCache = await hasModelInCache(model)
   logger.debug(`Deleting model ${model} from cache`, hasCache)
   try {
diff --git a/wxt.config.ts b/wxt.config.ts
@@ -1,5 +1,6 @@
 import tailwindcss from '@tailwindcss/vite'
 import vueJsx from '@vitejs/plugin-vue-jsx'
+import { analyzer } from 'vite-bundle-analyzer'
 import svgLoader from 'vite-svg-loader'
 import { defineConfig } from 'wxt'
 
@@ -8,6 +9,8 @@ import { version } from './package.json'
 export const VERSION = version.split('-')[0]
 
 const IS_FIREFOX = process.argv.includes('firefox')
+const FIREFOX_EXTENSION_ID = '{93170c64-eed9-4108-bb64-ade943a68ad9}'
+const ENABLE_BUNDLE_ANALYZER = process.argv.includes('--analyze') || process.env.ANALYZE === 'true'
 
 const permissionsForChrome = ['system.memory']
 const permissionsForFirefox = ['menus']
@@ -69,8 +72,11 @@ export default defineConfig({
     return {
       build: {
         target: ['chrome124', 'firefox120', 'safari16'],
+        // firefox does't support js file larger than 5MB, so we exclude @mlc-ai/web-llm from the bundle (which firefox does not use)
+        rollupOptions: { external: IS_FIREFOX ? ['@mlc-ai/web-llm'] : undefined },
       },
       plugins: [
+        analyzer({ enabled: ENABLE_BUNDLE_ANALYZER }),
         vueJsx({ babelPlugins: ['@babel/plugin-proposal-explicit-resource-management'] }),
         tailwindcss(),
       ],
@@ -87,6 +93,7 @@ export default defineConfig({
     content_security_policy: {
       extension_pages: 'script-src \'self\' \'wasm-unsafe-eval\'; object-src \'self\';',
     },
+    browser_specific_settings: IS_FIREFOX ? { gecko: { id: FIREFOX_EXTENSION_ID } } : undefined,
     content_scripts: [
       {
         matches: ['<all_urls>'],

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { InitProgressReport } from '@mlc-ai/web-llm'`
	`1`	`+import type { InitProgressReport } from '@mlc-ai/web-llm'`
`2`	`2`	`import { TextStreamPart, ToolSet } from 'ai'`
`3`	`3`	`import type { ProgressResponse } from 'ollama/browser'`
`4`	`4`	`import { browser } from 'wxt/browser'`