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

如果說十年前，IE就是瀏覽器的代名詞，那今天的Chrome就是過去的IE。在最新的市場份額調查中，Chrome以近60%的市場占有率制霸瀏覽器市場，并在持續擴大中。

Chrome 的好用除了本身的流暢性以外，70% 的功勞更要歸于其強大又順手的擴展插件，這些插件滿足了不同人的不同需求，也將該瀏覽器的使用體驗拉升到了一個「曾今滄海難為水」的境界。

可以說 Chrome 沒了插件，就好像悟空沒了金箍棒。你一定很好奇這些五花八門的插件都是怎么實現的呢？本課程將帶你打造屬于自己的 Google 瀏覽器擴展，實現的功能為列表清單。

學習該實驗需要掌握基本的 Web 開發知識，以及能夠看懂基本的 Angular 語法。

本教程由lucat發布在實驗樓，完整教程、代碼及在線練習地址：手把手教你實現 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，深受廣大前端開發者們的喜愛。

二、實驗環境準備

2.1 安裝 Google 瀏覽器

實驗樓的環境是 Ubuntu 14.04，默認情況下沒有安裝 Google 瀏覽器，所以需要進行手動安裝 Google 瀏覽器。如果實驗樓環境進行升級迭代后，安裝了 Google 瀏覽器，這一步可以跳過。

首先在實驗樓的環境里，打開命令行終端，輸入如下命令，開始安裝 Google 瀏覽器：

接著使用命令對 Google 安裝包進行安裝：

不出意外的話，這里會報如上圖錯誤。報錯的根本原因是因為沒有安裝必備的依賴項。所以我們對依賴項進行安裝，在終端中輸入如下命令：

在完成安裝之后，此時，從實驗樓的菜單的互聯網選項進入，當你看到 Google 瀏覽器這個 Logo ，說明已經安裝成功了。

2.2 下載必要的依賴項

剛才我們已經將 Google 瀏覽器下載好了，現在我們對項目所需要的各種 js 引用，如 Angular，Bootstrap 的 js 文件和必要的 image 圖片進行下載。

首先創建我們的項目文件夾，輸入命令如下：

此時當前路徑為文件夾?Code_702?下，在命令行終端中，輸入如下命令，對依賴文件進行下載：

對已經下載的?shiyanlou.zip?文件，輸入命令進行解壓，解壓后，可以用?tree .?查看當前目錄結構：

此時輸入如下命令?tree .，可以看到項目結構如下：

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

3.1 拓展插件結構

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

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

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

一個 manifest 文件

一個或多個 html 文件

可選的一個或多個 javascript 文件

可選的任何需要的其他文件，例如圖片

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

http://open.chrome.360.cn/extension_dev/overview.html

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

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，其代碼如下：

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

此時的目錄結構如下：

整個實驗的完整代碼，將會在實驗的末尾給出。下面我們創建當展示頁面。即單擊圖標 Logo 時，插件彈出頁面的?popup.html?文件。

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

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

此時項目的目錄結構為：

這里有個微小的細節值得一提，代碼直接從左側的文檔復制到實驗樓里，中文會出現亂碼。這里解決的辦法如下，對代碼中的中文，使用相應的英文代替，或者在實驗樓中，使用中文輸入法重新拼寫。是會員的同學，也可以使用 WebIDE 功能。

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

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

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

最終的項目的結構如下：

四、效果展示

4.1 文件打包

接下來，我們利用 Google 瀏覽器對文件進行打包，生成拓展插件格式的文件。步驟如圖所示，先打開 Google 瀏覽器，接著選擇更多工具，再選擇拓展程序、

接著我們勾選開發者模式（下圖的箭頭 1），再選擇打包拓展程序：

此時，選擇我們的項目文件夾?Code_702：

最后回到打包程序界面，選擇打包拓展程序：

成功后，會在打包的同級目錄下，生成兩個文件：

拓展程序，后綴為?.crx

密鑰文件，后綴為?.pem

將?Code_702?同級目錄下后綴為.crx文件拖入到 Google 瀏覽器，拓展程序頁面，即可安裝：

4.2 效果展示

這是在實驗樓里的效果圖，由于 Adobe Flash 過期，所以?popup.html?里的下面這行代碼不起作用：

如果是在本地，進行 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

本文轉載自異步社區。

軟件開發 網絡 高性能計算 Web應用防火墻 WAF

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。