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

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对象，同时包含名称、版本以及描述等属性。在后文中我们将对其加以使用。

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

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

第五步

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

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

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.    
    4.   
  
  
  
  4. Make a Chrome Extension | Beautiful New Tab 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.   
    Quote of the day
     
    9.   
  
  
  
  9.    
    10.   
  
  
  
  10.       
    11.   
  
  
  
  11.       
    12.   
  
  
  
  12.   
 
  •  
  •  
  •  
  •  

    • 第六步

    这里我们将使用以下两个网站。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.   
  
  
  
    2. body { 
      3.   
  
  
  
    3. background-image:url("https://source.unsplash.com/category/nature/1600x900"); 
      4.   
  
  
  
    4. background-repeat:no-repeat; 
      5.   
  
  
  
    5. height:100%; 
      6.   
  
  
  
    6. width:auto; 
      7.   
  
  
  
    7.   
      8.   
  
  
  
    8. } 
      9.   
  
  
  
    9. h1{ 
      10.   
  
  
  
    10. font-family: 'PT Serif', serif; 
      11.   
  
  
  
    11. font-size:2.5em; 
      12.   
  
  
  
    12. text-align:center; 
      13.   
  
  
  
    13. color:#fff; 
      14.   
  
  
  
    14. text-shadow:2px 2px 3px rgba(150,150,150,0.75); 
      15.   
  
  
  
    15.   
      16.   
  
  
  
    16. } 
      17.   
  
  
  
    17. .quote{ 
      18.   
  
  
  
    18. color:#ffffff; 
      19.   
  
  
  
    19. text-align:center; 
      20.   
  
  
  
    20. vertical-align:middle; 
      21.   
  
  
  
    21. padding:19% 15% 0 15%; 
      22.   
  
  
  
    22. } 
      23.   
  
  
  
    23.   
      24.   
  
  
  
    24. #quoteblock{ 
      25.   
  
  
  
    25. font-family: 'PT Serif', serif; 
      26.   
  
  
  
    26. text-shadow:2px 2px 3px rgba(150,150,150,0.75); 
      27.   
  
  
  
    27. font-size:2em; 
      28.   
  
  
  
    28. } 
      29.   
  
  
  
    29.   
      30.   
  
  
  
    30. #author{ 
      31.   
  
  
  
    31. font-family: 'PT Serif', serif; 
      32.   
  
  
  
    32. text-align:center; 
      33.   
  
  
  
    33. color:#fff; 
      34.   
  
  
  
    34. text-shadow:2px 2px 3px rgba(150,150,150,0.75); 
      35.   
  
  
  
    35. } 
      36.  
 
 
 
    第七步

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

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

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

    第八步

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

    最终成果

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

    本文标题：如何在五分钟内开发一款Chrome扩展
    文章分享：http://www.shufengxianlan.com/qtweb/news43/468643.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站策划知识

    分类信息网站

    成都网站制作　　 　成都网站推广　　 　虚拟主机　　 　温江服务器托管　　 　品牌网站建设　　 　一元广告　　 　成都租用服务器　　 　金羊影视传媒　　 　成都集团网站建设　　 　香港云主机　　 　衣柜书柜酒柜定制　　 　德信企业管理　　 　响应式报价　　 　定制网站　　 　眉山托管服务器　　 　资阳做网站　　 　成都力比特　　 　成都免费做网站　　 　成都雪糕加盟　　 　成都手机网站开发