chrome如何新增外掛（chrome外掛開發入門教程）

Chrome擴充套件外掛基礎是基於前端html js開發，然後通過官方提供的專案結構進行開發，需要注意的是，目前Chrome已經支援Manifest V3，FireFox僅僅支援Manifest V2。本文介紹如何開始開發一個簡單的Chrome外掛，版本基於Manifest V3。

建立manifest.json檔案

Chrome外掛需要在根目錄建立一個清單檔案manifest.json檔案，我們來建立一個外掛的清單如下：

{     "name": "廣告過濾",     "version": "0.0.1",     "manifest_version": 3,     "description": "過濾常見網頁廣告資訊",     "action":{       "default_popup":"template/popup.html"     },     "icons":{       "16": "icons/icon.png",       "32": "icons/icon.png",       "48": "icons/icon.png",       "128":"icons/icon.png"     }   }

如上，配置基礎的外掛資訊，需要注意manifest_version指定版本號，我這裡設定的最新支援的v3版本，v3版本與v2版本對於配置項的設定是由區別的，具體可以參考官網：Migrating to Manifest V3。相關配置項如下：

• icons：配置擴充套件icon
• default_popup：配置彈框頁面
• manifest_version：manifest版本號
• description：擴充套件描述資訊
• name：擴充套件程式名稱
• version：擴充套件版本號

建立popup.html

popup.html檔案可以不用寫html包裹，但是這種情況會導致中文顯示亂碼，所以最好還是按照完整的html寫法來設定編碼為utf-8。程式碼如下：

Title.container {             min-width: 300px;             padding: 10px 30px;         }         .settings {             margin-top: 30px;             font-size: 14px;         }         .settings .set input{                  float: right;         }         .settings .set   .set {             margin-top: 15px;         }過濾廣告配置過濾Google Adsense                 過濾百度廣告

打包擴充套件

我們可以通過使用chrome將我們寫的擴充套件打包生成crm檔案。建立外掛的程式碼結構如下：

選擇目錄打包外掛：

打包生成crm和pem檔案:

載入擴充套件

可以通過Chrome進行本地原始碼載入，也可以直接將生成的crm拖拽載入，或者註冊chrome擴充套件開發者上傳商店，通過商店載入擴充套件。載入後檢視擴充套件。

原始碼地址：由於頭條上不能直接放連結，大家可以去訪問我個人站"胖蔡叨叨叨"搜尋同名文章，文章提供了外掛示例的原始碼。