feat: add Firefox compatibility and fix LAN/WiFi IP connectivity

- Add webextension-polyfill for cross-browser API support
- Replace chrome.* APIs with browser.* polyfill throughout codebase
- Use <all_urls> host permission for Firefox LAN IP support
- Add robust browser detection and Firefox-specific error handling
- Fix connectivity to Ollama servers on local network IPs (192.168.x.x, etc.)

Fixes Firefox connection issues with LAN/WiFi IPs by using proper host
permissions and cross-browser API abstraction.

Author: Shishir435

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ollama-client",
   "displayName": "Ollama Client - Chat with Local LLM Models",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Privacy-first Ollama Chrome extension to chat with local AI models like LLaMA, Mistral, Gemma — fully offline.",
   "author": "Shishir Chaurasiya",
   "keywords": [
@@ -107,6 +107,7 @@
     "tailwind-merge": "3.0.1",
     "tailwind-scrollbar": "^4.0.2",
     "tailwindcss-animate": "1.0.7",
+    "webextension-polyfill": "^0.12.0",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
@@ -135,10 +136,7 @@
   },
   "manifest": {
     "host_permissions": [
-      "<all_urls>",
-      "https://*/*",
-      "http://localhost:11434/*",
-      "http://localhost/*"
+      "<all_urls>"
     ],
     "permissions": [
       "storage",

pnpm-lock.yaml

@@ -1,9 +1,22 @@
+import { isChromiumBased } from "@/lib/browser-api"
 import type { SendResponseFunction } from "@/types"
 
 export const handleUpdateBaseUrl = async (
   payload: string,
   sendResponse: SendResponseFunction
 ): Promise<void> => {
+  if (!isChromiumBased()) {
+    sendResponse({
+      success: false,
+      error: {
+        status: 0,
+        message:
+          "Firefox requires manual OLLAMA_ORIGINS configuration. See settings for instructions."
+      }
+    })
+    return
+  }
+
   try {
     const origin = new URL(payload).origin
 

src/background/handlers/handle-update-base-url.ts

@@ -1,3 +1,6 @@
+import "webextension-polyfill"
+
+import { browser, isChromiumBased } from "@/lib/browser-api"
 import { MESSAGE_KEYS } from "@/lib/constants"
 import { handleChatWithModel } from "@/background/handlers/handle-chat-with-model"
 import { handleDeleteModel } from "@/background/handlers/handle-delete-model"
@@ -12,7 +15,6 @@ import { handleUnloadModel } from "@/background/handlers/handle-unload-model"
 import { handleUpdateBaseUrl } from "@/background/handlers/handle-update-base-url"
 import { abortAndClearController } from "@/background/lib/abort-controller-registry"
 import { updateDNRRules } from "@/background/lib/dnr"
-import { isChromiumBased } from "@/background/lib/utils"
 import type {
   ChatWithModelMessage,
   ChromeMessage,
@@ -24,34 +26,37 @@ import type {
 export {}
 
 const openOllamaClient = () => {
-  chrome.windows.create({
-    url: chrome.runtime.getURL("sidepanel.html"),
+  browser.windows.create({
+    url: browser.runtime.getURL("sidepanel.html"),
     type: "popup",
     width: 420,
     height: 640
   })
 }
 
-if (isChromiumBased() && "sidePanel" in chrome) {
-  chrome.sidePanel
+if (isChromiumBased() && "sidePanel" in browser) {
+  ;(browser as any).sidePanel
     .setPanelBehavior({ openPanelOnActionClick: true })
-    .catch((error) => console.error("SidePanel error:", error))
+    .catch((error: Error) => console.error("SidePanel error:", error))
 } else {
-  chrome.action.onClicked.addListener(() => {
-    openOllamaClient()
-  })
+  const actionAPI = browser.action || (browser as any).browserAction
+  if (actionAPI) {
+    actionAPI.onClicked.addListener(() => {
+      openOllamaClient()
+    })
+  }
 }
 
 if (!isChromiumBased()) {
   console.warn("DNR not available: skipping CORS workaround (likely Firefox)")
 }
 
 if (isChromiumBased()) {
-  chrome.runtime.onInstalled.addListener(updateDNRRules)
-  chrome.runtime.onStartup.addListener(updateDNRRules)
+  browser.runtime.onInstalled.addListener(() => updateDNRRules())
+  browser.runtime.onStartup.addListener(() => updateDNRRules())
 }
 
-chrome.runtime.onConnect.addListener((port: ChromePort) => {
+browser.runtime.onConnect.addListener((port: ChromePort) => {
   let isPortClosed = false
 
   const getPortStatus: PortStatusFunction = () => isPortClosed
@@ -84,7 +89,7 @@ chrome.runtime.onConnect.addListener((port: ChromePort) => {
 })
 
 // Handle one-time message requests
-chrome.runtime.onMessage.addListener(
+browser.runtime.onMessage.addListener(
   (message: ChromeMessage, sender, sendResponse) => {
     switch (message.type) {
       case MESSAGE_KEYS.OLLAMA.GET_MODELS: {
@@ -100,7 +105,7 @@ chrome.runtime.onMessage.addListener(
       }
 
       case MESSAGE_KEYS.BROWSER.OPEN_TAB: {
-        chrome.tabs.query({}, (tabs) => {
+        browser.tabs.query({}).then((tabs) => {
           console.log(tabs)
           sendResponse({ success: true, tabs })
         })

src/background/index.ts

@@ -1,7 +1,15 @@
+import { isChromiumBased } from "@/lib/browser-api"
 import { STORAGE_KEYS } from "@/lib/constants"
 import { plasmoGlobalStorage } from "@/lib/plasmo-global-storage"
 
 export const updateDNRRules = async (): Promise<void> => {
+  if (!isChromiumBased()) {
+    console.warn(
+      "DNR not available: Firefox requires OLLAMA_ORIGINS configuration"
+    )
+    return
+  }
+
   try {
     const baseUrl =
       ((await plasmoGlobalStorage.get(
@@ -36,6 +44,7 @@ export const updateDNRRules = async (): Promise<void> => {
       ]
     })
   } catch (error) {
+    // Don't throw - allow extension to continue without DNR
     console.error("Failed to update DNR rules:", error)
   }
 }

src/background/lib/dnr.ts

@@ -2,13 +2,6 @@ import { STORAGE_KEYS } from "@/lib/constants"
 import { plasmoGlobalStorage } from "@/lib/plasmo-global-storage"
 import type { ChatStreamMessage, ChromePort, PullStreamMessage } from "@/types"
 
-export const isChromiumBased = () => {
-  return (
-    typeof chrome !== "undefined" &&
-    typeof chrome.declarativeNetRequest !== "undefined"
-  )
-}
-
 export const safePostMessage = (
   port: ChromePort,
   message: ChatStreamMessage | PullStreamMessage

src/background/lib/utils.ts

@@ -4,6 +4,7 @@ import {
   TooltipContent,
   TooltipTrigger
 } from "@/components/ui/tooltip"
+import browser from "@/lib/browser-api"
 import { Settings } from "@/lib/lucide-icon"
 
 export const SettingsButton = ({ showText = true }: { showText?: boolean }) => {
@@ -14,7 +15,7 @@ export const SettingsButton = ({ showText = true }: { showText?: boolean }) => {
           variant="link"
           size="sm"
           onClick={() => {
-            chrome.runtime.openOptionsPage()
+            browser.runtime.openOptionsPage()
           }}
           aria-label="Extension Settings">
           <Settings size="16" className="opacity-80" />

src/components/settings-button.tsx

@@ -1,5 +1,6 @@
 import { useRef } from "react"
 
+import { browser } from "@/lib/browser-api"
 import { ERROR_MESSAGES, MESSAGE_KEYS } from "@/lib/constants"
 import type { ChatMessage } from "@/types"
 
@@ -19,11 +20,12 @@ export const useOllamaStream = ({
   setIsLoading,
   setIsStreaming
 }: UseOllamaStreamProps) => {
-  const portRef = useRef<chrome.runtime.Port | null>(null)
+  const portRef = useRef<browser.Runtime.Port | null>(null)
   const currentMessagesRef = useRef<ChatMessage[]>([])
 
   const startStream = ({ model, messages }: StreamOptions) => {
-    const port = chrome.runtime.connect({
+    // Create port synchronously BEFORE any async operations
+    const port = browser.runtime.connect({
       name: MESSAGE_KEYS.OLLAMA.STREAM_RESPONSE
     })
     portRef.current = port

src/features/chat/hooks/use-ollama-stream.ts

@@ -11,6 +11,7 @@ import {
 } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { browser } from "@/lib/browser-api"
 import { MESSAGE_KEYS, STORAGE_KEYS } from "@/lib/constants"
 import { Check, ExternalLink, Loader2, Server } from "@/lib/lucide-icon"
 import { plasmoGlobalStorage } from "@/lib/plasmo-global-storage"
@@ -31,7 +32,7 @@ export const BaseUrlSettings = () => {
 
   const handleSave = async () => {
     try {
-      await chrome.runtime.sendMessage({
+      await browser.runtime.sendMessage({
         type: MESSAGE_KEYS.OLLAMA.UPDATE_BASE_URL,
         payload: ollamaUrl
       })

src/features/model/components/ollama-base-url-settings.tsx

@@ -1,18 +1,19 @@
 import { useEffect, useRef, useState } from "react"
 
+import { browser } from "@/lib/browser-api"
 import { MESSAGE_KEYS } from "@/lib/constants"
 
 export const useOllamaPull = () => {
   const [progress, setProgress] = useState<string | null>(null)
   const [pullingModel, setPullingModel] = useState<string | null>(null)
-  const portRef = useRef<chrome.runtime.Port | null>(null)
+  const portRef = useRef<browser.Runtime.Port | null>(null)
 
   const pullModel = (modelName: string) => {
     console.log("modelName: ", modelName)
     setPullingModel(modelName)
     setProgress("Starting...")
 
-    const port = chrome.runtime.connect({
+    const port = browser.runtime.connect({
       name: MESSAGE_KEYS.OLLAMA.PULL_MODEL
     })
     portRef.current = port