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

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

做一款谷歌插件并沒有那么困難——在學(xué)習(xí)編程的第一年，我發(fā)布了兩個插件，并且都是用HTML、CSS和原生JS做的。在這篇文章中，我會用幾分鐘的時間教你們怎么完成這件事。

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

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

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

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

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

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

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

{
  "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)它處于匿名模式的時候應(yīng)該如何操作該插件。“split”將允許插件運(yùn)行在自己的進(jìn)程中。其他選項(xiàng)請查閱developer documentation

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

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

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

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

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

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

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

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

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

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

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

Settings

   

      
      Add
   

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

...因此很有必要通過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)在看起來好多了：

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

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

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

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

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

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

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

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

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

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

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

var userName;

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

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

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

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

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

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

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

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

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

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

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

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

getGreeting()

現(xiàn)在是時候收尾了。我將用flexbox使標(biāo)題居中，讓它變得更大。同時在CSS中給body添加一個漸變背景。為了在漸變背景中突出按鈕和h2，我會把它們設(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%;
}

就這樣！你的頁面大概會是下面這樣子：

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

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