摘要：今天，我打算向你們展示如何用原生做一款谷歌插件不依靠任何諸如或者框架的原生。我將向你們展示如何從零開(kāi)始打造一款簡(jiǎn)易的谷歌插件。關(guān)于谷歌插件從本質(zhì)上來(lái)說(shuō)，一款谷歌插件只是一些用來(lái)定制瀏覽體驗(yàn)的文件。

今天，我打算向你們展示如何用原生JavaScript做一款谷歌插件----不依靠任何諸如React、Angular或者Vue框架的原生JS。

做一款谷歌插件并沒(méi)有那么困難——在學(xué)習(xí)編程的第一年，我發(fā)布了兩個(gè)插件，并且都是用HTML、CSS和原生JS做的。在這篇文章中，我會(huì)用幾分鐘的時(shí)間教你們?cè)趺赐瓿蛇@件事。

我將向你們展示如何從零開(kāi)始打造一款簡(jiǎn)易的谷歌插件。如果你對(duì)插件有自己的想法、只是想知道應(yīng)該向已有項(xiàng)目文件中添加什么，從而讓其運(yùn)行在谷歌瀏覽器中的話，你可以跳到自定義mainfest.json文件和圖標(biāo)的部分。

從本質(zhì)上來(lái)說(shuō)，一款谷歌插件只是一些用來(lái)定制瀏覽體驗(yàn)的文件。有許多不同類(lèi)型的插件，有些插件僅在某種特定條件下才會(huì)激活，比如當(dāng)你在商店的結(jié)賬頁(yè)面的時(shí)候；有些插件僅在你點(diǎn)擊圖標(biāo)后才會(huì)彈出；有些則在你每次打開(kāi)新標(biāo)簽頁(yè)的時(shí)候才會(huì)出現(xiàn)。我今年發(fā)布的兩款插件都是“新標(biāo)簽頁(yè)式”插件，第一款是Compliment Dash,一個(gè)可以顯示to-do list并問(wèn)候用戶(hù)的面板；第二款是Liturgical.li,為牧師量身打造的工具。如果你知道如何建設(shè)一個(gè)基本的網(wǎng)站，那么你就可以很輕松地做出這種插件。

我們打算一切從簡(jiǎn)，所以本教程只會(huì)使用HTML、CSS和基本的JS，以及下面會(huì)講到的自定義mainfest.json文件。谷歌插件的復(fù)雜度各不相同，因此做一款插件可能很簡(jiǎn)單，也可能很難，這取決于你打算讓它實(shí)現(xiàn)什么功能。在學(xué)習(xí)了本篇文章的基礎(chǔ)知識(shí)后，你將可以活用技能做出更為復(fù)雜的東西。

本教程中，我們將制作一款可以問(wèn)候用戶(hù)的簡(jiǎn)易面板，名字就叫Simple Greeting Dashboard好了。
首先需要?jiǎng)?chuàng)建三個(gè)文件：index.html,main.css和main.js。將這些文件放在各自的文件夾中。接下來(lái)，在html文件中書(shū)寫(xiě)必要的聲明，并引入css文件和js文件：

僅有這些文件還不能夠讓你的插件項(xiàng)目正常運(yùn)行。我們還需要一個(gè)mainfest.json文件以定制插件的基本信息?？梢栽贕oogle’s developer portal下載該文件，或者復(fù)制粘貼如下代碼到一個(gè)新文件中，另存為manifest.json文件。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}

現(xiàn)在，我們修改上面文件中關(guān)于插件信息的內(nèi)容。只需改變代碼中的前三個(gè)值：name,version和description。填入插件名稱(chēng)以及相關(guān)描述，由于這是第一個(gè)版本，所以version項(xiàng)就不需要改了。manifest_version也不需要改動(dòng)。
接著，添加代碼行以告訴谷歌瀏覽器如何操作這個(gè)插件。

{
  "name": "Simple Greeting Dashboard",
  
  "version": "1.0",
  
  "description": "This Chrome extension greets the user each time they open a new tab",
  
  "manifest_version": 2
  "incognito": "split",
  
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  
  "permissions": [
     "activeTab"
   ],
"icons": {
    "128": "icon.png"
    }
}

代碼incognito": "split告訴谷歌瀏覽器當(dāng)它處于匿名模式的時(shí)候應(yīng)該如何操作該插件?！皊plit”將允許插件運(yùn)行在自己的進(jìn)程中。其他選項(xiàng)請(qǐng)查閱developer documentation

正如你所看到的，"chrome_url_overrides"指定瀏覽器打開(kāi)新標(biāo)簽頁(yè)的時(shí)候打開(kāi)index.html。將值設(shè)定為“permissions”后，將彈出窗口，提示用戶(hù)安裝該插件將會(huì)覆蓋新標(biāo)簽頁(yè)。

