手把手教你實現 Google 拓展插件

01-31

平時經常使用 Google 瀏覽器拓展插件，本次實驗將帶你打造屬於自己的 Google 瀏覽器擴展，實現的功能為列表清單。學習該實驗需要掌握基本的 Web 開發知識，以及能夠看懂基本的 Angular 語法。

本項目的完整教程及在線練習地址：手把手教你實現 Google 拓展插件 - 實驗樓（更多項目課程請查看全部課程 - 實驗樓）

一、課程簡介

1.1 實驗介紹

本課程的實驗環境由實驗樓提供，Google 瀏覽器拓展的運行環境為 Google 瀏覽器。在本實驗中，你將了解如何製作一個屬於你自己的 Google 拓展插件。

課程實驗分別從 Google 拓展插件的結構說起，並對拓展插件的必要代碼進行講解，幫助你實現屬於自己的 Google 瀏覽器拓展插件。拓展插件的主要實現一個任務列表的功能。

1.2 課程知識點

本實驗需要做實驗的同學掌握一些基本的 Web 開發知識，能夠看得懂基本的 Angular 基本語法，以及簡單的 Bootstrap 語法知識。

本實驗是一門純動手實驗課，但會在學習的過程中，會適當講解一些理論性的知識。對整體知識結構而言，本實驗會涉及到的主要知識點為：

基本的 Web 基礎知識點
Google 拓展插件的項目結構
Angular 的基本用法
Bootstrap 的基礎知識
基本的 Linux 系統基礎操作

1.3 課程環境要求

本課程對於編輯器沒有什麼要求，只要能夠編寫文本即可。在使用實驗樓的環境中，推薦大家使用 Sublime Text 這款文本編輯器，對本項目的代碼進行編寫。

Sublime Text 是一款非常不錯的文本編輯器，其代碼具有高亮的特點。該文本編輯器屬於輕量級的 IDE，深受廣大前端開發者們的喜愛。

1.4 項目效果

項目運行的效果如下圖：

二、插件拓展的結構及實現

一個 Google 拓展插件，其實是壓縮在一起的一組文件，包括 HTML，CSS，Javascript 腳本，圖片文件，還有其它任何需要的文件。拓展插件本質上來說就是 web 頁面，它們可以使用所有的瀏覽器提供的 API，從 XMLHttpRequest 到 JSON 到 HTML5 全都有。

拓展插件可以與 Web 頁面交互，或者通過 content script 或 XMLHttpRequests 與伺服器交互。拓展插件還可以訪問瀏覽器提供的內部功能，例如標籤或書籤等。

每個 Google 拓展插件都應該包含下面的文件：

一個 manifest 文件
一個或多個 html 文件
可選的一個或多個 javascript 文件
可選的任何需要的其他文件，例如圖片

參考 360 極速瀏覽器應用開發平台部分資料：

綜述--擴展開發文檔

參考部分官方文檔資料。官方的文檔寫得很簡單，有興趣的同學也可以看下，可能需要翻牆：

https://crxdoc-zh.appspot.com/extensions/getstarted

三、插件拓展實現的主要步驟

3.1 創建清單文件 manifest.json

在每一個 Google 瀏覽器插件拓展，都會有一個 JSON 格式的文件，文件名叫做 manifest.json。這個文件主要記錄著拓展插件的版本，名稱，對拓展插件的描述，插件生成後的圖標等諸多描述。

下面的代碼編輯，可以根據自己個人的愛好選擇 Sublime Text 或者 Vim 編輯器。其中 Sublime Text 的位置在實驗樓系統菜單項的開發中：

打開後，雙擊主文件夾，看到 Code_702 這個文件夾，將 Code_702 拖入到 Sublime Text 即可：

現在，我們在 Code_702 這個文件夾下，創建清單文件 manifest.json，其代碼如下：

