在設定任何東西之前，我們需要了解 BEX 的結構。一個 BEX 可以是以下一個（或多個）

1. 在瀏覽器中自己的分頁中執行
2. 在開發人員工具視窗中執行。
3. 在彈出式視窗視窗中執行。
4. 作為選項視窗執行。
5. 在網頁的上下文中執行（注入到網站中）

您不需要為上述每種 BEX 類型建立新的 Quasar 應用程式，因為單個 Quasar 應用程式可以在上述所有實例中執行。您可以在類型章節中找到更多相關資訊。

/src 中的 UI

如果您想要修改 /src 中 UI 的 Vite 設定

module.exports = function (ctx) {
  return {
    build: {
      extendViteConf (viteConf) {
        if (ctx.mode.bex) {
          // do something with ViteConf
        }
      }
    }
  }
}

當您建置（或開發）瀏覽器擴充功能時，UI 檔案將被注入並以 www 資料夾的形式提供。

Manifest.json

對於您的 BEX 來說，最重要的設定檔是 /src-bex/manifest.json。建議您在開始專案之前，先閱讀有關此檔案的資訊。

當您首次新增 BEX 模式時，系統會詢問您喜歡哪個瀏覽器擴充功能 Manifest 版本

? What version of manifest would you like? (Use arrow keys)
❯ Manifest v2 (works with both Chrome and FF)
  Manifest v3 (works with Chrome only currently)

背景和內容腳本

每個 BEX 的背後都有一個內容腳本和一個背景腳本 / Service Worker。最好在編寫您的第一個 BEX 之前，先了解它們各自是什麼。

總結

• 背景腳本 - 在 BEX 本身的上下文中執行，並且可以監聽所有可用的瀏覽器擴充功能事件。每個 BEX 的每個背景腳本只會有一個實例。
• 內容腳本 - 在網頁的上下文中執行。每個執行擴充功能的分頁都會有一個新的內容腳本實例。

CSS

任何您希望提供給網頁（而非您的 Quasar 應用程式）的樣式都應該包含在 src-bex/assets/content.css 中，因為此檔案會自動注入到 manifest.json 檔案中。