最后，設(shè)定我們的圖標(biāo)：一個(gè)名為icon的png文件，尺寸為128x128像素。

現(xiàn)在我們還沒(méi)有Simple Greeting Dash的圖標(biāo)文件，所以來(lái)創(chuàng)建一個(gè)。你可以用下面我做的圖標(biāo)。如果你想自己做一個(gè)的話，用PS或者Canvas都可以。切記圖標(biāo)尺寸為128x128像素，然后另存為名稱(chēng)icon的png文件，與HTML文件、CSS文件、JS文件和Json文件放在同一個(gè)文件夾里。

要?jiǎng)?chuàng)建你的“新標(biāo)簽頁(yè)式”谷歌插件，只需明悉以上全部信息即可。在你定制了mainfest.json文件后，你可以用HTML、CSS和JS設(shè)計(jì)任何自己想要的新標(biāo)簽頁(yè)，之后按照下圖所示將其上傳。不過(guò)，如果你想知道我怎么創(chuàng)建這個(gè)簡(jiǎn)易面板的話，請(qǐng)?zhí)痢皠?chuàng)建一個(gè)設(shè)置菜單”部分。

一旦你設(shè)計(jì)好了新標(biāo)簽頁(yè)，你的谷歌插件就創(chuàng)建完成了，隨時(shí)可以上傳至谷歌瀏覽器。手動(dòng)上傳，請(qǐng)?jiān)跒g覽器的地址欄輸入chrome://extensions/，進(jìn)入頁(yè)面后在右上角啟用開(kāi)發(fā)者模式。

刷新頁(yè)面，點(diǎn)擊“加載已解壓的拓展程序”。

接著，選擇存放HTML、CSS、JS、mainfest.json文件和icon.png的文件夾，上傳。之后每次打開(kāi)新標(biāo)簽頁(yè)的時(shí)候該插件都會(huì)運(yùn)行！

在創(chuàng)建了自己的插件并且通過(guò)測(cè)試之后，你便可以申請(qǐng)一個(gè)開(kāi)發(fā)者賬號(hào)并將該應(yīng)用發(fā)布到谷歌拓展程序商店。這篇教程將指導(dǎo)你如何發(fā)布你的插件。

如果你現(xiàn)在不急著創(chuàng)建插件，只是想看看谷歌插件能夠做什么的話，下面將教你如何創(chuàng)建一個(gè)非常簡(jiǎn)易的問(wèn)候面板。

創(chuàng)建一個(gè)設(shè)置菜單

就這個(gè)插件來(lái)說(shuō)，我首先要做的第一件事就是創(chuàng)建一個(gè)可供用戶(hù)添加自己名字的輸入框。因?yàn)槲也淮蛩阕屗恢憋@示，所以我將其放在一個(gè)名為settings的div下，該div只在用戶(hù)點(diǎn)擊settings按鈕的時(shí)候才會(huì)顯示。

Settings

   

      
      Add
   

我們的頁(yè)面設(shè)置看起來(lái)大概是這樣的：

...因此很有必要通過(guò)CSS給它們添加一些樣式。我將給settings按鈕和輸入框添加內(nèi)邊距和輪廓，之后讓settings按鈕和輸入框之間留有一點(diǎn)空隙。

.settings {
   display: flex;
   flex-direction: row;
   align-content: center;
}
input {
   padding: 5px;
   font-size: 12px;
   width: 150px;
   height: 20px;
}

button {
   height: 30px;
   width: 70px;
   background: none; /* This removes the default background */
   color: #313131;
   border: 1px solid #313131;
   border-radius: 50px; /* This gives our button rounded edges */
   font-size: 12px;
   cursor: pointer;
}
form {
   padding-top: 20px;
}

現(xiàn)在看起來(lái)好多了：

不過(guò)，我們必須設(shè)置一下：用戶(hù)未點(diǎn)擊settings按鈕的時(shí)候輸入框不顯示。我將通過(guò)給settings類(lèi)添加下面的代碼來(lái)完成這個(gè)設(shè)置，之后輸入框?qū)钠聊簧舷В?/p>

transform: translateX(-100%);
transition: transform 1s;

現(xiàn)在創(chuàng)建一個(gè)名為settings-open的類(lèi)，在用戶(hù)點(diǎn)擊settings按鈕的時(shí)候該類(lèi)名將動(dòng)態(tài)添加或去除。當(dāng)添加settings-open類(lèi)給已經(jīng)有settings類(lèi)的div時(shí)，div將不會(huì)隱藏，而是在正常位置顯示。

.settings-open.settings {
   transform: none;
}

