极客教程JavaScript 构建每日激励名言 – Google Chrome & Microsoft Edge 扩展
在这篇文章中，我们将学习如何构建每日激励名言 – Google Chrome & Microsoft Edge 扩展。作为开发者、程序员或编码者，我们在某些时候肯定会感到失去动力，因此今天我们将学习如何构建一个能够生成每日激励名言的Google Chrome扩展。
前提条件： 所以在我们开始之前，我们需要一些基础设施在我们的电脑上。
- 下载或更新你的 Google Chrome & Microsoft Edge到最新版本。
- 现在我们需要一个IDE来编写我们的代码，在这里我使用的是 VS Code 。
构建 Chrome扩展 和 Microsoft Edge 扩展 的过程非常相似。
为应用程序创建文件：
步骤1： 在你的本地系统上创建一个名为 DailyQuotes 的文件夹，然后在终端中打开该文件夹。
mkdir DailyQuotes
cd DailyQuotesCreate
步骤2： 在Visual Studio Code的左侧边栏中点击“创建文件”按钮，创建我们应用程序所需的文件。以下文件是必需的：
或者在终端中输入以下内容：
touch popup.html
touch manifest.json
touch style.css
touch script.js
可选文件: logo.png或logo.jpg (使用128×128像素), README.md (如果你把代码上传到GitHub，这将对你有帮助)
项目结构:
为了帮助我们更好地理解这些文件，让我简要描述一下它们：
- manifest.json: 没有这个文件，我们无法在Chrome浏览器上使用扩展程序，这是项目的基本结构和基础。
- popup.html: 正如我们所见，这个文件是一个 HTML 文档，我们在其中概述项目的结构。这个文件有助于Chrome扩展的弹出功能。因此，它们是最关键的文件。
- script.js: 这个文件作为扩展程序的大脑，实现API调用和所有其他运行方面的功能。
- **style.css & logo.png: ** 是否包含这些文件或者跳过它们完全取决于你。不过，我建议使用logo.png，因为点击它将启动扩展程序，并给页面带来更加精美的外观。
现在让我们逐个检查每个代码来构建我们的应用程序：
- manifest.json: 下面的图标选项 browser_action 将显示图标并打开HTML文件。此外，我们还必须给予活动选项卡权限，以使我们的Chrome扩展程序正常工作。否则，浏览器将不会考虑此操作并阻止Chrome扩展程序。
{
"name": "Daily Quotes",
"version": "1.0.1",
"manifest_version" : 2,
"browser_action": {
"default_popup": "popup.html",
"default_icon": "logo.png"
},
"icons": {
"128": "logo.png"
},
"permissions": ["activeTab"]
}
- popup.html： 我们现在可以通过popup.html看到随机出现的引用语。除了引用语外，作者的姓名也将在这里显示，因此我们为其添加了额外的空间。在默认状态下，我们将显示类似“引用语将在此处显示”的默认值，以及在作者部分显示“作者”。因此，当数据得到正确获取后，我们可以显示结果。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Daily Quotes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1><u> Daily Quotes </u></h1>
<div class="quote-box">
<p id="quote">
"Quotes will appear here"
</p>
<small id="author">
Author
</small>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
- style.css: 为了获得更好的视觉体验，我们在引用和作者部分添加了一些CSS。让我们来看看代码以更好地理解。
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, Cochin, Georgia, Times,
'Times New Roman', serif;
}
body {
display: flex;
/* background-color: aqua; */
justify-content: center;
align-items: center;
border: 3px solid red;
border-radius: 3px;
min-height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 25px 50px;
border-radius: 2px solid red;
}
#quote {
margin: 10px 10px;
width: 500px;
color: blue;
font-size: 20px;
font-weight: bold;
font-style: italic;
}
#author {
font-size: 18px;
padding-left: 300px;
font-style: italic;
font-weight: 900;
}
- script.js： 作为项目的大脑，这个文件需要小心处理。任何错误的代码都有可能导致整个应用程序崩溃，结果就无法显示。因此，让我们先看看代码，然后我们会逐行理解它。
Javascript
let quote = document.querySelector("#quote");
let author = document.querySelector("#author");
let api_url = "http://quotable.io/random";
fetch(api_url)
.then(res => res.json())
.then(data => {
quote.innerHTML = '"' + data.content + '"';
author.innerHTML = "-" + data.author;
});
对于这个应用，我们使用了一个随机引语生成器API。这是API的链接，你可以点击它，你会看到每次点击时它都会生成随机的引语。
http://quotable.io/random
因此，我们使用JavaScript的fetch函数获取API的数据，所以当我们点击扩展的标志时，它会使用JavaScript改变innerHTML，我们可以在script.js代码中看到。
经过所有这些工作，我们的扩展现在准备好在生产中使用了。所以让我们学习如何使用它并将其添加到我们的浏览器中。
加载扩展并在浏览器上使用的步骤： 这里我们将看到如何在Microsoft Edge浏览器上加载扩展，并按照相同的步骤在Google Chrome浏览器上加载。
步骤1： 打开Microsoft Edge并选择屏幕右侧的三个点。现在您将看到一个带有多个选项的菜单，但您必须选择扩展，如下图所示
步骤2： 点击扩展程序，你会看到一个“ 管理扩展程序 ”的选项弹出。然后点击它，一个新的扩展程序页面将打开。
步骤3： 开发者选项将在扩展程序页面的左侧找到。启用开发者模式。然后点击“ 加载已解压项 ”。这将允许我们选择我们的项目文件夹并将其上传到浏览器。请参考下面的图片：
步骤4： 选择DailyQuotes文件夹，其中包含我们编写的所有代码。然后它将上传到浏览器。
步骤5： 成功上传扩展后，点击浏览器的扩展按钮，您将看到已安装扩展的列表。您现在可以通过点击DailyQuotes扩展标志来查看应用程序的功能。这里有一张图片供您查阅：
输出： 这里有一个输出的GIF，这样你可以很容易地理解它。
