在我們可以設定任何東西之前,我們需要了解 BEX 的結構。一個 BEX 可以是以下一種(或多種)
您不需要為上述每種 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.js
、content-hook.js
和 dom-hook.js
。 這些檔案旨在讓您可以存取一個橋樑,該橋樑縮小了 BEX 每一層之間的通訊差距。 我們將在下一節中更詳細地探討它們。