手把手教你如何開發chrome插件

手把手教你如何開發chrome插件

無論是作web開發仍是作測試, 對於chrome我想你們都很是的熟悉不過了, 說到chrome的插件不少都以爲很神奇，今天我將帶領你們一塊兒來探討如何開發chrome插件, 讓你的應用也能夠跑在chrome上面

在開發以前咱們先來了解一下一些基礎知識

1. chrome擴展文件

   chrome擴展文件都是以.crx爲後綴名, 在google chrome擴展官網上下載擴展時，chrome會將.crx文件下載到chrome的application data文件下我本地的是C:\Users\AppData\Local\Google\Chrome\Application, 安裝完成或者取消安裝, 該文件都會被刪除，.crx其實是一個壓縮文件, 咱們來看一下gmail.crx裏面的內容:

       實際上就是一個web應用，只不過是安裝chrome的規定方式開發而已

   2. Browser Actions(擴展圖標)，以下圖所示的爲擴展圖標:

       

       

動手寫一個插件

  1.新建一個文件夾名字叫MyFirstChromePlugins,在文件夾下新建manifest.json內容爲:

{  
  "name": "MyFirstChromePlugins",  
  "version": "0.9.0",  
  "manifest_version": 2,
  "description": "Management my everyday's task lists.",  
  "browser_action": {  
    "default_icon": "icon.png" ,
    "default_title": "My MyFirstChromePlugins",
    "default_popup": "popup.html"
  }  
}

這裏name表明應用程序名,version表明版本號,description表明功能描述，browser_action表明擴展圖標顯示,它會定義圖標地址,標題和默認的popup頁面

  2. 咱們這裏的popup.html文件

<div id="newItem" class="gray">This is my fist chrome plugins</div>

  3. 將icon.png放到MyFirstChromePlugins文件夾中, MyFirstChromePlugins文件夾下內容以下:

  首先打開chrome-工具-擴展程序,展開開發人員模式, 打到「打包擴展程序」按鈕

 

點擊打包擴展程序,執行MyFirstChromePlugins文件夾的路徑

點擊肯定，它會在根文件夾同一級生成MyFirstChromePlugin.pem和MyFirstChrome.crx, MyFirstChrome.pem是程序簽名文件，不能刪除它, 將MyFirstChrome.crx 拖進chrome窗體內,就會把這個應用安裝在chrome裏

接下來就能夠看到簡單的效果了，本篇文章只介紹了基礎知識, 下一篇我將會完善代碼