如何用原生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%;
}

就这样！你的页面大概会是下面这样子：

虽然内容很少，但这是你建立和定义本身的谷歌插件的基础。若是有任何疑问，请告诉我，并随时在推特上@saralaughed 联系我。

【注】由于我不是学翻译的，因此不免会存在翻译上的失误，若有不对，还请指正。