如何在五分钟内开发一款Chrome扩展-控件新闻-慧都网

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

转帖|行业资讯|编辑：龚雪|2017-03-08 11:33:33.000|阅读 140 次

概述：一个 Chrome扩展其实就是一个配置入口文件和一系列html、css、js图片文件的集合，所以只要有前端基础，写一个简单的 Chrome 扩展还是很简单的。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

Chrome扩展是什么？

在着手开发之前，我们首先需要明确Chrome扩展的基本概念。具体来讲，这是一款用于强化浏览器功能的插件。

在本文中，我们将开发一款能够显示美妙背景图像的Chrome扩展，其同时亦可在您打开新选项卡时显示每日名言。这款扩展将适用于全部基于chromium内核的浏览器。

先决条件

您需要掌握以下基础知识：

•HTML

•CSS

•JavaScript

我们将利用HTML、CSS与JavaScript构建一套简单网站，并将其托管在谷歌Chrome当中。要开发Chrome扩展，我们应当遵循以下最佳实践或格式。

如何利用JavaScript开发Chrome扩展

扩展的构建工作并不复杂，只需要以下几个步骤即可实现。

第一步

打开Chrome并前往chrome://extensions/。而后启用开发者模式。

第二步

前往extensionizr.com并从以下选项中作出选择（您可将鼠标在各选项的？之上获取更多说明）：

•隐藏扩展

•无背景

•无额外选项

•覆盖新选项卡

•添加jQuery

在选择结束后，下载zip文件。

第三步

对此zip文件进行解压，而后编辑主文件夹中的manifest.json文件。Manifest.json当中包含Chrome扩展所需要的全部元数据，这即为我们扩展的入口点。其在本质上属于一个JavaScript对象，同时包含名称、版本以及描述等属性。在后文中我们将对其加以使用。

    { 
    "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": "//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": [ "//source.unsplash.com/","//quotes.rest/"] 
    }

第四步

在CSS与js文件夹中分别创建a.css文件与a.js文件。

第五步

构建基本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>

第六步

这里我们将使用以下两个网站。Unsplash将提供可供使用的图像，而TheySaidSo则负责提供每日名言。

•//source.unsplash.com

•//theysaidso.com/api/

要对外部链接发送请求，我们需要在manifest.json当中添加URL的必要权限。

在custom.css中添加以下CSS代码（我们使用PT serif谷歌字体）。

    @import url(//fonts.googleapis.com/css?family=PT+Serif:400italic); 
    body { 
    background-image:url("//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); 
    }

第七步

从theysaidso API处获取资讯。我们需要利用AJAX从API（//quotes.rest/qod.json）处获取JSON数据以及Quote。

在您创建的JavaScript文件中添加以下代码：

    $(function(){ 
    var url = "//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); 
    }); 
    });

第八步

制作Chrome扩展（.crx）文件。首先对您的文件夹进行测试，而后打包扩展并生成可进行共享的a.crx文件。只需要将该.ctx文件拖拽至chrome://extensions/，即可完成对该扩展的安装。