如何在5分钟内开发一款Chrome扩展

♥ How To Make a Chrome Extension In 5 Minutes? ♥


了解如何制作Chrome扩展,以在5分钟内用美丽的随机图片覆盖创建新标签功能。
♥ Get to learn how to make a chrome extension to override new tab with beautiful random images in only 5 minutes. ♥

介绍

♥ Introduction ♥

Chrome扩展是什么?在着手开发之前,我们首先需要明确Chrome扩展的基本概念。具体来讲,这是一款用于强化浏览器功能的插件。
♥ Before making a Chrome Extension, we must have a basic idea what actually an extension is, it is nothing but plugin or add-on made to enhance the features of your browser. ♥

在本文中,我们将开发一款能够显示美妙背景图像的Chrome扩展,其同时亦可在您打开新选项卡时显示每日名言。这款扩展将适用于全部基于chromium内核的浏览器。
♥ In this post, we will make a chrome extension that will show awesome backgrounds every time you click new tab and will show the quote of the day. This extension will work in Google Chrome as well as all the other chromium based browsers. ♥

背景

♥ Background ♥

先决条件

♥ Prerequisites ♥

您需要掌握以下基础知识:
♥ You need to know the basics of the following: ♥

  • HTML
  • CSS
  • JavaScript
  • HTML
  • CSS
  • JavaScript

如果您已经熟悉上述技术,那么您已经知道了对应的技术是做何使用。我们将利用HTML、CSS与JavaScript构建一套简单网站,并将其托管在谷歌Chrome当中。我们可以在JavaScript的帮助下添加业务逻辑。要制作Chrome扩展程序,我们应当遵循以下最佳实践或格式。
♥ If you are already familiar with the above technology, then you would already know what the respective technologies are. We will make a simple website with HTML, CSS and JavaScript and host it inside the Google Chrome. We can add our business logic with the help of JavaScript. To make a Chrome Extension, there are some best practices or formats that we should follow. ♥


一起来敲代码吧

♥ Using the Code ♥

扩展的构建工作并不复杂,只需要以下几个步骤即可实现。
♥ Let’s get started. Building an Extension is very easy, just follow the steps below. ♥

第一步

♥ Step 1 ♥

打开Chrome并前往chrome://extensions/。而后启用开发者模式。
♥ Open your Google Chrome & go to chrome://extensions/ and enable developer mode. ♥

chrome://extensions/
chrome://extensions/

第二步

♥ Step 2 ♥

前往extensionizr.com并从以下选项中作出选择(您可将鼠标在各选项的?之上获取更多说明):
♥ Go to extensionizr.com and select (Read more about what do these do by hovering over the ‘?’ at each option): ♥

  • 隐藏扩展
  • 无背景
  • 无额外选项
  • 覆盖新选项卡
  • 添加jQuery
  • Hidden Extension
  • No Background
  • No fancy options
  • Override New Tab
  • Add jQuery
Fine tuning
Fine tuning

在选择结束后,下载zip文件。
♥ After you have done these things, download the zip file. ♥

第三步

♥ Step 3 ♥

对此zip文件进行解压,而后编辑主文件夹中的 manifest.json 文件。manifest.json当中包含Chrome扩展所需要的全部元数据,这即为我们扩展的入口点。其在本质上属于一个JavaScript对象,同时包含名称、版本以及描述等属性。在后文中我们将对其加以使用。
♥ Once you extract the zip file, go to manifest.json file in the main folder and edit the manifest.json. Manifest.json contains all the metadata that your Chrome Extension will need, it is the entry point of the extension. This is nothing but a JavaScript Object with the following properties like name, version, description, etc. you may not have the permissions property. Simply copy paste from here, it will need it later. ♥

{
    "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/"]
}

第四步

♥ Step 4 ♥

在CSS与js文件夹中分别创建custom.css文件与app.js文件。
♥ Create custom.css file and app.js file in CSS and js folders respectively. ♥

第五步

♥ Step 5 ♥

构建基本HTML文件。前往src/override/,您将在这里找到override.html文件。
♥ Making the basic HTML document. Go to src/override/ you will find override.html file. ♥

将.js与.css文件添加到此override.html文件内。
♥ Add both .js and .css files in the 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>

第六步

♥ Step 6 ♥

这里我们将使用以下两个网站。Unsplash将提供可供使用的图像,而TheySaidSo则负责提供每日名言。
♥ We are going to use two websites – one of them will provide us with some awesome images and the second one will provide us with the daily quote. ♥

  • https://source.unsplash.com
  • https://theysaidso.com/api/
  • https://source.unsplash.com
  • https://theysaidso.com/api/

要对外部链接发送请求,我们需要在 manifest.json 当中添加URL的必要权限。
♥ To make a request to external links, we have to add URLs in permissions in manifest.json. ♥

custom.css 中添加以下CSS代码(我们使用PT serif谷歌字体)。
♥ Add the following CSS in the custom.css (We have used PT serif Google font.) ♥

@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);
}

第七步

♥ Step 7 ♥

从theysaidso API处获取资讯。
♥ Getting quote from theysaidso API. ♥

我们需要利用AJAX从API (http://quotes.rest/qod.json) 处获取JSON数据以及Quote。
♥ We have to request to get the JSON data from API (http://quotes.rest/qod.json) and get the Quote from that we are doing this by using AJAX. ♥

quotes.rest/qod.json
quotes.rest返回的JSON数据

在您创建的JavaScript文件中添加以下代码:
♥ Add the following code to the JavaScript file you made: ♥

$(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)
    })
})

第八步

♥ Step 8 ♥

制作Chrome扩展(.crx)文件。首先对您的文件夹进行测试,而后打包扩展并生成可进行共享的a.crx文件。只需要将该 .crx 文件拖拽至 chrome://extensions/ ,即可完成对该扩展的安装。
♥ Making the Chrome Extension (.crx) file. Load your folder to test first, and then go to pack extension that will make a .crx file that you can share with your friends. Simply drag and drop the .crx file on chrome://extensions/ . It will install the extension. ♥

Fine tuning
Fine tuning
制作Chrome扩展(.crx)文件

最终成果

♥ Final Result ♥

如此一来,每当您打开一个新选项卡,浏览器中即会显示一幅新图片外加一条每日名言。利用API,大家也可以设置JSON数据的background属性以确保每天只使用一幅图片。
♥ Every time you click new tab, a new image with quote will show, you can use a single image per day by using the background property of JSON data from the API. ♥

最终效果01
最终效果02
最终效果

 

原文链接:How To Make a Chrome Extension In 5 Minutes?