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

摘要：今天，我打算向你们展示如何用原生做一款谷歌插件不依靠任何诸如或者框架的原生。我将向你们展示如何从零开始打造一款简易的谷歌插件。关于谷歌插件从本质上来说，一款谷歌插件只是一些用来定制浏览体验的文件。

今天，我打算向你们展示如何用原生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 联系我。

【注】因为我不是学翻译的，所以难免会存在翻译上的失误，如有不对，还请指正。