[译] 如何使用原生 JavaScript 构建简单的 Chrome 扩展程序

时间  2019-11-17
标签 如何 使用 原生 javascript 构建 简单 chrome 扩展 程序 栏目 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教程