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

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

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

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

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

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

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

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

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

現在，我們修改上面文件中關于插件信息的內容。只需改變代碼中的前三個值：name,version和description。填入插件名稱以及相關描述，由于這是第一個版本，所以version項就不需要改了。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告訴谷歌瀏覽器當它處于匿名模式的時候應該如何操作該插件。“split”將允許插件運行在自己的進程中。其他選項請查閱developer documentation

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

最后，設定我們的圖標：一個名為icon的png文件，尺寸為128x128像素。

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

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

一旦你設計好了新標簽頁，你的谷歌插件就創建完成了，隨時可以上傳至谷歌瀏覽器。手動上傳，請在瀏覽器的地址欄輸入chrome://extensions/，進入頁面后在右上角啟用開發者模式。

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

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

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

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

創建一個設置菜單

就這個插件來說，我首先要做的第一件事就是創建一個可供用戶添加自己名字的輸入框。因為我不打算讓它一直顯示，所以我將其放在一個名為settings的div下，該div只在用戶點擊settings按鈕的時候才會顯示。

Settings

   

      
      Add
   

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

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

.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;
}

現在看起來好多了：

不過，我們必須設置一下：用戶未點擊settings按鈕的時候輸入框不顯示。我將通過給settings類添加下面的代碼來完成這個設置，之后輸入框將從屏幕上消失：

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

現在創建一個名為settings-open的類，在用戶點擊settings按鈕的時候該類名將動態添加或去除。當添加settings-open類給已經有settings類的div時，div將不會隱藏，而是在正常位置顯示。

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

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

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

現在添加一個事件監聽器，它將會在settings按鈕被點擊的時候調用函數

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

在你點擊settings按鈕后，輸入框將顯示或隱藏。

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

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

var userName;

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

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

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

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

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

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

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

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

我想要讓該函數在用戶每次用表單提交名字的時候都被調用。這里用事件監聽器，它可以調用changeName函數并防止在表單提交的時候頁面默認刷新。

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

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

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

getGreeting()

現在是時候收尾了。我將用flexbox使標題居中，讓它變得更大。同時在CSS中給body添加一個漸變背景。為了在漸變背景中突出按鈕和h2，我會把它們設置成白色的。

.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%;
}

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

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

【注】因為我不是學翻譯的，所以難免會存在翻譯上的失誤，如有不對，還請指正。