[譯] 如何使用原生 JavaScript 構建簡單的 Chrome 擴展程序

時間  2021-08-12
標籤 javascript css html 前端 java android ios git github web 欄目 JavaScript 简体版
原文   原文鏈接

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

開發 Chrome 擴展程序很是簡單 —— 在我開始編程生涯的頭一年，我發佈了兩個擴展程序，這兩個擴展程序都只用了 HTML、CSS 和純 JavaScript 進行開發。在本文中，我將在幾分鐘內引導你完成相同的操做。css

我將向你展現怎樣開發簡單的 dashboard 類型的 Chrome 擴展程序。可是，若是你有本身的想法，而且只想知道須要往現有項目中添加什麼內容就可讓它在 Chrome 中運行，你能夠跳轉到自定義 manifest.json 文件和圖標的部分。html

關於 Chrome 擴展程序

Chrome 擴展程序本質上只是一組能夠自定義 Google Chrome 瀏覽器體驗的文件。Chrome 擴展程序有幾種不一樣的類型；有些在知足某個特定條件時激活，例如當你來到商店的結帳頁面時；有些只在你點擊圖標時彈出；還有些每次打開新標籤時都會出現。今年我發佈的兩個擴展程序都是「新標籤」類型的；第一個是 Compliment Dash，這是一個用於保存待辦事項列表並讚美用戶的 dashboard，第二個是 Liturgical.li，一款針對牧師的工具。若是你知道如何開發簡單的網頁，那麼你就能夠絕不費力地開發這類擴展程序。前端

前提

咱們要把事情簡單化，所以在本教程中，咱們將只使用 HTML、CSS 和一些基礎的 JavaScript，以及如何自定義我將在下面添加的 manifest.json 文件。Chrome 擴展程序的複雜程度各不相同，所以構建 Chrome 擴展程序的複雜度取決於你想開發什麼樣的應用。在學習了基礎知識以後，你可使用本身的技術棧開發更復雜的擴展程序。java

建立你的項目文件

在本教程中，咱們將開發一個經過名字來歡迎用戶的簡單 dashboard。讓咱們稱之爲 Simple Greeting Dashboard。android

首先，你須要建立三個文件：index.html、main.css 和 main.js。把它們放在單獨的文件夾中。接下來，使用基礎的 HTML 代碼填充 HTML 文件，並引用 CSS 和 JS 文件：ios

<!-- =================================
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 的文件名保存在你的文件夾中：git

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

如今，讓咱們使用更多的擴展程序信息來更新示例文件。咱們只想更改這段代碼的前三個值：name、version 和 description。讓咱們來填寫擴展程序名字和一行描述，由於這是咱們的第一個版本，讓咱們保持版本值爲 1.0。manifest_version 編號應該保持不變。github

接下來，咱們將添加幾行代碼來告訴 Chrome 如何處理這個擴展程序。web

{
  "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 文件相同的文件夾中。

我爲 Simple Greeting Dash 製做的 128 x 128 圖標

上傳文件（若是你正在開發本身的頁面）

經過以上信息，你能夠建立你本身的新標籤 Chrome 擴展程序。在自定義 manifest.json 文件後，你能夠經過 HTML、CSS 和 JavaScript 設計你想要的任意類型的新標籤頁，並像下面展現的那樣將其上傳。可是，若是你想了解我將如何製做這個簡單的 dashboard，請跳轉至「建立設置菜單」。

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

刷新頁面並點擊「加載已解壓的擴展程序」。

接下來，選擇存儲 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>
複製代碼

如今，咱們的設置菜單以下所示：

太美了！

... 因此我要在 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;
}
複製代碼

如今咱們的設置菜單看起來好看一點了：

可是讓咱們在用戶沒有點擊 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%;
}
複製代碼

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

你本身的 Chrome 擴展程序！

它的功能可能不是不少，但它是你建立和設計本身的 Chrome dashboards 的良好基礎。若是你有任何疑問，請告訴咱們，並隨時在 Twitter 上與我聯繫，@saralaughed。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程