編寫一個簡單的chrome插件

編寫一個chrome插件，你須要準備好一個好看的圖片做爲擴展程序的圖標。準備好圖標後，咱們就要開始設計插件了。

一、chrome擴展須要的文件
能夠這麼理解，chrome擴展程序就是一個web應用，因此咱們實際是要寫html代碼。而chrome插件須要的文件就包括配置文件(manifest.json)、擴展圖標(icon.png 能夠是任意的名字，在配置文件中會使用到)、popup彈出窗口html文件(popup.html)以及其餘靜態資源文件(如images、css、js等)。以下圖，我創建了一個jubar的文件用做chrome擴展文件夾。

二、Browser Actions（擴展圖標）
只要chrome啓用了某個chrome擴展程序，對應地將該程序的擴展圖片顯示在地址欄的右側。

三、popup彈出窗口
接下來，就是編寫popup彈出窗口了。

四、編寫配置文件manifest.json
{
"name": "Jubar",
"manifest_version":2,
"version": "4.0.1",
"description": "Gather your friends and family",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "Jubar",
"default_popup": "popup.html"
}
}

必須屬性：
name、version、manifest_version
一、name 插件名稱；
二、version 插件的版本號；
三、manifest_version 指定清單文件格式的版本，在Chrome18以後，應該都是2，因此這個值直接設定爲2就OK了；

推薦屬性：
description、icons、default_locale
一、description 插件描述，簡單介紹插件用途；
二、icons 插件圖標，需準備16*16（擴展信息欄）、48*48（擴展管理頁面）、128*128（用在安裝過程當中）的三個圖標文件，建議爲PNG格式，由於PNG對透明的支持最好；
三、default_locale 國際化支持，支持何種語言的瀏覽器，雖然官方推薦，不過我沒用；

其餘屬性
browser_action表明擴展圖標段顯示，它會定義圖標地址、標題（也就是鼠標懸停提示）和默認的popup頁面。咱們這裏定義的popup頁面爲popup.html。

 

六、打包擴展程序
一、打開Chrome –> 更多工具 –> 擴展程序
二、打開「開發者模式」