# 編寫第一個Chrome Extension

Chrome Extension能夠加載到Chrome內，經過操縱Chrome瀏覽器，從而完成一些定製的工做。

假設你想要一個功能，它能夠在你點擊上下文菜單項目時剪貼當前標籤的URL和標題的話，這個功能在Chrome自己並不支持，那麼就能夠經過一個Chrome Extension來完成此項特性。

最少結構

在編碼過程當中，我經常須要建立一些佔位圖片，以便驗證UI佈局和效果。所以我想要建立一個Chrome Extension，當用戶打開新的頁面時，使用一個生成PlaceHolder的連接羣替代默認的新頁面。

一個Chrome Extension最低需求的文件是manifest.json、必要的html 可選的圖標、CSS、JS等。這裏的文件清單以下：

manifect.json 元文件
newtab.html   HTML文件
120.png 	  圖標文件
複製代碼

元文件manifect.json

元文件用於描述一個Chrome Extension的信息，是建立一個Chrome Extension所必須的。

此文件是一個Json文件，在咱們此次需求中文件以下：

{
"manifest_version": 2,
"name": "PlaceHolderImage",
"description": "Make PlaceHolder Image",
"version": "1",
"author": "Reco",
"browser_action": {
   "default_icon": "120.png",
   "default_title": "PlaceHolder Factory"
 },
"chrome_url_overrides" : {
  "newtab": "newtab.html"
},
"permissions": ["activeTab"]
}
複製代碼

接下來就很是關鍵的幾個字段作出說明：

1. permissions字段指明應用須要的權限。由於咱們須要覆蓋默認的Chrome新建頁面的內容，所以須要使用permissions字段，指明須要控制activeTab權限
2. chrome_url_overrides字段，指明覆蓋Chrome新建頁面的頁面，這裏是newtab.html文件。此文件就是一個咱們熟悉的任何的HTML文件，其中可使用任何合法的HTML標籤，以及包含和引入CSS、JS文件
3. browser_action字段也是很是關鍵的，用來指明Chrome Extension在Chrome工具條的圖標和擡頭。加載任何一個擴展後，會在Chrome瀏覽器工具條上顯示此指定的圖標，當鼠標移動到此圖標時會顯示此指定擡頭
4. 其餘字段，這樣用於顯示和備註目的，好比做者author，擴展名字name等。它們不是關鍵字段，可是也須要學習瞭解

新頁面文件和圖標

在manifest文件內指定了newtab.html，會在用戶建立新頁面的時候顯示，所以是一個關鍵的文件。咱們須要再次列出常見的須要生成PlaceHolder圖片的連接，內容以下：

<h1>Image PlaceHolder!</h1>
<ul>
	<li><a href="https://via.placeholder.com/640X400">640X400</li>
	<li><a href="https://via.placeholder.com/640">640X640</li>	
	<li><a href="https://via.placeholder.com/32">32X32</li>	
</ul>
複製代碼

由於只是測試，能夠生成一個佔位圖來作圖標，咱們經過連接https://via.placeholder.com/120建立一個突破，並保存到

120.png
複製代碼

文件內。

如今文件準備完畢，能夠去看效果了。

測試效果

打開擴展加載連接，進入Chrome擴展管理頁面，並打開開發者模式,點擊"加載已解壓的擴展程序"按鈕，在對話框內選擇你的開發目錄，便可加載擴展，你能夠看到在Chrome工具欄內的此擴展的圖標，能夠把鼠標移動到該圖標上查看擴展的標題，點擊「新標籤頁「菜單，能夠看到你的newtab.html被顯示出來。

若是這樣驗證都是如指望的話，就代表你的第一個擴展已經開發成功。

正式發佈

能夠在Chrome Dashboard內發佈擴展，只要點擊進入後，按照操做指示便可。

進一步

在此擴展的開發過程當中，咱們瞭解到了相似

1. permissions
2. chrome_url_overrides
3. browser_action

等特定於Chrome Extension的特定開發技術概念，能夠在Chrome開發者指導內找到更多API信息。

我我的想要作一個按鍵後拷貝當前頁面的Title和URL的擴展，能夠今後擴展Copy URL + Title內學習到更多的開發知識。

credits

本文概略翻譯於此文。 How to Create and Publish a Chrome Extension in 20 minutes 感謝做者的奉獻。