學了這麼久前端，你會開發Chrome擴展嗎？

最近公司要做一個抓取微博數據的工具，幫助一些公司抓取目標標籤用戶的用戶信息。最終，產品經理將「Chrome擴展」作為產品形態。對於一些沒有插件開發經驗的程序員，似乎開發一個這樣的擴展（插件）很難、很牛的樣子。其實，沒有你想像的那麼難，和正常Web開發差不多，只是換了一個陌生的開發環境而已。下面，咱們一起做一個簡單的「Chrome擴展」，幫你入門。

運行環境

l Chrome瀏覽器

l 360瀏覽器極速版本

l 以及國內的其他以Chrome類似內核為版本的瀏覽器

基礎知識

「Chrome擴展」本質上是一個包含JavaScript文件、CSS文件、HTML文件、圖片等相關文件組織在一起的文件包。一般情況，「Chrome擴展」都是以「.crx」結尾的文件。

安裝後，會在瀏覽器的右上角顯示一個icon，如下圖：

開始創建

一、創建一個文件夾「HelloWorld」

二、文件夾內創建一個文件「manifest.json」，「manifest.json」的代碼如下：

{

"manifest_version": 2,

"name": "HelloWorld",

"version": "1.0",

"description": "我的第一個入門Chrome擴展.",

"icons": {

"16": "images/icon.png",

"48": "images/icon.png",

"128": "images/icon.png"

},

"browser_action": {

"default_icon": {

"19": "images/icon.png"

},

"default_title": "HelloWorld",

"default_popup": "popup.html"

}

}

說明：

l 「manifest_version」欄位，指定清單文件格式的版本，在Chrome18之後，應該都是2，所以這個值直接設定為2就OK了

l 「name」欄位，表示擴展的名字

l 「version」欄位，表示擴展的版本

l 「description」欄位，表示擴展的描述

l 「icons」 欄位，表示插件圖標，需準備16*16（擴展信息欄）、48*48（擴展管理頁面）、128*128（用在安裝過程中）的三個圖標文件，建議為PNG格式，因為PNG對透明的支持最好

l 「browser_action」欄位，初學者可以理解為右上角彈框的相關程序配置，本示例中主要介紹了「default_icon」欄位，表示默認的圖標。

l 「default_popup」欄位，表示右上角彈框氣泡麵板

三、在文件夾內創建「popup.html」文件，代碼如下：

HelloWorld

HelloWorld

四，文件都創建完畢之後，進入「Chrome瀏覽器」的擴展應用載入頁面，勾選「開發者模式」如下圖所示：

五，點擊「載入已解壓的擴展程序」，選擇剛才創建的文件夾，載入完畢之後，就會出現圖中的HelloWord應用，如下圖：

六，點擊右上角，顯示「HelloWorld」氣泡，如下圖：

七，如果您想打包擴展，給其他朋友使用，可以點擊擴展頁面中的「打包擴展程序」，如下圖：

八，載入開發的文件夾，如下圖：

九，生成兩個文件「HelloWord.crx」擴展程序文件與「HelloWord.pem」密鑰文件，如下圖

最後，你就可以分享給朋友，讓他們使用你的Chrome擴展了。

加群六二三九六六八零六 免費領取前端學習資料，群里還有大神解答問題和交流

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！