[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

shery發表於2018-09-12
JavaScriptChrome套件

今天，我將向你展示如何使用原生 JavaScript 開發 Chrome 擴充套件程式 —— 也就是說，不使用諸如 React、Angular、Vue 之類框架的純 JavaScript。

開發 Chrome 擴充套件程式非常簡單 —— 在我開始程式設計生涯的頭一年，我釋出了兩個擴充套件程式，這兩個擴充套件程式都只用了 HTML、CSS 和純 JavaScript 進行開發。在本文中，我將在幾分鐘內引導你完成相同的操作。

我將向你展示怎樣開發簡單的 dashboard 型別的 Chrome 擴充套件程式。但是，如果你有自己的想法，並且只想知道需要往現有專案中新增什麼內容就可以讓它在 Chrome 中執行，你可以跳轉到自定義 manifest.json 檔案和圖示的部分。

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

關於 Chrome 擴充套件程式

Chrome 擴充套件程式本質上只是一組可以自定義 Google Chrome 瀏覽器體驗的檔案。Chrome 擴充套件程式有幾種不同的型別；有些在滿足某個特定條件時啟用，例如當你來到商店的結賬頁面時；有些只在你點選圖示時彈出；還有些每次開啟新標籤時都會出現。今年我釋出的兩個擴充套件程式都是“新標籤”型別的；第一個是 Compliment Dash，這是一個用於儲存待辦事項列表並讚美使用者的 dashboard，第二個是 Liturgical.li，一款針對牧師的工具。如果你知道如何開發簡單的網頁，那麼你就可以毫不費力地開發這類擴充套件程式。

前提

我們要把事情簡單化，因此在本教程中，我們將只使用 HTML、CSS 和一些基礎的 JavaScript，以及如何自定義我將在下面新增的 manifest.json 檔案。Chrome 擴充套件程式的複雜程度各不相同，因此構建 Chrome 擴充套件程式的複雜度取決於你想開發什麼樣的應用。在學習了基礎知識之後，你可以使用自己的技術棧開發更復雜的擴充套件程式。

建立你的專案檔案

在本教程中，我們將開發一個通過名字來歡迎使用者的簡單 dashboard。讓我們稱之為 Simple Greeting Dashboard。

首先，你需要建立三個檔案：index.html、main.css 和 main.js。把它們放在單獨的資料夾中。接下來，使用基礎的 HTML 程式碼填充 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>
   <!-- 將在這裡新增業務程式碼 -->
   <script src="main.js"></script>
</body>
</html>
複製程式碼

自定義你的 manifest.json 檔案

這些檔案還不足以讓你的專案作為 Chrome 擴充套件程式執行。為此，我們需要一個 manifest.json 檔案，我們將使用一些基本的擴充套件程式資訊進行自定義。你可以在 Google 的開發人員網站上下載該檔案，也可以直接將以下程式碼複製/貼上到新檔案中，並且以 manifest.json 的檔名儲存在你的資料夾中：

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}
複製程式碼

現在，讓我們使用更多的擴充套件程式資訊來更新示例檔案。我們只想更改這段程式碼的前三個值：name、version 和 description。讓我們來填寫擴充套件程式名字和一行描述，因為這是我們的第一個版本，讓我們保持版本值為 1.0。manifest_version 編號應該保持不變。

接下來，我們將新增幾行程式碼來告訴 Chrome 如何處理這個擴充套件程式。

{
  "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" 欄位會告知 Chrome 在處於隱身模式時如何處理這個擴充套件程式。當瀏覽器處於隱身模式時，"split" 將允許擴充套件程式在其自己的程式中執行；有關其他選項，請參閱 Chrome 開發者文件。

正如你可能看到的那樣，"chrome_url_overrides" 告訴 Chrome 每次開啟新標籤時都會開啟 index.html。"permissions" 的值會在使用者試圖安裝這個擴充套件程式時，向使用者提供一個彈框提示，讓他們知道這個擴充套件程式將覆蓋他們的新標籤。

最後，我們告訴 Chrome 要顯示什麼作為我們的圖示：一個名為 icon.png 的檔案，尺寸為 128 x 128 畫素。

建立一個圖示

由於我們還沒有圖示檔案，接下來，我們將為 Simple Greeting Dash 建立一個圖示。請隨意使用我下面製作的那個圖示。如果你想自己製作一個，可以使用 Photoshop 或者 Canva 這樣的免費服務輕鬆完成。請確保尺寸為 128 x 128 畫素，並將其作為 icon.png 儲存在與 HTML、CSS、JS 和 JSON 檔案相同的資料夾中。

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

我為 Simple Greeting Dash 製作的 128 x 128 圖示

上傳檔案（如果你正在開發自己的頁面）

通過以上資訊，你可以建立你自己的新標籤 Chrome 擴充套件程式。在自定義 manifest.json 檔案後，你可以通過 HTML、CSS 和 JavaScript 設計你想要的任意型別的新標籤頁，並像下面展示的那樣將其上傳。但是，如果你想了解我將如何製作這個簡單的 dashboard，請跳轉至“建立設定選單”。

一旦你完成新標籤頁的樣式設定後，你的 Chrome 擴充套件程式就算完成了，並準備好了上傳到 Chrome。要自己上傳已經完成的擴充套件程式，請在瀏覽器中訪問 chrome://extensions/ 並切換右上角的開發者模式。

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

重新整理頁面並點選“載入已解壓的擴充套件程式”。

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

接下來，選擇儲存 HTML、CSS、JS 和 manifest.json，以及你的 icon.png 檔案的資料夾，並上傳這些檔案。擴充套件程式應該在每次開啟新的標籤頁時都生效！

一旦你完成擴充套件程式開發並自行測試後，你可以獲取一個開發者帳戶並將其轉到 Chrome 擴充套件程式商店。這個有關釋出擴充套件程式的指南應該有所幫助。

如果你現在沒有建立自己的擴充套件程式，只想檢視 Chrome 擴充套件程式的功能，請繼續閱讀，瞭解如何製作一個非常簡單的問候語 dashboard。

建立設定選單

對於我的擴充套件程式，我要做的第一件事情是建立一個讓我的使用者可以新增他們的名字的輸入框。由於我不希望這個輸入框始終可見，我將把它放在一個名為 settings 的 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>
複製程式碼

現在，我們的設定選單如下所示：

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

太美了！

... 所以我要在 CSS 檔案中給他們新增一些基本的樣式。我將給按鈕和輸入框新增一些內邊距和輪廓（outline），然後在 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;
}
複製程式碼

