手把手教你開發chrome擴展一：開發Chrome Extenstion其實很簡單

時間 2019-11-20

標籤手把手開發 chrome 擴展 extenstion 其實簡單欄目 Chrome 简体版

原文原文鏈接

Chrome的更新速度能夠說前無古人，如今我天天開機的第一件事就是打開Chrome檢查是否是有了新版本。界面清爽、操做人性化、網絡備份資料和快速的啓動速度令我愛不釋手，還有它擁有衆多的擴展程序，相對於firefox的插件來講，數量上和質量上稍顯不足，但相信chrome將會很快在擴展上超越firefox，firefox上內存佔用上實在不使人滿意，也許我使用firefox的一個緣由就是由於firebug，不過相信chrome平臺的類firebug插件也會很快出現。 css

Chrome的擴展開發十分簡單，咱們只須要掌握web開發的htm+CSS+Javascript，就能很快開發出本身的擴展。 html

你須要瞭解的內容

在開發前首先要掌握一些基礎知識。 web

一、Chrome擴展文件 chrome

Chrome擴展文件以.crx爲後綴名，在Google Chrome擴展官方網站下載擴展時，Chrome會將.crx文件下載到Chrome的Application Data文件夾的User Data\Temp下，通常是C:\Documents and Settings\User\Local Settings\Application Data\Google\Chrome\User Data\Temp，安裝完成或者取消安裝，該文件就會被刪除。.crx其實是一個壓縮文件，使用解壓文件打開這個文件就能夠看到其中的文件目錄，下圖中是「關燈看視頻」擴展的截圖： json

所以能夠認爲，咱們實際上就是寫一個Web應用，而後將按照Chrome的規定將一個快捷方式放在Chrome工具欄上。網絡

二、Browser Actions（擴展圖標） ide

把Browser Actions翻譯成擴展圖標不是很準確，但它的功能就是把你的應用顯示在Chrome工具欄上。咱們在上面看到一個文件manifest.json，就是使用這個文件來把相應的圖標和其餘參數註冊到Browser Actions。好比下圖中就是EverNote的擴展圖標。工具

三、Page Actions（地址欄圖標） 網站

若是你熟悉一些Chrome插件的話，你必定會發現有些擴展的圖標不是顯示在地址欄的右邊，而是顯示在地址內部右方，這就是Page Actions地址欄圖標。 google

能夠看出上面中有三個Page Actions，圖中我標出的是Chrome添加書籤，如今你就會發現其實這個也是Chrome的擴展，只不是它是直接內置在Chrome的。

Page Actions與Browser Actions的區別就是Page Actions不是隨時都是顯示的，必須在特定的頁面中這個功能才能使用。所以在開發中注意：若是不是所有頁面中都能使用的功能請使用Page Actions方式。

四、popup彈出窗口

popup屬於Browser Actions，當點擊圖標時出現這個窗口，能夠在裏面放置任何html元素，它的寬度是自適應的。固然，這個彈出窗口不會被Chrome攔截的:)

以下圖中是evernote的popup窗口：

五、Background Pages後臺頁面

這個窗口不會顯示，它是擴展程序的後臺服務，它會一直保持運行。好比在一些須要數據保存程序中，若是當前用戶關閉popup，就須要Background Pages來進行相應的操做。

本身動手作一個

咱們以一個簡單的任務管理程序來一步步講解。

上圖是界面實現，咱們首先完成界面的顯示部分，首先創建一個新文件夾，以擴展應用的名稱爲標題，咱們這裏的應用叫作MyTaskList。而後把找一個圖標文件，放到文件夾中，也可直接右鍵下載個人這個圖標：

圖標文件不要小於19px*19px，但最好也不要超過這個尺寸，雖然大圖它會自適應，但會使得應用文件變大。而後完成和未完成狀態的兩個圖標放到資源文件中，能夠創建任意文件夾放進去，由於CSS文件把定義它們的路徑。

創建manifest.json來定義咱們程序配置：

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

其中name表明應用程序名，version表明版本號，description表明功能描述。這些在安裝擴展後就能看到，見下圖：

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

接下來開始定義popup.html顯示，它不須要使用<html>、<head>和<body>標籤，能夠直接寫上樣式、腳本和html。咱們的popup.html源碼爲：

           <style type="text/css"> 
         
           *{margin:0;padding:0;} 
         
           body{color:#333;overflow: hidden;margin: 0px;padding:5px;background: white;font-size:12px;} 
         
           img{margin:0 4px;} 
         
           #addItemDiv{color:#ccc;} 
         
           .hide{display:none;} 
         
           .show{display:block;} 
         
           .taskItem{cursor:pointer;} 
         
           input{width:100%;} 
         
           label.on{width:12px; display:inline-block; height:12px; background:url(images/bg_task_on.gif) no-repeat 0px 2px;} 
         
           label.off{width:12px; display:inline-block; height:12px; background:url(images/bg_task_off.gif) no-repeat 0px 2px;} 
         
           </style> 
         
           <div id="newItem" class="gray">添加新項</div> 
         
           <div id="addDiv" class="hide"><input type="text" id="txtTitle" /></div> 
         
           <div id="taskItemList"> 
         
               <div class="taskItem"> 
         
                   <label class="on"></label><span class="taskTitle">新任務</span> 
         
               </div> 
         
               <div class="taskItem"> 
         
                   <label class="off"></label><span class="taskTitle">已完成任務</span> 
         
               </div> 
         
           </div>