chore: Update .gitignore and add .idea folder, update npm dependencies, and improve code logic for chat history and knowledge export/import

2024-05-11 19:32:36 +05:30 · 2024-05-11 19:32:36 +05:30 · f9f621c920
commit f9f621c920
parent 677aa6ef51
18 changed files with 448 additions and 261 deletions
--- a/.gitignore
+++ b/.gitignore
@ -42,4 +42,7 @@ keys.json

 # typescript
 .tsbuildinfo
+# WXT
 .wxt
+# WebStorm
+.idea
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -5,12 +5,12 @@
  "description": "Use your locally running AI models to assist you in your web browsing.",
  "author": "n4ze3m",
  "scripts": {
-    "dev": "wxt",
-    "dev:firefox": "wxt -b firefox",
-    "build": "wxt build",
-    "build:firefox": "wxt build -b firefox",
-    "zip": "wxt zip",
-    "zip:firefox": "wxt zip -b firefox",
+    "dev": "cross-env TARGET=chrome wxt",
+    "dev:firefox": "cross-env TARGET=firefox wxt -b firefox",
+    "build": "cross-env TARGET=chrome wxt build",
+    "build:firefox": "cross-env TARGET=chrome cross-env TARGET=firefox wxt build -b firefox",
+    "zip": "cross-env TARGET=chrome wxt zip",
+    "zip:firefox": "cross-env TARGET=firefox wxt zip -b firefox",
    "compile": "tsc --noEmit",
    "postinstall": "wxt prepare"
  },
@ -66,6 +66,7 @@
    "@types/react-syntax-highlighter": "^15.5.11",
    "@types/turndown": "^5.0.4",
    "autoprefixer": "^10.4.17",
+    "cross-env": "^7.0.3",
    "postcss": "^8.4.33",
    "prettier": "3.2.4",
    "tailwindcss": "^3.4.1",
--- a/page-share.md
+++ b/page-share.md
@ -23,7 +23,7 @@ Click the button below to deploy the code to Railway.

 ```bash
 git clone https://github.com/n4ze3m/page-share-app.git
-cd page-assist-app
+cd page-share-app
 ```

 2. Run the server
