# 編寫第一個Chrome Extension

RecoReco發表於2019-02-17
Chrome

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
感謝作者的奉獻。

相關文章