# 編寫(xiě)第一個(gè)Chrome Extension

joyqi 發(fā)布于2019-08-23 13:50 / 2937人閱讀

摘要：可以加載到內(nèi)，通過(guò)操縱瀏覽器，從而完成一些定制的工作。一個(gè)最低需求的文件是必要的可選的圖標(biāo)等。如果這樣驗(yàn)證都是如期望的話(huà)，就表明你的第一個(gè)擴(kuò)展已經(jīng)開(kāi)發(fā)成功。正式發(fā)布可以在內(nèi)發(fā)布擴(kuò)展，只要點(diǎn)擊進(jìn)入后，按照操作指示即可。

Chrome Extension可以加載到Chrome內(nèi)，通過(guò)操縱Chrome瀏覽器，從而完成一些定制的工作。

假設(shè)你想要一個(gè)功能，它可以在你點(diǎn)擊上下文菜單項(xiàng)目時(shí)剪貼當(dāng)前標(biāo)簽的URL和標(biāo)題的話(huà)，這個(gè)功能在Chrome本身并不支持，那么就可以通過(guò)一個(gè)Chrome Extension來(lái)完成此項(xiàng)特性。

最少結(jié)構(gòu)

在編碼過(guò)程中，我常常需要?jiǎng)?chuàng)建一些占位圖片，以便驗(yàn)證UI布局和效果。因此我想要?jiǎng)?chuàng)建一個(gè)Chrome Extension，當(dāng)用戶(hù)打開(kāi)新的頁(yè)面時(shí)，使用一個(gè)生成PlaceHolder的鏈接群替代默認(rèn)的新頁(yè)面。

一個(gè)Chrome Extension最低需求的文件是manifest.json、必要的html
可選的圖標(biāo)、CSS、JS等。這里的文件清單如下：

manifect.json 元文件
newtab.html   HTML文件
120.png       圖標(biāo)文件

元文件manifect.json

元文件用于描述一個(gè)Chrome Extension的信息，是創(chuàng)建一個(gè)Chrome Extension所必須的。

此文件是一個(gè)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"]
}

接下來(lái)就非常關(guān)鍵的幾個(gè)字段做出說(shuō)明：

permissions字段指明應(yīng)用需要的權(quán)限。因?yàn)槲覀冃枰采w默認(rèn)的Chrome新建頁(yè)面的內(nèi)容，因此需要使用permissions字段，指明需要控制activeTab權(quán)限

chrome_url_overrides字段，指明覆蓋Chrome新建頁(yè)面的頁(yè)面，這里是newtab.html文件。此文件就是一個(gè)我們熟悉的任何的HTML文件，其中可以使用任何合法的HTML標(biāo)簽，以及包含和引入CSS、JS文件

browser_action字段也是非常關(guān)鍵的，用來(lái)指明Chrome Extension在Chrome工具條的圖標(biāo)和抬頭。加載任何一個(gè)擴(kuò)展后，會(huì)在Chrome瀏覽器工具條上顯示此指定的圖標(biāo)，當(dāng)鼠標(biāo)移動(dòng)到此圖標(biāo)時(shí)會(huì)顯示此指定抬頭

其他字段，這樣用于顯示和備注目的，比如作者author，擴(kuò)展名字name等。它們不是關(guān)鍵字段，但是也需要學(xué)習(xí)了解

新頁(yè)面文件和圖標(biāo)

在manifest文件內(nèi)指定了newtab.html，會(huì)在用戶(hù)創(chuàng)建新頁(yè)面的時(shí)候顯示，因此是一個(gè)關(guān)鍵的文件。我們需要再次列出常見(jiàn)的需要生成PlaceHolder圖片的鏈接，內(nèi)容如下：

Image PlaceHolder!

    640X400

    640X640
    
    32X32

因?yàn)橹皇菧y(cè)試，可以生成一個(gè)占位圖來(lái)做圖標(biāo)，我們通過(guò)鏈接https://via.placeholder.com/120創(chuàng)建一個(gè)突破，并保存到

120.png

文件內(nèi)。

現(xiàn)在文件準(zhǔn)備完畢，可以去看效果了。

測(cè)試效果

打開(kāi)擴(kuò)展加載鏈接，進(jìn)入Chrome擴(kuò)展管理頁(yè)面，并打開(kāi)開(kāi)發(fā)者模式,點(diǎn)擊"加載已解壓的擴(kuò)展程序"按鈕，在對(duì)話(huà)框內(nèi)選擇你的開(kāi)發(fā)目錄，即可加載擴(kuò)展，你可以看到在Chrome工具欄內(nèi)的此擴(kuò)展的圖標(biāo)，可以把鼠標(biāo)移動(dòng)到該圖標(biāo)上查看擴(kuò)展的標(biāo)題，點(diǎn)擊“新標(biāo)簽頁(yè)“菜單，可以看到你的newtab.html被顯示出來(lái)。

如果這樣驗(yàn)證都是如期望的話(huà)，就表明你的第一個(gè)擴(kuò)展已經(jīng)開(kāi)發(fā)成功。

正式發(fā)布

可以在Chrome Dashboard內(nèi)發(fā)布擴(kuò)展，只要點(diǎn)擊進(jìn)入后，按照操作指示即可。

進(jìn)一步

在此擴(kuò)展的開(kāi)發(fā)過(guò)程中，我們了解到了類(lèi)似

permissions

chrome_url_overrides

browser_action

等特定于Chrome Extension的特定開(kāi)發(fā)技術(shù)概念，可以在Chrome開(kāi)發(fā)者指導(dǎo)內(nèi)找到更多API信息。

我個(gè)人想要做一個(gè)按鍵后拷貝當(dāng)前頁(yè)面的Title和URL的擴(kuò)展，可以從此擴(kuò)展Copy URL + Title內(nèi)學(xué)習(xí)到更多的開(kāi)發(fā)知識(shí)。

credits

本文概略翻譯于此文。
How to Create and Publish a Chrome Extension in 20 minutes
感謝作者的奉獻(xiàn)。