--- a/src/components/Option/Models/index.tsx
+++ b/src/components/Option/Models/index.tsx
@ -60,7 +60,7 @@ export const ModelsBody = () => {

    form.reset()

-    chrome.runtime.sendMessage({
+    browser.runtime.sendMessage({
      type: "pull_model",
      modelName
    })
--- a/src/components/Option/Settings/about.tsx
+++ b/src/components/Option/Settings/about.tsx
@ -11,7 +11,7 @@ export const AboutApp = () => {
  const { data, status } = useQuery({
    queryKey: ["fetchOllamURL"],
    queryFn: async () => {
-      const chromeVersion = chrome.runtime.getManifest().version
+      const chromeVersion = browser.runtime.getManifest().version
      try {
        const url = await getOllamaURL()
        const req = await fetch(`${cleanUrl(url)}/api/version`)
--- a/src/db/index.ts
+++ b/src/db/index.ts
@ -2,6 +2,7 @@ import {
  type ChatHistory as ChatHistoryType,
  type Message as MessageType
 } from "~/store/option"
+import { Storage, browser } from "wxt/browser"

 type HistoryInfo = {
  id: string
@ -57,15 +58,18 @@ type ChatHistory = HistoryInfo[]
 type Prompts = Prompt[]

 export class PageAssitDatabase {
-  db: chrome.storage.StorageArea
+  db: Storage.LocalStorageArea

  constructor() {
-    this.db = chrome.storage.local
+    this.db = browser.storage.local
  }

  async getChatHistory(id: string): Promise<MessageHistory> {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
+      // this.db.get(id, (result) => {
+      //   resolve(result[id] || [])
+      // })
+      this.db.get(id).then((result) => {
        resolve(result[id] || [])
      })
    })
@ -73,7 +77,10 @@ export class PageAssitDatabase {

  async getChatHistories(): Promise<ChatHistory> {
    return new Promise((resolve, reject) => {
-      this.db.get("chatHistories", (result) => {
+      // this.db.get("chatHistories", (result) => {
+      //   resolve(result.chatHistories || [])
+      // })
+      this.db.get("chatHistories").then((result) => {
        resolve(result.chatHistories || [])
      })
    })
@ -126,7 +133,10 @@ export class PageAssitDatabase {

  async getAllPrompts(): Promise<Prompts> {
    return new Promise((resolve, reject) => {
-      this.db.get("prompts", (result) => {
+      // this.db.get("prompts", (result) => {
+      //   resolve(result.prompts || [])
+      // })
+      this.db.get("prompts").then((result) => {
        resolve(result.prompts || [])
      })
    })
@ -169,7 +179,10 @@ export class PageAssitDatabase {

  async getWebshare(id: string) {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
+      // this.db.get(id, (result) => {
+      //   resolve(result[id] || [])
+      // })
+      this.db.get(id).then((result) => {
        resolve(result[id] || [])
      })
    })
@ -177,7 +190,10 @@ export class PageAssitDatabase {

  async getAllWebshares(): Promise<Webshare[]> {
    return new Promise((resolve, reject) => {
-      this.db.get("webshares", (result) => {
+      // this.db.get("webshares", (result) => {
+      //   resolve(result.webshares || [])
+      // })
+      this.db.get("webshares").then((result) => {
        resolve(result.webshares || [])
      })
    })
@ -197,7 +213,10 @@ export class PageAssitDatabase {

  async getUserID() {
    return new Promise((resolve, reject) => {
-      this.db.get("user_id", (result) => {
+      // this.db.get("user_id", (result) => {
+      //   resolve(result.user_id || "")
+      // })
+      this.db.get("user_id").then((result) => {
        resolve(result.user_id || "")
      })
    })
--- a/src/db/knowledge.ts
+++ b/src/db/knowledge.ts
@ -1,3 +1,4 @@
+import { Storage, browser } from "wxt/browser"
 import { deleteVector, deleteVectorByFileId } from "./vector"

 export type Source = {
@ -24,89 +25,105 @@ export const generateID = () => {
  })
 }
 export class PageAssistKnowledge {
-  db: chrome.storage.StorageArea
+  db: Storage.LocalStorageArea

  constructor() {
-    this.db = chrome.storage.local
+    this.db = browser.storage.local
  }

  getAll = async (): Promise<Knowledge[]> => {
    return new Promise((resolve, reject) => {
-      this.db.get(null, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          const data = Object.keys(result).map((key) => result[key])
-          resolve(data)
-        }
+      // this.db.get(null, (result) => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     const data = Object.keys(result).map((key) => result[key])
+      //     resolve(data)
+      //   }
+      // })
+      this.db.get(null).then((result) => {
+        const data = Object.keys(result).map((key) => result[key])
+        resolve(data)
      })
    })
  }

  getById = async (id: string): Promise<Knowledge> => {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve(result[id])
-        }
+      this.db.get(id).then((result) => {
+        resolve(result[id])
      })
    })
-  }
    
+  }
  create = async (knowledge: Knowledge): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.set({ [knowledge.id]: knowledge }, () => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve()
-        }
+      // this.db.set({ [knowledge.id]: knowledge }, () => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve()
+      //   }
+      // })
+      this.db.set({ [knowledge.id]: knowledge }).then(() => {
+        resolve()
      })
    })
  }

  update = async (knowledge: Knowledge): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.set({ [knowledge.id]: knowledge }, () => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve()
-        }
+      // this.db.set({ [knowledge.id]: knowledge }, () => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve()
+      //   }
+      // })
+      this.db.set({ [knowledge.id]: knowledge }).then(() => {
+        resolve()
      })
    })
  }

  delete = async (id: string): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.remove(id, () => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve()
-        }
+      // this.db.remove(id, () => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve()
+      //   }
+      // })
+      this.db.remove(id).then(() => {
+        resolve()
      })
    })
  }

  deleteSource = async (id: string, source_id: string): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          const data = result[id] as Knowledge
-          data.source = data.source.filter((s) => s.source_id !== source_id)
-          this.db.set({ [id]: data }, () => {
-            if (chrome.runtime.lastError) {
-              reject(chrome.runtime.lastError)
-            } else {
-              resolve()
-            }
-          })
-        }
+      // this.db.get(id, (result) => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     const data = result[id] as Knowledge
+      //     data.source = data.source.filter((s) => s.source_id !== source_id)
+      //     this.db.set({ [id]: data }, () => {
+      //       if (chrome.runtime.lastError) {
+      //         reject(chrome.runtime.lastError)
+      //       } else {
+      //         resolve()
+      //       }
+      //     })
+      //   }
+      // })
+      this.db.get(id).then((result) => {
+        const data = result[id] as Knowledge
+        data.source = data.source.filter((s) => s.source_id !== source_id)
+        this.db.set({ [id]: data }).then(() => {
+          resolve()
+        })
      })
    })
  }
--- a/src/db/vector.ts
+++ b/src/db/vector.ts
@ -1,3 +1,5 @@
+import { Storage, browser } from "wxt/browser"
+
 interface PageAssistVector {
  file_id: string
  content: string
@ -11,10 +13,10 @@ export type VectorData = {
 }

 export class PageAssistVectorDb {
-  db: chrome.storage.StorageArea
+  db: Storage.LocalStorageArea

  constructor() {
-    this.db = chrome.storage.local
+    this.db = browser.storage.local
  }

  insertVector = async (
@ -22,36 +24,55 @@ export class PageAssistVectorDb {
    vector: PageAssistVector[]
  ): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
+      // this.db.get(id, (result) => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     const data = result[id] as VectorData
+      //     if (!data) {
+      //       this.db.set({ [id]: { id, vectors: vector } }, () => {
+      //         if (chrome.runtime.lastError) {
+      //           reject(chrome.runtime.lastError)
+      //         } else {
+      //           resolve()
+      //         }
+      //       })
+      //     } else {
+      //       this.db.set(
+      //         {
+      //           [id]: {
+      //             ...data,
+      //             vectors: data.vectors.concat(vector)
+      //           }
+      //         },
+      //         () => {
+      //           if (chrome.runtime.lastError) {
+      //             reject(chrome.runtime.lastError)
+      //           } else {
+      //             resolve()
+      //           }
+      //         }
+      //       )
+      //     }
+      //   }
+      // })
+      this.db.get(id).then((result) => {
+        const data = result[id] as VectorData
+        if (!data) {
+          this.db.set({ [id]: { id, vectors: vector } }).then(() => {
+            resolve()
+          })
        } else {
-          const data = result[id] as VectorData
-          if (!data) {
-            this.db.set({ [id]: { id, vectors: vector } }, () => {
-              if (chrome.runtime.lastError) {
-                reject(chrome.runtime.lastError)
-              } else {
-                resolve()
+          this.db
+            .set({
+              [id]: {
+                ...data,
+                vectors: data.vectors.concat(vector)
              }
            })
-          } else {
-            this.db.set(
-              {
-                [id]: {
-                  ...data,
-                  vectors: data.vectors.concat(vector)
-                }
-              },
-              () => {
-                if (chrome.runtime.lastError) {
-                  reject(chrome.runtime.lastError)
-                } else {
-                  resolve()
-                }
-              }
-            )
-          }
+            .then(() => {
+              resolve()
+            })
        }
      })
    })
@ -59,56 +80,72 @@ export class PageAssistVectorDb {

  deleteVector = async (id: string): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.remove(id, () => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve()
-        }
+      // this.db.remove(id, () => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve()
+      //   }
+      // })
+      this.db.remove(id).then(() => {
+        resolve()
      })
    })
  }

  deleteVectorByFileId = async (id: string, file_id: string): Promise<void> => {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          const data = result[id] as VectorData
-          data.vectors = data.vectors.filter((v) => v.file_id !== file_id)
-          this.db.set({ [id]: data }, () => {
-            if (chrome.runtime.lastError) {
-              reject(chrome.runtime.lastError)
-            } else {
-              resolve()
-            }
-          })
-        }
+      // this.db.get(id, (result) => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     const data = result[id] as VectorData
+      //     data.vectors = data.vectors.filter((v) => v.file_id !== file_id)
+      //     this.db.set({ [id]: data }, () => {
+      //       if (chrome.runtime.lastError) {
+      //         reject(chrome.runtime.lastError)
+      //       } else {
+      //         resolve()
+      //       }
+      //     })
+      //   }
+      // })
+      this.db.get(id).then((result) => {
+        const data = result[id] as VectorData
+        data.vectors = data.vectors.filter((v) => v.file_id !== file_id)
+        this.db.set({ [id]: data }).then(() => {
+          resolve()
+        })
      })
    })
  }

  getVector = async (id: string): Promise<VectorData> => {
    return new Promise((resolve, reject) => {
-      this.db.get(id, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve(result[id] as VectorData)
-        }
+      // this.db.get(id, (result) => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve(result[id] as VectorData)
+      //   }
+      // })
+      this.db.get(id).then((result) => {
+        resolve(result[id] as VectorData)
      })
    })
  }

  getAll = async (): Promise<VectorData[]> => {
    return new Promise((resolve, reject) => {
-      this.db.get(null, (result) => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve(Object.values(result))
-        }
+      // this.db.get(null, (result) => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve(Object.values(result))
+      //   }
+      // })
+      this.db.get(null).then((result) => {
+        resolve(Object.values(result))
      })
    })
  }
@ -119,12 +156,15 @@ export class PageAssistVectorDb {
      data.forEach((d) => {
        obj[d.id] = d
      })
-      this.db.set(obj, () => {
-        if (chrome.runtime.lastError) {
-          reject(chrome.runtime.lastError)
-        } else {
-          resolve()
-        }
+      // this.db.set(obj, () => {
+      //   if (chrome.runtime.lastError) {
+      //     reject(chrome.runtime.lastError)
+      //   } else {
+      //     resolve()
+      //   }
+      // })
+      this.db.set(obj).then(() => {
+        resolve()
      })
    })
  }
--- a/src/entries/background.ts
+++ b/src/entries/background.ts
@ -1,13 +1,13 @@
 import { getOllamaURL, isOllamaRunning } from "../services/ollama"
-import { Storage } from "@plasmohq/storage"
+import { browser } from "wxt/browser"

 const progressHuman = (completed: number, total: number) => {
  return ((completed / total) * 100).toFixed(0) + "%"
 }

 const clearBadge = () => {
-  chrome.action.setBadgeText({ text: "" })
-  chrome.action.setTitle({ title: "" })
+  browser.action.setBadgeText({ text: "" })
+  browser.action.setTitle({ title: "" })
 }
 const streamDownload = async (url: string, model: string) => {
  url += "/api/pull"
@ -42,16 +42,16 @@ const streamDownload = async (url: string, model: string) => {
        completed?: number
      }
      if (json.total && json.completed) {
-        chrome.action.setBadgeText({
+        browser.action.setBadgeText({
          text: progressHuman(json.completed, json.total)
        })
-        chrome.action.setBadgeBackgroundColor({ color: "#0000FF" })
+        browser.action.setBadgeBackgroundColor({ color: "#0000FF" })
      } else {
-        chrome.action.setBadgeText({ text: "🏋️‍♂️" })
-        chrome.action.setBadgeBackgroundColor({ color: "#FFFFFF" })
+        browser.action.setBadgeText({ text: "🏋️‍♂️" })
+        browser.action.setBadgeBackgroundColor({ color: "#FFFFFF" })
      }

-      chrome.action.setTitle({ title: json.status })
+      browser.action.setTitle({ title: json.status })

      if (json.status === "success") {
        isSuccess = true
@ -62,13 +62,13 @@ const streamDownload = async (url: string, model: string) => {
  }

  if (isSuccess) {
-    chrome.action.setBadgeText({ text: "✅" })
-    chrome.action.setBadgeBackgroundColor({ color: "#00FF00" })
-    chrome.action.setTitle({ title: "Model pulled successfully" })
+    browser.action.setBadgeText({ text: "✅" })
+    browser.action.setBadgeBackgroundColor({ color: "#00FF00" })
+    browser.action.setTitle({ title: "Model pulled successfully" })
  } else {
-    chrome.action.setBadgeText({ text: "❌" })
-    chrome.action.setBadgeBackgroundColor({ color: "#FF0000" })
-    chrome.action.setTitle({ title: "Model pull failed" })
+    browser.action.setBadgeText({ text: "❌" })
+    browser.action.setBadgeBackgroundColor({ color: "#FF0000" })
+    browser.action.setTitle({ title: "Model pull failed" })
  }

  setTimeout(() => {
@ -77,29 +77,18 @@ const streamDownload = async (url: string, model: string) => {
 }
 export default defineBackground({
  main() {
-    const storage = new Storage()
-
-    chrome.runtime.onMessage.addListener(async (message) => {
+    browser.runtime.onMessage.addListener(async (message) => {
      if (message.type === "sidepanel") {
-        chrome.tabs.query(
-          { active: true, currentWindow: true },
-          async (tabs) => {
-            const tab = tabs[0]
-            chrome.sidePanel.open({
-              // tabId: tab.id!,
-              windowId: tab.windowId!
-            })
-          }
-        )
+        browser.sidebarAction.open()
      } else if (message.type === "pull_model") {
        const ollamaURL = await getOllamaURL()

        const isRunning = await isOllamaRunning()

        if (!isRunning) {
-          chrome.action.setBadgeText({ text: "E" })
-          chrome.action.setBadgeBackgroundColor({ color: "#FF0000" })
-          chrome.action.setTitle({ title: "Ollama is not running" })
+          browser.action.setBadgeText({ text: "E" })
+          browser.action.setBadgeBackgroundColor({ color: "#FF0000" })
+          browser.action.setTitle({ title: "Ollama is not running" })
          setTimeout(() => {
            clearBadge()
          }, 5000)
@ -109,47 +98,74 @@ export default defineBackground({
      }
    })

-    chrome.action.onClicked.addListener((tab) => {
-      chrome.tabs.create({ url: chrome.runtime.getURL("options.html") })
-    })
+    if (browser?.action) {
+      browser.action.onClicked.addListener((tab) => {
+        console.log("browser.action.onClicked.addListener")
+        browser.tabs.create({ url: browser.runtime.getURL("/options.html") })
+      })
+    } else {
+      browser.browserAction.onClicked.addListener((tab) => {
+        console.log("browser.browserAction.onClicked.addListener")
+        browser.tabs.create({ url: browser.runtime.getURL("/options.html") })
+      })
+    }

-    chrome.commands.onCommand.addListener((command) => {
-      switch (command) {
-        case "execute_side_panel":
+    browser.contextMenus.create({
+      id: "open-side-panel-pa",
+      title: browser.i18n.getMessage("openSidePanelToChat"),
+      contexts: ["all"]
+    })
+    if (import.meta.env.BROWSER === "chrome") {
+      browser.contextMenus.onClicked.addListener((info, tab) => {
+        if (info.menuItemId === "open-side-panel-pa") {
          chrome.tabs.query(
            { active: true, currentWindow: true },
            async (tabs) => {
              const tab = tabs[0]
              chrome.sidePanel.open({
-                windowId: tab.windowId!
+                tabId: tab.id!
              })
            }
          )
-          break
-        default:
-          break
-      }
-    })
+        }
+      })

-    chrome.contextMenus.create({
-      id: "open-side-panel-pa",
-      title: browser.i18n.getMessage("openSidePanelToChat"),
-      contexts: ["all"]
-    })
+      browser.commands.onCommand.addListener((command) => {
+        switch (command) {
+          case "execute_side_panel":
+            chrome.tabs.query(
+              { active: true, currentWindow: true },
+              async (tabs) => {
+                const tab = tabs[0]
+                chrome.sidePanel.open({
+                  tabId: tab.id!
+                })
+              }
+            )
+            break
+          default:
+            break
+        }
+      })
+    }

-    chrome.contextMenus.onClicked.addListener((info, tab) => {
-      if (info.menuItemId === "open-side-panel-pa") {
-        chrome.tabs.query(
-          { active: true, currentWindow: true },
-          async (tabs) => {
-            const tab = tabs[0]
-            chrome.sidePanel.open({
-              tabId: tab.id!
-            })
-          }
-        )
-      }
-    })
+    if (import.meta.env.BROWSER === "firefox") {
+      browser.contextMenus.onClicked.addListener((info, tab) => {
+        if (info.menuItemId === "open-side-panel-pa") {
+          browser.sidebarAction.toggle()
+        }
+      })
+
+      browser.commands.onCommand.addListener((command) => {
+        switch (command) {
+          case "execute_side_panel":
+            browser.sidebarAction.toggle()
+            break
+          default:
+            break
+        }
+      })
+    }
  },
  persistent: true
 })
--- a/src/entries/ollama-pull.content.ts
+++ b/src/entries/ollama-pull.content.ts
@ -9,7 +9,7 @@ export default defineContentScript({
          `[Page Assist Extension] Pulling ${modelName} model. For more details, check the extension icon.`
        )

-        await chrome.runtime.sendMessage({
+        await browser.runtime.sendMessage({
          type: "pull_model",
          modelName
        })
--- a/src/entries/sidepanel/index.html
+++ b/src/entries/sidepanel/index.html
@ -4,6 +4,7 @@
    <title>Page Assist - A Web UI for Local AI Models</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="manifest.type" content="browser_action" />
+    <meta name="manifest.open_at_install" content="false" />
    <link href="~/assets/tailwind.css" rel="stylesheet" />
    <meta charset="utf-8" />
  </head>
--- a/src/hooks/useTTS.tsx
+++ b/src/hooks/useTTS.tsx
@ -2,7 +2,6 @@ import { useEffect, useState } from "react"
 import { notification } from "antd"
 import { getVoice, isSSMLEnabled } from "@/services/tts"
 import { markdownToSSML } from "@/utils/markdown-to-ssml"
-
 type VoiceOptions = {
  utterance: string
 }
@ -17,16 +16,28 @@ export const useTTS = () => {
      if (isSSML) {
        utterance = markdownToSSML(utterance)
      }
-      chrome.tts.speak(utterance, {
-        voiceName: voice,
-        onEvent(event) {
-          if (event.type === "start") {
-            setIsSpeaking(true)
-          } else if (event.type === "end") {
-            setIsSpeaking(false)
+      if (import.meta.env.BROWSER === "chrome") {
+        chrome.tts.speak(utterance, {
+          voiceName: voice,
+          onEvent(event) {
+            if (event.type === "start") {
+              setIsSpeaking(true)
+            } else if (event.type === "end") {
+              setIsSpeaking(false)
+            }
          }
+        })
+      } else {
+        // browser tts
+        window.speechSynthesis.speak(new SpeechSynthesisUtterance(utterance))
+        window.speechSynthesis.onvoiceschanged = () => {
+          const voices = window.speechSynthesis.getVoices()
+          const voice = voices.find((v) => v.name === voice)
+          const utter = new SpeechSynthesisUtterance(utterance)
+          utter.voice = voice
+          window.speechSynthesis.speak(utter)
        }
-      })
+      }
    } catch (error) {
      notification.error({
        message: "Error",
@ -36,7 +47,11 @@ export const useTTS = () => {
  }

  const cancel = () => {
-    chrome.tts.stop()
+    if (import.meta.env.BROWSER === "chrome") {
+      chrome.tts.stop()
+    } else {
+      window.speechSynthesis.cancel()
+    }
    setIsSpeaking(false)
  }

--- a/src/libs/runtime.ts
+++ b/src/libs/runtime.ts
@ -1,31 +1,51 @@
 export const chromeRunTime = async function (domain: string) {
-  if (typeof chrome !== "undefined" && chrome.runtime && chrome.runtime.id) {
-    const url = new URL(domain)
-    const domains = [url.hostname]
-    const rules = [
-      {
-        id: 1,
-        priority: 1,
-        condition: {
-          requestDomains: domains
-        },
-        action: {
-          type: "modifyHeaders",
-          requestHeaders: [
-            {
-              header: "Origin",
-              operation: "set",
-              value: `${url.protocol}//${url.hostname}`
-            }
-          ]
+  if (browser.runtime && browser.runtime.id) {
+    if (import.meta.env.BROWSER === "chrome") {
+      const url = new URL(domain)
+      const domains = [url.hostname]
+      const rules = [
+        {
+          id: 1,
+          priority: 1,
+          condition: {
+            requestDomains: domains
+          },
+          action: {
+            type: "modifyHeaders",
+            requestHeaders: [
+              {
+                header: "Origin",
+                operation: "set",
+                value: `${url.protocol}//${url.hostname}`
+              }
+            ]
+          }
        }
-      }
-    ]
+      ]

-    await chrome.declarativeNetRequest.updateDynamicRules({
-      removeRuleIds: rules.map((r) => r.id),
-      // @ts-ignore
-      addRules: rules
-    })
+      await browser.declarativeNetRequest.updateDynamicRules({
+        removeRuleIds: rules.map((r) => r.id),
+        // @ts-ignore
+        addRules: rules
+      })
+    }
+
+    if (import.meta.env.BROWSER === "firefox") {
+      const url = new URL(domain)
+      const domains = [`*://${url.hostname}/*`]
+      browser.webRequest.onBeforeSendHeaders.addListener(
+        (details) => {
+          for (let i = 0; i < details.requestHeaders.length; i++) {
+            if (details.requestHeaders[i].name === "Origin") {
+              details.requestHeaders[i].value =
+                `${url.protocol}//${url.hostname}`
+            }
+          }
+          return { requestHeaders: details.requestHeaders }
+        },
+        { urls: domains },
+        ["blocking", "requestHeaders"]
+      )
+    }
  }
 }
--- a/src/parser/google-docs.ts
+++ b/src/parser/google-docs.ts
@ -1,7 +1,6 @@
-
 export const isGoogleDocs = (url: string) => {
-    const GOOGLE_DOCS_REGEX = /docs\.google\.com\/document/g
-    return GOOGLE_DOCS_REGEX.test(url)
+  const GOOGLE_DOCS_REGEX = /docs\.google\.com\/document/g
+  return GOOGLE_DOCS_REGEX.test(url)
 }

 const getGoogleDocs = () => {
--- a/src/services/app.ts
+++ b/src/services/app.ts
@ -0,0 +1,20 @@
+import { Storage } from "@plasmohq/storage"
+const storage = new Storage()
+
+export const isUrlRewriteEnabled = async () => {
+  const enabled = await storage.get("urlRewriteEnabled")
+  return enabled === "true"
+}
+
+export const setUrlRewriteEnabled = async (enabled: boolean) => {
+  await storage.set("urlRewriteEnabled", enabled ? "true" : "false")
+}
+
+export const getRewriteUrl = async () => {
+  const rewriteUrl = await storage.get("rewriteUrl")
+  return rewriteUrl
+}
+
+export const setRewriteUrl = async (url: string) => {
+  await storage.set("rewriteUrl", url)
+}
--- a/src/services/tts.ts
+++ b/src/services/tts.ts
@ -21,8 +21,16 @@ export const setTTSProvider = async (ttsProvider: string) => {
 }

 export const getBrowserTTSVoices = async () => {
-  const tts = await chrome.tts.getVoices()
-  return tts
+  if (import.meta.env.BROWSER === "chrome") {
+    const tts = await chrome.tts.getVoices()
+    return tts
+  } else {
+    const tts = await speechSynthesis.getVoices()
+    return tts.map((voice) => ({
+      voiceName: voice.name,
+      lang: voice.lang
+    }))
+  }
 }

 export const getVoice = async () => {
--- a/wxt.config.ts
+++ b/wxt.config.ts
@ -2,35 +2,70 @@ import { defineConfig } from "wxt"
 import react from "@vitejs/plugin-react"
 import topLevelAwait from "vite-plugin-top-level-await"

+const chromeMV3Permissions = [
+  "storage",
+  "sidePanel",
+  "activeTab",
+  "scripting",
+  "declarativeNetRequest",
+  "action",
+  "unlimitedStorage",
+  "contextMenus",
+  "tts"
+]
+
+const firefoxMV2Permissions = [
+  "storage",
+  "activeTab",
+  "scripting",
+  "unlimitedStorage",
+  "contextMenus",
+  "webRequest",
+  "webRequestBlocking",
+  "http://*/*",
+  "https://*/*",
+  "file://*/*"
+]
+
 // See https://wxt.dev/api/config.html
 export default defineConfig({
  vite: () => ({
-    plugins: [react(),
+    plugins: [
+      react(),
      topLevelAwait({
-        promiseExportName: '__tla',
-        promiseImportName: i => `__tla_${i}`,
-      }),
+        promiseExportName: "__tla",
+        promiseImportName: (i) => `__tla_${i}`
+      })
    ],
    build: {
      rollupOptions: {
-        external: [
-          "langchain",
-          "@langchain/community",
-        ]
+        external: ["langchain", "@langchain/community"]
      }
    }
  }),
  entrypointsDir: "entries",
  srcDir: "src",
  outDir: "build",
+
  manifest: {
-    version: "1.1.6",
-    name: '__MSG_extName__',
-    description: '__MSG_extDescription__',
-    default_locale: 'en',
+    version: "1.1.7",
+    name: "__MSG_extName__",
+    description: "__MSG_extDescription__",
+    default_locale: "en",
    action: {},
    author: "n4ze3m",
-    host_permissions: ["http://*/*", "https://*/*", "file://*/*"],
+    browser_specific_settings:
+      process.env.TARGET === "firefox"
+        ? {
+            gecko: {
+              id: "page-assist@n4ze3m"
+            }
+          }
+        : undefined,
+    host_permissions:
+      process.env.TARGET !== "firefox"
+        ? ["http://*/*", "https://*/*", "file://*/*"]
+        : undefined,
    commands: {
      _execute_action: {
        suggested_key: {
@ -44,16 +79,9 @@ export default defineConfig({
        }
      }
    },
-    permissions: [
-      "storage",
-      "sidePanel",
-      "activeTab",
-      "scripting",
-      "declarativeNetRequest",
-      "action",
-      "unlimitedStorage",
-      "contextMenus",
-      "tts"
-    ]
+    permissions:
+      process.env.TARGET === "firefox"
+        ? firefoxMV2Permissions
+        : chromeMV3Permissions
  }
 })