具有彈出互動功能的 Chrome 擴充樣板 (Manifest V3)

目標

此樣板擴充功能為開發人員提供了使用 Manifest V3 建立自己的 Chrome 擴充功能的起點。

什麼是新的

此版本最大的改進是增加了彈出介面。現在，當用戶單擊瀏覽器頂部欄中的擴展按鈕時，他們會看到一個互動式彈出窗口，而不僅僅是將訊息記錄到控制台。

特徵

此樣板展示了三個關鍵的擴展行為：

1. 頁面載入之前：在頁面載入之前將訊息列印到 DevTools 控制台。
2. 頁面載入後：在頁面載入之前將訊息列印到 DevTools 控制台。
3. 彈出互動：當使用者點擊擴充按鈕時顯示彈出窗口，允許更複雜的使用者互動。

擴充功能現在在彈出視窗中提供了一個按鈕，當點擊該按鈕時，會將腳本注入到活動標籤中以修改 DOM 並將訊息記錄到控制台。

安裝

1. 從 github.com/llagerlof/fresh-chrome-extension 複製或下載檔案並將它們放在一個目錄中。
2. 開啟瀏覽器的擴充頁面：chrome://extensions
3. 啟用右上角的「開發者模式」。
4. 點選載入解壓縮並選擇擴充目錄。

如何測試

1. 開啟任何網站。
2. 點擊瀏覽器頂部欄上的擴充按鈕。您會看到一個帶有按鈕的彈出視窗。
3. 點擊彈出視窗中標示為「按一下此按鈕為頁面新增橘色 div」的按鈕。
4. 觀察以下變化：
   • 頁面頂部會出現一個橘色 div，並顯示訊息「DOM 已修改！」
   • 開啟開發者工具（F12）並查看控制台。您將看到訊息「操作已從彈出視窗執行！」

此樣板檔案為建立更複雜的 Chrome 擴充功能提供了堅實的基礎。請隨意修改和擴展它以滿足您的特定需求。

編碼愉快！

以上是具有彈出互動功能的 Chrome 擴充樣板 (Manifest V3)的詳細內容。更多資訊請關注PHP中文網其他相關文章！