如何用原生JavaScript打造一款簡易谷歌插件

時間 2019-11-06

標籤如何原生 javascript 打造一款簡易谷歌插件欄目 JavaScript 简体版

原文原文鏈接

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

作一款谷歌插件並無那麼困難——在學習編程的第一年，我發佈了兩個插件，而且都是用HTML、CSS和原生JS作的。在這篇文章中，我會用幾分鐘的時間教大家怎麼完成這件事。html

我將向大家展現如何從零開始打造一款簡易的谷歌插件。若是你對插件有本身的想法、只是想知道應該向已有項目文件中添加什麼，從而讓其運行在谷歌瀏覽器中的話，你能夠跳到自定義mainfest.json文件和圖標的部分。web

關於谷歌插件

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

前期準備

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

新建文件

本教程中，咱們將製做一款能夠問候用戶的簡易面板，名字就叫Simple Greeting Dashboard好了。
首先須要建立三個文件：index.html,main.css和main.js。將這些文件放在各自的文件夾中。接下來，在html文件中書寫必要的聲明，並引入css文件和js文件：json

<!-- =================================
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也不須要改動。
接着，添加代碼行以告訴谷歌瀏覽器如何操做這個插件。框架

{
  "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 documentationide

正如你所看到的，"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按鈕的時候纔會顯示。

<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變量賦了值，谷歌瀏覽器也是不會使用相同的名字的。爲了確保瀏覽器記住用戶，咱們必須進行本地存儲的工做。所以，定義一個名爲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%;
}

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