中国领先的IT技术网站
|
|
创建专栏

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

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

作者:核子可乐译|2017-03-01 17:47

【51CTO.com快译】Chrome扩展是什么?在着手开发之前,我们首先需要明确Chrome扩展的基本概念。具体来讲,这是一款用于强化浏览器功能的插件。

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

先决条件

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

HTML

CSS

JavaScript

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

如何利用JavaScript开发Chrome扩展

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

第一步

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

 第二步

前往extensionizr.com并从以下选项中作出选择(您可将鼠标在各选项的?之上获取更多说明):

隐藏扩展

无背景

无额外选项

覆盖新选项卡

添加jQuery

Chrome扩展

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

第三步

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

  1. "name""Beautiful New Tab"
  2. "version""0.0.1"
  3. "manifest_version": 2, 
  4. "description""Get beautiful images with quotes whenever you open a new tab."
  5. "homepage_url""http://codesparta.com"
  6. "icons": { 
  7. "16""icons/icon16.png"
  8. "48""icons/icon48.png"
  9. "128""icons/icon128.png" 
  10. }, 
  11. "default_locale""en"
  12. "chrome_url_overrides": { 
  13. "newtab""src/override/override.html" 
  14. }, 
  15. "permissions": [ "https://source.unsplash.com/","http://quotes.rest/"

第四步

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

第五步

构建基本HTML文件。前往src/override/,您将在这里找到override.html文件。

将.js与.css文件添加到此override.html文件内。

  1. <!DOCTYPE html> 
  2. <html> 
  3.   <head> 
  4. <title>Make a Chrome Extension | Beautiful New Tab</title> 
  5. <link href="../../css/custom.css" rel="stylesheet" /> 
  6. </head> 
  7. <body> 
  8.   <h1>Quote of the day</h1> 
  9.   <div class="quote"
  10.      <h1 id="quoteblock"></h1> 
  11.      <h3 id="author"></h3> 
  12.   </div> 
  13. <script src="../../js/jquery/jquery-1.12.3.min.js"></script> 
  14. <script src="../../js/jquery/app.js"></script> 
  15. </body> 
  16. </html> 

第六步

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

https://source.unsplash.com

https://theysaidso.com/api/

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

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

  1. @import url(https://fonts.googleapis.com/css?family=PT+Serif:400italic); 
  2. body { 
  3. background-image:url("https://source.unsplash.com/category/nature/1600x900"); 
  4. background-repeat:no-repeat; 
  5. height:100%; 
  6. width:auto; 
  7.   
  8. h1{ 
  9. font-family: 'PT Serif', serif; 
  10. font-size:2.5em; 
  11. text-align:center; 
  12. color:#fff; 
  13. text-shadow:2px 2px 3px rgba(150,150,150,0.75); 
  14.   
  15. .quote{ 
  16. color:#ffffff; 
  17. text-align:center; 
  18. vertical-align:middle; 
  19. padding:19% 15% 0 15%; 
  20.   
  21. #quoteblock{ 
  22. font-family: 'PT Serif', serif; 
  23. text-shadow:2px 2px 3px rgba(150,150,150,0.75); 
  24. font-size:2em; 
  25.   
  26. #author{ 
  27. font-family: 'PT Serif', serif; 
  28. text-align:center; 
  29. color:#fff; 
  30. text-shadow:2px 2px 3px rgba(150,150,150,0.75); 

第七步

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

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

  1. $(function(){ 
  2. var url = "http://quotes.rest/qod.json"
  3. var quote = $("#quoteblock");// the id of the heading 
  4. $.get(url, function (data) { 
  5. var the_quote = data; 
  6. quote.text(the_quote.contents.quotes[0].quote); 
  7. var author = $("#author");// id of author 
  8. author.text(the_quote.contents.quotes[0].author); 
  9. }); 
  10. }); 

第八步

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

最终成果

如此一来,每当您打开一个新选项卡,浏览器中即会显示一幅新图片外加一条每日名言。利用API,大家也可以设置JSON数据的background属性以确保每天只使用一幅图片。

原文标题:How to Make a Chrome Extension in 5 Minutes    原文作者:Vivek Sharma

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

【编辑推荐】

  1. 解读谷歌Chrome OS PostgreSQL对决InnoDB_IT技术周刊第153期_51CTO.com
【责任编辑: TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

热门职位+更多

× 四周年庆  签到赢手机