日常辦公時，我們經常會用到chrome瀏覽器，而一些chrome的擴展程序也常常出現在我們的日常工作中。
擴展程序是可以修改和增強 Web 瀏覽器功能的小程序，它們可用於各種任務，例如阻止廣告，管理密碼，組織標籤，改變網頁的外觀和行為等等。
而優秀的插件讓 Chrome 瀏覽器如虎添翼、所向披靡，可以從效率、功能、安全和易用性等方面提升你的工作體驗。
擴展程序並不難寫，前端開發小夥伴參考一下瀏覽器應用開發文檔後寫幾個功能小頁面就可以實現定製chrome擴展程序了，聽起來是不是很easy。
那麼下面就讓我來給你介紹下如何定製屬於自己的chrome擴展程序吧。
定製擴展程序文件主要由配置文件manifest.json和popup，background，contantscript三部分組成。
就以之前做過一個帳號密碼和二維碼管理的簡單擴展程序為例。
1. 首先看一下我的擴展插件配置文件manifest.json
content_scripts：配置與web頁面交互的腳本js
background：插件功能js文件
browser_action：插件的UI組成（其中popup為插件的彈出頁）
permissions：擴展插件使用到的瀏覽器權限（這裡使用了右鍵菜單）
2. 再來看一下插件項目的目錄
logo:目錄下放的小程序二維碼logo
qrCode：目錄下放的小程序體驗二維碼
home.png：自定義擴展插件的圖標
login.js：右鍵菜單生成js
login.json：帳號密碼配置json
manifest.json: 自定義插件的配置json
page.js：右鍵菜單點擊事件js
popup.html：chrome自定義插件彈出頁
popup.js：彈出頁js
3. 然後配置好我們需要的帳號密碼和二維碼
在login.js裡首先密碼管理的功能，ajax接口拿到帳戶密碼，通過和chrome當前的頁面進行交互傳遞右鍵點擊選中的帳號密碼，頁面page.js中進行監聽拿到這個帳號密碼渲染到登錄頁的帳戶和密碼輸入框。
4. 另外一個二維碼管理的功能就是用popup實現，把配置的二維碼顯示在彈出頁上。
這樣一個簡單的帳戶密碼和二維碼管理的擴展程序代碼部分就完成了，接下來怎麼把代碼打包並投入chrome瀏覽器進行使用呢？
選擇chrome工具欄打開更多工具->擴展程序，然後選擇打開開發者模」。
點擊「打包擴展程序」選擇這個項目文件夾，再點擊「加載已解壓的擴展程序」，這樣就把我們的login擴展插件打包進chrome瀏覽器了。
下面看一下login擴展插件的使用效果吧！
打開任意網頁網頁（配置文件content_scripts，支持在所有http和https網頁），右鍵點擊就可以看到我們的密碼管理插件了。
在瀏覽器工具欄最右側可以看到我們配置圖標的插件，單擊打開可以看到配置的二維碼圖。
這樣就實現了一個帳號密碼和二維碼管理的擴展程序了。是不是感覺很容易？
那麼就行動起來，製作一個專屬於你自己的擴展程序吧！
解決開發者擴展程序：
https://www.zhihu.com/question/271256275/answer/856787300
不要忘記點個在看哦↓↓↓