「譯」如何用原生JS打造一款簡易Google插件

2019 年 11 月 8 日
筆記

原文地址：How to Build a Simple Chrome Extension in Vanilla JavaScript
原文作者：Sara Wegman
譯者：Chor

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

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

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

關於Google插件

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

前期準備

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

新建文件

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

<!-- =================================  Simple Greeting Dashboard  ================================= //-->  <!DOCTYPE html>  <html>  <head>    <meta charset="utf-8" />    <title>Simple Greeting Dashboard</title>    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />  </head>  <body>     <!-- My code will go here -->     <script src="main.js"></script>  </body>  </html>

訂製你的mainfest.json文件

僅有這些文件還不能夠讓你的插件項目正常運行。我們還需要一個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也不需要改動。接著，添加程式碼行以告訴Google瀏覽器如何操作這個插件。

{    "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告訴Google瀏覽器當它處於匿名模式的時候應該如何操作該插件。「split」將允許插件運行在自己的進程中。其他選項請查閱developer documentation

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

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

創建圖標

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

上傳你的文件（如果你正在編寫自己的頁面）

要創建你的「新標籤頁式」Google插件，只需明悉以上全部資訊即可。在你訂製了mainfest.json文件後，你可以用HTML、CSS和JS設計任何自己想要的新標籤頁，之後按照下圖所示將其上傳。不過，如果你想知道我怎麼創建這個簡易面板的話，請跳至「創建一個設置菜單」部分。

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

刷新頁面，點擊「載入已解壓的拓展程式」。

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

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

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

創建一個設置菜單

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

<button id="settings-button">Settings</button>  <div class="settings" id="settings">     <form class="name-form" id="name-form" action="#">        <input class="name-input" type="text"          id="name-input" placeholder="Type your name here...">        <button type="submit" class="name-button">Add</button>     </form>  </div>

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

…因此很有必要通過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中。

<div class="greeting-container">     <h2 class="greeting" id="greeting"></h2>  </div>

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

var userName;

如果就這樣把useName變數放在HTML的問候語句中，即使為userName變數賦了值，Google瀏覽器也是不會使用相同的名字的。為了確保瀏覽器記住用戶，我們必須進行本地存儲的工作。因此，定義一個名為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%;  }