# 編寫第一個Chrome Extension
Chrome Extension可以載入到Chrome內，通過操縱Chrome瀏覽器，從而完成一些定製的工作。
假設你想要一個功能，它可以在你點選上下文選單專案時剪貼當前標籤的URL和標題的話，這個功能在Chrome本身並不支援，那麼就可以通過一個Chrome Extension來完成此項特性。
最少結構
在編碼過程中，我常常需要建立一些佔位圖片，以便驗證UI佈局和效果。因此我想要建立一個Chrome Extension，當用戶開啟新的頁面時，使用一個生成PlaceHolder的連結群替代預設的新頁面。
一個Chrome Extension最低需求的檔案是manifest.json、必要的html 可選的圖示、CSS、JS等。這裡的檔案清單如下：
manifect.json 元檔案 newtab.htmlHTML檔案 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"]
}
複製程式碼
接下來就非常關鍵的幾個欄位做出說明：
- permissions欄位指明應用需要的許可權。因為我們需要覆蓋預設的Chrome新建頁面的內容，因此需要使用permissions欄位，指明需要控制activeTab許可權
- chrome_url_overrides欄位，指明覆蓋Chrome新建頁面的頁面，這裡是newtab.html檔案。此檔案就是一個我們熟悉的任何的HTML檔案，其中可以使用任何合法的HTML標籤，以及包含和引入CSS、JS檔案
- browser_action欄位也是非常關鍵的，用來指明Chrome Extension在Chrome工具條的圖示和抬頭。載入任何一個擴充套件後，會在Chrome瀏覽器工具條上顯示此指定的圖示，當滑鼠移動到此圖示時會顯示此指定抬頭
- 其他欄位，這樣用於顯示和備註目的，比如作者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內釋出擴充套件，只要點選進入後，按照操作指示即可。
進一步
在此擴充套件的開發過程中，我們瞭解到了類似
- permissions
- chrome_url_overrides
- browser_action
等特定於Chrome Extension的特定開發技術概念，可以在Chrome開發者指導內找到更多API資訊。
我個人想要做一個按鍵後拷貝當前頁面的Title和URL的擴充套件，可以從此擴充套件ofollow,noindex">Copy URL + Title 內學習到更多的開發知識。