擴充套件程式剖析

擴充套件是由一組檔案組成的,這些檔案被打包用於分發和安裝。在本文中,我們將快速瀏覽擴充套件中可能存在的檔案。

manifest.json

這是每個擴充套件都必須存在的檔案。它包含基本的元資料,例如名稱、版本和所需的許可權。它還提供指向擴充套件中其他檔案的指標。

manifest 檔案還可以包含指向其他幾種型別檔案的指標

後臺指令碼

響應瀏覽器事件的指令碼。

圖示

用於擴充套件和它可能定義的任何按鈕。

提供各種使用者介面元件內容的 HTML 文件。

內容指令碼

隨擴充套件一起包含的 JavaScript,您將將其注入到網頁中。

Web 可訪問資源

使打包的內容可供網頁和內容指令碼訪問。

The components of a web extension. The manifest.JSON must be present in all extensions. It provides pointers to background pages, content scripts, browser actions, page actions, options pages, and web accessible resources. Background pages consist of HTML and JS. Content scripts consist of JS and CSS. The user clicks on an icon to trigger browser actions and page actions and the resulting pop-up consists of HTML, CSS, and JS. Options pages consist of HTML, CSS, and JS.

有關所有詳細資訊,請參閱 manifest.json 參考頁面。

除了 manifest 檔案中已列出的內容之外,擴充套件還可以包含其他 擴充套件頁面 和支援檔案。

後臺指令碼

擴充套件通常需要響應瀏覽器中獨立於任何特定網頁或瀏覽器視窗生命週期的事件。這正是後臺指令碼的用途。

後臺指令碼可以是永續性的或非永續性的。永續性後臺指令碼在擴充套件載入時立即載入,並在擴充套件被停用或解除安裝之前一直保持載入狀態。此後臺指令碼行為僅在 Manifest V2 中可用。非永續性後臺指令碼在需要響應事件時載入,並在空閒時解除安裝。此後臺指令碼行為是 Manifest V2 中的一個選項,也是 Manifest V3 中唯一可用的後臺指令碼行為。

您可以在指令碼中使用任何 WebExtension API,前提是您已請求必要的 許可權

有關更多資訊,請參閱 後臺指令碼 文章。

您的擴充套件可以包含各種使用者介面元件,這些元件的內容使用 HTML 文件定義。

顯示在瀏覽器視窗左側、緊鄰網頁的一個窗格。

當用戶點選 工具欄按鈕位址列按鈕 時顯示的對話方塊。

選項

使用者在瀏覽器原生擴充套件管理器中訪問您的外掛首選項時顯示的頁面。

對於這些元件中的每一個,您都需要建立一個 HTML 檔案,並透過 `manifest.json` 中的特定屬性指向它。HTML 檔案可以包含 CSS 和 JavaScript 檔案,就像普通的網頁一樣。

所有這些都屬於 擴充套件頁面 型別。與普通網頁不同,您的 JavaScript 可以使用與後臺指令碼相同的全部特權 WebExtension API。

擴充套件程式頁面

您還可以在擴充套件中包含不附加到某些預定義使用者介面元件的 HTML 文件。與您為側邊欄、彈出視窗或選項頁提供的文件不同,這些文件在 `manifest.json` 中沒有條目。但是,它們同樣可以訪問與後臺指令碼相同的全部特權 WebExtension API。

您通常會使用 windows.create()tabs.create() 來載入此類頁面。

有關更多資訊,請參閱 擴充套件頁面

內容指令碼

使用內容指令碼來訪問和操作網頁。內容指令碼會載入到網頁中,並在該特定頁面的上下文中執行。

內容指令碼是擴充套件提供的指令碼,它們在網頁的上下文中執行;這與頁面本身載入的指令碼不同,包括那些包含在頁面內的 <script> 元素中的指令碼。

內容指令碼可以像頁面載入的普通指令碼一樣檢視和操作頁面的 DOM。

與普通頁面指令碼不同,內容指令碼可以

內容指令碼不能直接訪問普通頁面指令碼,但可以使用標準的 window.postMessage() API 與它們交換訊息。

通常,當我們談論內容指令碼時,指的是 JavaScript,但您也可以使用相同的機制將 CSS 注入到網頁中。

有關更多資訊,請參閱 內容指令碼 文章。

Web 可訪問資源

Web 可訪問資源是您包含在擴充套件中並希望使其可供內容指令碼和頁面指令碼訪問的資源,例如影像、HTML、CSS 和 JavaScript。可以透過特殊的 URI 方案供頁面指令碼和內容指令碼引用那些被設為 Web 可訪問的資源。

例如,如果一個內容指令碼想在網頁中插入一些影像,您可以將它們包含在擴充套件中並使其 Web 可訪問。然後內容指令碼可以建立並追加 img 標籤,透過 `src` 屬性引用這些影像。

有關更多資訊,請參閱 "web_accessible_resources" `manifest.json` 鍵的文件。