{n // 這個地方是固定的n "manifest_version": 2,nn // 插件顯示的名稱n "name": "Google_Time",nn // 對插件的詳細描述n "description": "Life is short, i use Python.",nn // 版本描述n "version": "1.0",nn // 瀏覽器的行為n "browser_action": {nn // 插件的圖標n "default_icon": "icon.png",nn // 插件的標題n "default_title": "Learning by doing",nn // 單擊圖標時，插件執行的頁面n "default_popup": "popup.html"n }n}n

其中值得注意的是，當我們單擊插件的圖標時，插件所執行的頁面，為 popup.html 這個文件，這個文件是一個 html 文件。所以本質上來說， Google 拓展插件，就是由基本的 css，js，html 構成的一個小 Web 頁面展示，只是其載體為 Google 瀏覽器而已。

此時的目錄結構如下：

下面我們創建展示頁面。即單擊圖標 Logo 時，插件彈出頁面的 popup.html 文件。

3.2 創建任務列表展示頁面 popup.html 文件

還是在 Code_702 這個文件夾下，創建展示頁面 popup.html，其代碼如下：

<!DOCTYPE html>n<html lang="en" ng-app="todoapp">n<head>n <meta charset="UTF-8">n <title>Learning by doing</title>nn n <link rel="stylesheet" href="./css/bootstrap.min.css">n <link rel="stylesheet" href="./css/bootstrap-theme.min.css">n nn <style>n </style>n</head>n<body>nn<div stylex="background-color: #dcdcdc; width:373px;">n<img src="./images/logo.png" alt="" >n<button class="btn btn-success">Learning by doning</button> n</div>nnn<div>n <object>n <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>n </object>n </div>n nn<div class="" stylex="width:373px;">n <section ng-controller="todolistcontroller" >nn n <form class="input-group input-group-lg">n <input ng-model="text" type="text" class="form-control">n <span class="input-group-btn">n <button class="btn btn-success" ng-click="add()"> 增加 </button>n </span>n </form>n nn n <ul class="list-group">n <li ng-repeat="item in todolist" ng-class="{done:item.done}" class="list-group-item">n <button ng-click="delete(item)" class="close" aria-label="close">n <span aria-hidden="true">&times;</span>n <span class="sr-only"> Close </span>n </button>n <div class="checkbox">n <label>n <input ng-model="item.done" type="checkbox">n <span>{{item.text}}</span> n </label>n </div>n </li>n </ul>n nn <p>n 總共 <strong>{{todolist.length}}</strong>個任務，已完成<strong>{{doneCount()}}</strong>個n </p>n </section>n</div>nnn<script src="./js/angular.min.js" type="text/javascript"></script> n<script src="./js/todolist.js"></script>n</body>n</html>n

此時項目的目錄結構為：

3.3 創建任務列表邏輯處理文件 todolist.js

文件 todolist.js 是一個 Angular 語法的文件，用來處理清單列表中的邏輯對象。其中主要包括增添任務，刪除任務等主要功能。代碼不是很難，有任何一門編程語言基礎的同學，都可以快速地看懂這個 js 文件。這個文件創建在 /js 這個文件夾下面，首先進入到 /js 文件夾：

cd jsn

創建文件 todolist.js 並編寫文件代碼，內容如下：

// 創建一個 Angular 對象nvar todoapp = window.angular.module("todoapp", []);nn// 對象的控制器參數ntodoapp.controller(todolistcontroller,[$scope, function($scope){n $scope.text = ;nn // 默認的清單列表n $scope.todolist = [{n text: hello world,n done: falsen }, {n text: I use Python,n done: falsen }];nn // 實現增添任務功能n $scope.add = function(){nn // 獲取任務文本內容n var text = $scope.text.trim();n if(text){n $scope.todolist.push({n text: text,n done: falsen });nn $scope.text = ;n }n }nn // 刪除任務函數n $scope.delete = function(todo){n var index = $scope.todolist.indexOf(todo);nn $scope.todolist.splice(index, 1);n }nn // 統計任務總數量n $scope.doneCount = function(){n var temp = $scope.todolist.filter(function(item){n return item.done;n });nn // 返回任務個數n return temp.length;n }nn}]);n

最終的項目的結構如下：