現在我們的設定選單看起來好看一點了：

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

但是讓我們在使用者沒有點選 Settings 按鈕時隱藏它們。我將通過將以下樣式新增到 .settings 表單來實現，這將導致名稱輸入框從螢幕的一側消失：

transform: translateX(-100%);

transition: transform 1s;
複製程式碼

現在讓我們建立一個名為 settings-open 的樣式類名，當使用者單擊 Settings 按鈕時，我們將在 JavaScript 中對這個類名的新增和移除進行切換。當 settings-open 新增到 settings 表單時，它將不會應用任何變換；它只是在它本該出現的位置可見。

.settings-open.settings {
   transform: none;
}
複製程式碼

讓我們在 JavaScript 中使類名切換生效。我將建立一個名為 openSettings() 的函式，它將新增或移除類名 settings-open。為此，我將首先通過其 ID "settings" 獲取元素，然後使用 classList.toggle 新增類名 settings-open。

function openSettings() {
   document.getElementById("settings").classList.toggle("settings-open");
}
複製程式碼

現在我要新增一個事件監聽器，只要點選 Settings 按鈕，它就會觸發該函式。

document.getElementById("settings-button").addEventListener('click', openSettings)
複製程式碼

當你點選 Settings 按鈕，這將使你的設定表單顯示或消失。

建立個性化問候語

接下來，讓我們建立問候訊息。我們將在 HTML 中建立一個空的 h2 標籤，然後在 JavaScript 中使用 innerHTML 填充它。我將給 h2 標籤一個 ID，以便我後面能訪問到它，並將它放在一個名為 greeting-container 的 div 中方便使其居中。

<div class="greeting-container">
   <h2 class="greeting" id="greeting"></h2>
</div>
複製程式碼

現在，在 JavaScript 中，我將使用使用者名稱稱建立一個基本的問候語。首先，我將宣告一個變數儲存名稱，現在它是空的，稍後新增。

var userName;
複製程式碼

即使 userName 不為空，如果我只是將 userName 放入 HTML 中的問候語中，如果我在另一個會話中開啟它，Chrome 也不會使用相同的名稱。為了確保 Chrome 記住我是誰，我將不得不使用本地儲存。所以我將建立一個名為 saveName() 的函式。

function saveName() {
    localStorage.setItem('receivedName', userName);
}
複製程式碼

localStorage.setItem() 函式有兩個引數：第一個是我稍後用來訪問資訊的關鍵字，第二個是它需要記住的資訊；在這裡，需要記住的資訊是 userName。稍後我將通過 localStorage.getItem 獲取儲存的資訊，我將用它來更新 userName 變數。

var userName = localStorage.getItem('receivedName');
複製程式碼

在我們將其連結到表單中的事件監聽器之前，如果我還沒有告訴 Chrome 我的名字，我想告訴它如何稱呼我。我將使用 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()
複製程式碼

現在我將在 changeName() 函式中呼叫 getGreeting()，收工！

最後，設計你的頁面

現在是時候新增最後的潤色了。在 CSS 中，我將使用 flexbox 居中我的標題，為標題設定更大的字型，併為 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%;
}
複製程式碼

就是這樣！你的頁面將如下所示：

[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴充套件程式

你自己的 Chrome 擴充套件程式！

它的功能可能不是很多，但它是你建立和設計自己的 Chrome dashboards 的良好基礎。如果你有任何疑問，請告訴我們，並隨時在 Twitter 上與我聯絡，@saralaughed。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章