接著用JS實(shí)現(xiàn)類(lèi)名的改變。定義一個(gè)名為openSettings的函數(shù)，它的功能是實(shí)現(xiàn)settings-open類(lèi)名的添加或去除。具體做法是通過(guò)div的ID獲取到該div元素，之后調(diào)用clssLIst.toggle方法添加settings-open類(lèi)名。

function openSettings() {
   document.getElementById("settings").classList.toggle("settings-open");
}

現(xiàn)在添加一個(gè)事件監(jiān)聽(tīng)器，它將會(huì)在settings按鈕被點(diǎn)擊的時(shí)候調(diào)用函數(shù)

document.getElementById("settings-button").addEventListener("click", openSettings)

在你點(diǎn)擊settings按鈕后，輸入框?qū)@示或隱藏。

接下來(lái)，我們來(lái)創(chuàng)建問(wèn)候信息。首先在HTML中放入一個(gè)空的h2標(biāo)簽，之后用JS中的innerHTML方法來(lái)給它增加內(nèi)容。為方便稍后獲取h2元素，我們將給它一個(gè)ID，并將其放入一個(gè)名為greeting-container的div中。

現(xiàn)在，我將在JS中結(jié)合用戶(hù)名創(chuàng)建一個(gè)基本的問(wèn)候信息。首先聲明一個(gè)空的變量用以稍后存放用戶(hù)名。

var userName;

如果就這樣把useName變量放在HTML的問(wèn)候語(yǔ)句中，即使為userName變量賦了值，谷歌瀏覽器也是不會(huì)使用相同的名字的。為了確保瀏覽器記住用戶(hù)，我們必須進(jìn)行本地存儲(chǔ)的工作。因此，定義一個(gè)名為saveName的函數(shù)。

function saveName() {
    localStorage.setItem("receivedName", userName);
}

函數(shù)localStorage.setItem()接受兩個(gè)參數(shù)：第一個(gè)是用于稍后獲取信息的關(guān)鍵詞，第二個(gè)是它需要記住的信息，也即是useName。我將通過(guò)localStorage.setItem獲取儲(chǔ)存的信息，并用該信息來(lái)更新useName變量的值。

var userName = localStorage.getItem("receivedName");

在將這條語(yǔ)句添加進(jìn)表單的事件監(jiān)聽(tīng)器之前，我想要讓瀏覽器默認(rèn)指定一個(gè)用戶(hù)名，以應(yīng)對(duì)我沒(méi)有告訴它名字的情況。我將用if語(yǔ)句來(lái)完成這件事。

if (userName == null) {
   userName = "friend";
}

現(xiàn)在，將userName變量與表單連接起來(lái)。我們將該操作寫(xiě)進(jìn)函數(shù)里，這樣每次名字更新的時(shí)候都可以調(diào)用該函數(shù)。我們給這個(gè)函數(shù)取名changeName。

function changeName() {
   userName = document.getElementById("name-input").value;
   saveName();
}

我想要讓該函數(shù)在用戶(hù)每次用表單提交名字的時(shí)候都被調(diào)用。這里用事件監(jiān)聽(tīng)器，它可以調(diào)用changeName函數(shù)并防止在表單提交的時(shí)候頁(yè)面默認(rèn)刷新。

document.getElementById("name-form").addEventListener("submit", function(e) {
   e.preventDefault()
   changeName();
});

最后，我們來(lái)創(chuàng)建問(wèn)候語(yǔ)。我將把該語(yǔ)句也放進(jìn)一個(gè)函數(shù)中，這樣，在頁(yè)面刷新或者changeName()調(diào)用后，我都可以調(diào)用該函數(shù)。

function getGreeting() {
   document.getElementById("greeting").innerHTML  = `Hello, ${userName}. Enjoy your day!`;
}

getGreeting()

現(xiàn)在是時(shí)候收尾了。我將用flexbox使標(biāo)題居中，讓它變得更大。同時(shí)在CSS中給body添加一個(gè)漸變背景。為了在漸變背景中突出按鈕和h2，我會(huì)把它們?cè)O(shè)置成白色的。

.greeting-container {
   display: flex;
   justify-content: center;
   align-content: center;
}
.greeting {
   font-family: sans-serif;
   font-size: 60px;
   color: #fff;
}
body {
   background-color: #c670ca;
   background-image: linear-gradient(45deg, #c670ca 0%, #25a5c8 52%, #20e275 90%);
}
html {
   height: 100%;
}

就這樣！你的頁(yè)面大概會(huì)是下面這樣子：

雖然內(nèi)容不多，但這是你創(chuàng)建和定義自己的谷歌插件的基礎(chǔ)。如果有任何疑問(wèn)，請(qǐng)告訴我，并隨時(shí)在推特上@saralaughed 聯(lián)系我。

【注】因?yàn)槲也皇菍W(xué)翻譯的，所以難免會(huì)存在翻譯上的失誤，如有不對(duì)，還請(qǐng)指正。