如何在5分钟内制作Chrome扩展程序？| 极棒的新标签页覆盖
4.93/5 (8投票s)
学习如何在仅5分钟内制作一个Chrome扩展程序，用精美的随机图片覆盖新标签页
引言
在制作Chrome扩展程序之前，我们必须对扩展程序到底是什么有一个基本的了解。它只不过是为增强浏览器功能的插件或附加组件。
在这篇文章中，我们将创建一个Chrome扩展程序，每次您点击新标签页时，它都会显示精美的背景图片，并显示当天的名言。这个扩展程序适用于Google Chrome以及所有其他基于Chromium的浏览器。
背景
必备组件
您需要了解以下基础知识
- HTML
- CSS
- JavaScript
如果您已经熟悉上述技术，那么您应该已经知道这些技术是什么。我们将使用HTML、CSS和JavaScript创建一个简单的网站，并在Google Chrome内部托管它。我们可以借助JavaScript添加我们的业务逻辑。**要制作Chrome扩展程序**，我们需要遵循一些最佳实践或格式。
Using the Code
让我们开始吧。构建扩展程序非常简单，只需按照以下步骤操作即可。
步骤 1
打开您的Google Chrome，前往chrome://extensions/并启用开发者模式。
第二步
前往extensionizr.com并选择（通过将鼠标悬停在每个选项的“？”上，了解更多信息）
- 隐藏扩展
- 无需背景
- 无需花哨的选项
- 覆盖新标签页
- 添加jQuery
完成这些操作后，下载zip文件。
步骤 3
解压缩zip文件后，转到主文件夹中的manifest.json文件并编辑manifest.json。Manifest.json包含您的Chrome扩展程序所需的所有元数据，它是扩展程序的入口点。这只不过是一个JavaScript对象，具有以下属性，如name、version、description等。您可能没有permissions属性。只需从这里复制粘贴，稍后会需要它。
{
"name": "Beautiful New Tab",
"version": "0.0.1",
"manifest_version": 2,
"description": "Get beautiful images with quotes whenever you open a new tab.",
"homepage_url": "http://codesparta.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"chrome_url_overrides": {
"newtab": "src/override/override.html"
},
"permissions": [ "https://source.unsplash.com/","http://quotes.rest/"]
}
步骤 4
在CSS和js文件夹中分别创建一个.css文件和一个.js文件。
步骤 5
制作基本的HTML文档。前往src/override/，您将找到override.html文件。
将.js和.css文件都添加到override.html中。
<!DOCTYPE html>
<html>
<head>
<title>Make a Chrome Extension | Beautiful New Tab</title>
<link href="../../css/custom.css" rel="stylesheet" />
</head>
<body>
<h1>Quote of the day</h1>
<div class="quote">
<h1 id="quoteblock"></h1>
<h3 id="author"></h3>
</div>
<script src="../../js/jquery/jquery-1.12.3.min.js"></script>
<script src="../../js/jquery/app.js"></script>
</body>
</html>
步骤 6
我们将使用两个网站——一个网站将为我们提供一些精美的图片，另一个网站将为我们提供每日名言。
要向外部链接发出请求，我们必须在manifest.json的permissions中添加URL。
将以下CSS添加到custom.css中（我们使用了PT serif Google字体）。
@import url(https://fonts.googleapis.com/css?family=PT+Serif:400italic);
body {
background-image:url("https://source.unsplash.com/category/nature/1600x900");
background-repeat:no-repeat;
height:100%;
width:auto;
}
h1{
font-family: 'PT Serif', serif;
font-size:2.5em;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px rgba(150,150,150,0.75);
}
.quote{
color:#ffffff;
text-align:center;
vertical-align:middle;
padding:19% 15% 0 15%;
}
#quoteblock{
font-family: 'PT Serif', serif;
text-shadow:2px 2px 3px rgba(150,150,150,0.75);
font-size:2em;
}
#author{
font-family: 'PT Serif', serif;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px rgba(150,150,150,0.75);
}
步骤 7
从theysaidso API获取名言。
我们必须请求从API (http://quotes.rest/qod.json) 获取JSON数据，并从该数据中获取名言。我们使用AJAX来做到这一点。
将以下代码添加到您创建的JavaScript文件中
$(function(){
var url = "http://quotes.rest/qod.json";
var quote = $("#quoteblock");// the id of the heading
$.get(url, function (data) {
var the_quote = data;
quote.text(the_quote.contents.quotes[0].quote);
var author = $("#author");// id of author
author.text(the_quote.contents.quotes[0].author);
});
});
步骤 8
制作Chrome扩展程序（.crx）文件。首先加载您的文件夹进行测试，然后转到打包扩展程序，这将创建一个.crx文件，您可以与朋友分享。只需将.crx文件拖放到chrome://extensions/中即可。它将安装扩展程序。
最终结果
每次您点击新标签页时，都会显示一张带有名言的新图片，您可以使用API JSON数据中的background属性，每天只使用一张图片。
