一、課程簡介
1.1 實驗介紹
本課程的實驗環境由實驗樓提供，Google 瀏覽器拓展的運行環境為 Google 瀏覽器。在本實驗中，你將了解如何制作一個屬於你自己的 Google 拓展插件。
課程實驗分別從 Google 拓展插件的結構說起，並對拓展插件的必要代碼進行講解，幫助你實現屬於自己的 Google 瀏覽器拓展插件。拓展插件的主要實現一個任務列表的功能。
1.2 課程知識點
本實驗需要做實驗的同學掌握一些基本的 Web 開發知識，能夠看得懂基本的 Angular 基本語法，以及簡單的 Bootstrap 語法知識。
本實驗是一門純動手實驗課，但會在學習的過程中，會適當講解一些理論性的知識。對整體知識結構而言，本實驗會涉及到的主要知識點為：
- 基本的 Web 基礎知識點
- Google 拓展插件的項目結構
- Angular 的基本用法
- Bootstrap 的基礎知識
- 基本的 Linux 系統基礎操作
1.3 課程環境要求
本課程對於編輯器沒有什么要求，只要能夠編寫文本即可。在使用實驗樓的環境中，推薦大家使用 Sublime Text 這款文本編輯器，對本項目的代碼進行編寫。
Sublime Text 是一款非常不錯的文本編輯器，其代碼具有高亮的特點。該文本編輯器屬於輕量級的 IDE，深受廣大前端開發者們的喜愛。
二、實驗環境准備
2.1 安裝 Google 瀏覽器
實驗樓的環境是 Ubuntu 14.04，默認情況下沒有安裝 Google 瀏覽器，所以需要進行手動安裝 Google 瀏覽器。如果實驗樓環境進行升級迭代后，安裝了 Google 瀏覽器，這一步可以跳過。
首先在實驗樓的環境里，打開命令行終端，輸入如下命令，開始安裝 Google 瀏覽器：
# 使用 wget 命令對谷歌瀏覽器安裝包，進行下載 wget http://labfile.oss.aliyuncs.com/courses/702/google-chrome-stable_current_amd64.deb 
接着使用命令對 Google 安裝包進行安裝：
# 使用命令 dpkg 對 Google 安裝包進行安裝 sudo dpkg -i google-chrome-stable_current_amd64.deb 
不出意外的話，這里會報如上圖錯誤。報錯的根本原因是因為沒有安裝必備的依賴項。所以我們對依賴項進行安裝，在終端中輸入如下命令：
# 安裝必備的依賴項目 sudo apt-get -f install # 安裝完依賴項后，我們再重新進行 Google 項目包安裝 sudo dpkg -i google-chrome-stable_current_amd64.deb 
在完成安裝之后，此時，從實驗樓的菜單的互聯網選項進入，當你看到 Google 瀏覽器這個 Logo ，說明已經安裝成功了。
2.2 下載必要的依賴項
剛才我們已經將 Google 瀏覽器下載好了，現在我們對項目所需要的各種 js 引用，如 Angular，Bootstrap 的 js 文件和必要的 image 圖片進行下載。
首先創建我們的項目文件夾，輸入命令如下：
# 創建項目文件夾 mkdir Code_702 # 進入到該文件夾 cd Code_702 
此時當前路徑為文件夾 Code_702 下，在命令行終端中，輸入如下命令，對依賴文件進行下載：
wget http://labfile.oss.aliyuncs.com/courses/702/shiyanlou.zip 
對已經下載的 shiyanlou.zip 文件，輸入命令進行解壓，解壓后，可以用 tree . 查看當前目錄結構：
# 解壓依賴項文件夾 unzip shiyanlou.zip # 刪除下載的依賴項 shiyanlou.zip rm shiyanlou.zip 此時輸入如下命令 tree .，可以看到項目結構如下：
三、插件拓展的結構及實現
3.1 拓展插件結構
一個 Google 拓展插件，其實是壓縮在一起的一組文件，包括 HTML，CSS，Javascript 腳本，圖片文件，還有其它任何需要的文件。拓展插件本質上來說就是 web 頁面，它們可以使用所有的瀏覽器提供的 API，從 XMLHttpRequest 到 JSON 到 HTML5 全都有。
拓展插件可以與 Web 頁面交互，或者通過 content script 或 XMLHttpRequests 與服務器交互。拓展插件還可以訪問瀏覽器提供的內部功能，例如標簽或書簽等。
每個 Google 拓展插件都應該包含下面的文件：
- 一個 manifest 文件
- 一個或多個 html 文件
- 可選的一個或多個 javascript 文件
- 可選的任何需要的其他文件，例如圖片
參考 360 極速瀏覽器應用開發平台部分資料：
參考部分官方文檔資料。官方的文檔寫得很簡單，有興趣的同學也可以看下，可能需要翻牆：
3.1 創建清單文件 manifest.json
在每一個 Google 瀏覽器插件拓展，都會有一個 JSON 格式的文件，文件名叫做 manifest.json。這個文件主要記錄着拓展插件的版本，名稱，對拓展插件的描述，插件生成后的圖標等諸多描述。
下面的代碼編輯，可以根據自己個人的愛好選擇 Sublime Text 或者 Vim 編輯器。其中 Sublime Text 的位置在實驗樓系統菜單項的開發中：
打開后，雙擊主文件夾，看到 Code_702 這個文件夾，將 Code_702 拖入到 Sublime Text 即可：
現在，我們在 Code_702 這個文件夾下，創建清單文件 manifest.json，其代碼如下：
{
// 這個地方是固定的 "manifest_version": 2, // 插件顯示的名稱 "name": "Google_Time", // 對插件的詳細描述 "description": "Life is short, i use Python.", // 版本描述 "version": "1.0", // 瀏覽器的行為 "browser_action": { // 插件的圖標 "default_icon": "icon.png", // 插件的標題 "default_title": "Learning by doing", // 單擊圖標時，插件執行的頁面 "default_popup": "popup.html" } } 其中值得注意的是，單我們單擊插件的圖標時，插件所執行的頁面，為 popup.html 這個文件，這個文件是一個 html 文件。所以本質上來說， Google 拓展插件，就是由基本的 css，js，html 構成的一個小 Web 頁面展示，只是其載體為 Google 瀏覽器而已。
此時的目錄結構如下：
整個實驗的完整代碼，將會在實驗的末尾給出。下面我們創建當展示頁面。即單擊圖標 Logo 時，插件彈出頁面的 popup.html 文件。
3.2 創建任務列表展示頁面 popup.html 文件
還是在 Code_702 這個文件夾下，創建展示頁面 popup.html，其代碼如下：
<!DOCTYPE html> <html lang="en" ng-app="todoapp"> <head> <meta charset="UTF-8"> <title>Learning by doing</title> <!-- 引入 css 文件 start--> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> <!-- 引入 css 文件 end--> <style> </style> </head> <body> <div style=" width:373px;"> <img src="./images/logo.png" alt="" > <button class="btn btn-success">Learning by doing</button> </div> <!-- 引入人型時鍾代碼 start --> <div> <object> <embed src="./time.swf" width="373px;" height="150px;" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"; type="application/x-shockwave-flash"></embed> </object> </div> <!-- 引入人型時鍾代碼 end --> <div class="" style="width:373px;"> <section ng-controller="todolistcontroller" > <!-- 輸入框按鈕組 start--> <form class="input-group input-group-lg"> <input ng-model="text" type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-success" ng-click="add()"> 增加 </button> </span> </form> <!-- 輸入框按鈕組 end--> <!-- 清單列表 start --> <ul class="list-group"> <li ng-repeat="item in todolist" ng-class="{'done':item.done}" class="list-group-item"> <button ng-click="delete(item)" class="close" aria-label="close"> <span aria-hidden="true">×</span> <span class="sr-only"> Close </span> </button> <div class="checkbox"> <label> <input ng-model="item.done" type="checkbox"> <span>{{item.text}}</span> </label> </div> </li> </ul> <!-- 清單列表 end --> <p> 總共 <strong>{{todolist.length}}</strong>個任務，已完成<strong>{{doneCount()}}</strong>個 </p> </section> </div> <!-- 引入 js 文件 --> <script src="./js/angular.min.js" type="text/javascript"></script> <script src="./js/todolist.js"></script> </body> </html> 此時項目的目錄結構為：
這里有個微小的細節值得一提，代碼直接從左側的文檔復制到實驗樓里，中文會出現亂碼。這里解決的辦法如下，對代碼中的中文，使用相應的英文代替，或者在實驗樓中，使用中文輸入法重新拼寫。
3.3 創建任務列表邏輯處理文件 todolist.js
文件 todolist.js 是一個 Angular 語法的文件，用來處理清單列表中的邏輯對象。其中主要包括增添任務，刪除任務等主要功能。代碼不是很難，有任何一門編程語言基礎的同學，都可以快速地看懂這個 js 文件。這個文件創建在 /js 這個文件夾下面，首先進入到 /js 文件夾：
cd js 
創建文件 todolist.js 並編寫文件代碼，內容如下：
// 創建一個 Angular 對象 var todoapp = window.angular.module("todoapp", []); // 對象的控制器參數 todoapp.controller('todolistcontroller',['$scope', function($scope){ $scope.text = ''; // 默認的清單列表 $scope.todolist = [{ text: 'hello world', done: false }, { text: 'I use Python', done: false }]; // 實現增添任務功能 $scope.add = function(){ // 獲取任務文本內容 var text = $scope.text.trim(); if(text){ $scope.todolist.push({ text: text, done: false }); $scope.text = ''; } } // 刪除任務函數 $scope.delete = function(todo){ var index = $scope.todolist.indexOf(todo); $scope.todolist.splice(index, 1); } // 統計任務總數量 $scope.doneCount = function(){ var temp = $scope.todolist.filter(function(item){ return item.done; }); // 返回任務個數 return temp.length; } }]); 最終的項目的結構如下：
四、效果展示
4.1 文件打包
接下來，我們利用 Google 瀏覽器對文件進行打包，生成拓展插件格式的文件。步驟如圖所示，先打開 Google 瀏覽器，接着選擇更多工具，再選擇拓展程序、
接着我們勾選開發者模式（下圖的箭頭 1），再選擇打包拓展程序：
此時，選擇我們的項目文件夾 Code_702：
最后回到打包程序界面，選擇打包拓展程序：
成功后，會在打包的同級目錄下，生成兩個文件：
- 拓展程序，后綴為
.crx - 密鑰文件，后綴為
.pem
將 Code_702 同級目錄下后綴為.crx文件拖入到 Google 瀏覽器，拓展程序頁面，即可安裝：
4.2 效果展示
這是在實驗樓里的效果圖，由於 Adobe Flash 過期，所以 popup.html 里的下面這行代碼不起作用：
<!-- 引入人型時鍾代碼 start --> <div> <object> <embed src="./time.swf" width="373px;" height="150px;" align="center" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"; type="application/x-shockwave-flash"></embed> </object> </div> <!-- 引入人型時鍾代碼 end --> 
如果是在本地，進行 Google 瀏覽器插件安裝，只要把 Adobe Flash 更新即可，這是在本地運行的效果。生成的 .crx 文件已經打包，包含在實驗代碼里，在課程的結尾給出：
五、思考與總結
5.1 思考和總結
本實驗基於實驗樓的 Ubuntu 環境，利用 Google 瀏覽器打包文件，生成谷歌拓展插件。在編寫 Google 插件的過程中，主要用到了以下幾個知識：
- 基本的 Web 基礎知識點
- Google 拓展插件的項目結構
- Angular 的基本用法
- Bootstrap 的基礎知識
- 基本的 Linux 系統基礎操作
制作 Google 瀏覽器拓展插件，其項目文件，必須包含有清單文件，以及點擊圖標 Logo 后，要展示的 html 文件。
本實驗的最終代碼地址，及項目結構如下：
http://labfile.oss.aliyuncs.com/courses/702/Code_and_Crx.zip
干貨推薦
【干貨】Chrome插件(擴展)開發全攻略 ：http://blog.haoji.me/chrome-plugin-develop.html?from=xa 如果連接失效可以單擊這里：https://www.jianshu.com/p/9c4a552cc984