一、開發chrome外掛的預備技術

工欲善其事，必先利其器，首先第一步是要準備開發外掛所要掌握的技術儲備，有如下幾個方面。

HTML/CSS/JS

網頁前端開發必備知識，如果您是一位前端開發攻城獅，恭喜您，這一步可忽略嘍。因為Chrome外掛開發實際上可以理解是開發一款小型的web應用。

JSON

JSON做為一種資料交換格式，需要了解和掌握，要不然manifest.json檔案沒法寫。

Chrome擴充套件API

寫外掛少不了和瀏覽器的API進行互動的，瞭解越多API的內容，開發起外掛遊刃有餘。API文件是一定要看的，谷歌官方（E文）的或者360極速瀏覽器提供的API文件（中文）都可以查閱。

二、入門必備

做足上述的準備工作之後，就可以試著寫一個簡單的外掛來入門了，當您體會了整體開發流程，並最終釋出一款自己寫的外掛之後，你會發現入門之後，自己想實現功能更強大的外掛有了思路。

manifest.json檔案的編寫

該檔案是核心配置檔案，需要掌握manifest.json檔案結構和欄位含義。

1. 基本欄位

包括擴充套件的名稱（name）、版本（version）、描述（description）、圖示位置（icons）和 manifest 版本（manifest_version）等資訊。

2. browser_action 欄位

3. permissions 欄位

permissions 是一個數組，它定義了外掛需要向 Chrome 申請的許可權，例如是透過 XMLHttpRequest 跨域請求資料？訪問瀏覽器選項卡（tabs）？獲取當前活動選項卡（activeTab）？瀏覽器通知（notifications）？還是儲存（storage）？等等，可以根據您的需要自行新增。

4. background 欄位

background 可以使外掛常駐後臺，比較常用的是指定子屬性 scripts，表示在外掛啟動時自動建立一個包含所有指定指令碼的頁面。

5. content_scripts 欄位

content_scripts 會根據你在它內部定義的 matches規則去匹配url，然後在匹配成功的url頁面中注入你指定的js和css等檔案。

測試打包釋出

1. 測試

方式一：開啟“設定 > 更多工具 > 擴充套件程式”

方式二：Chrome 位址列中輸入：chrome://extensions

2. 打包

3. 安裝

將打包後的 .crx 程式檔案直接拖到 Chrome 中即可完成外掛安裝。

好了，整體就是這麼一個學習流程，具體的每一步驟都需要您去學習和研究，這裡不可能寫成一部教程，學習的規劃有了，我相信很快您就能寫出第一個chrome外掛了，加油！

chrome作為前端開發的標準瀏覽器，擁有強大的功能，其中chrome外掛就其中非常有用的工具！作為一名前端，開發一款好用的chrome外掛也是一件非常有成就感的事！下面我就簡單敘述一下如何開發！

2、manifest.json介紹

必須配置的欄位、以及常用的配置欄位

defalut_popup 必須指定html檔案，另外html內不允許內聯js（inline javascript），外掛的開發和普通web開發是一樣的，都是用html、js、css。除此之外擴充套件還提供很多強大的api，幫助我們豐富瀏覽器的擴充套件功能。

3、常用APIchrome.tabschrome.runtime 可以監聽和響應擴充套件生命週期的事件chrome.webRequestchrome.windowchrome.storagechrome.contextMenuschrome.devtoolschrome.extension

使用大多數的api要宣告許可權的,因為js中使用chrome API，所以示例中在permissions這個欄位設定了tabs。

當然，清單的配置遠不止這些，隨著功能的強大，會看到更多的欄位。

https://developer.chrome.com/extensions/manifest

5、除錯