為何捐款
API 瀏覽器
升級指南
NEW!
quasar.config 檔案
轉換為搭配 Webpack 的 CLI
瀏覽器相容性
支援 TypeScript
目錄結構
命令列表
CSS 預處理器
路由
延遲載入 - 程式碼分割
處理資源
啟動檔案
預取功能
API 代理
處理 Webpack
處理 process.env
使用 Pinia 進行狀態管理
使用 Vuex 進行狀態管理
Linter
測試與稽核
開發行動應用程式
Ajax 請求
開放開發伺服器給公眾
Quasar CLI 與 Webpack - @quasar/app-webpack
設定 BEX

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

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

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

Manifest.json

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

當您建立 Quasar BEX 時,manifest 檔案已經設定好,會新增執行 BEX 所需的基本屬性。這包括預設的背景腳本、內容腳本以及一個 CSS 檔案,該檔案會被注入到 BEX 運行的網頁上下文中。

提示

請注意,manifest.json 檔案會在建置時被修改,以便自動注入所需的 javascript 檔案。

背景和內容腳本

每個 BEX 的背後都有一個內容腳本和一個背景腳本。 最好先了解它們各自是什麼,再開始編寫您的第一個 BEX。

總結

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

提示

鑑於內容腳本在網頁上下文中運行,這表示只有與網頁互動的 BEX 才能使用內容腳本。Popup、Options 和 Devtools 不會在其後台運行內容腳本。 然而,它們都會有背景腳本

警告

如果您想使用Manifest v3,那麼您需要使用 Quasar CLI 與 Vite 而不是 Quasar CLI 與 Webpack。 更多詳細資訊請參閱此處

CSS

任何您希望在網頁(而非您的 Quasar 應用程式)中使用的樣式都應包含在 src-bex/css/content-css.css 中,因為此檔案會自動注入到 manifest.json 檔案中。

警告

這必須是原生 CSS,因為它不會透過 Sass 預先處理。

Hook 檔案

在 Quasar BEX 中,您會獲得 background-hook.jscontent-hook.jsdom-hook.js。 這些檔案旨在讓您可以存取一個橋樑,該橋樑縮小了 BEX 每一層之間的通訊差距。 我們將在下一節中更詳細地探討它們。