日韩国产精品免费专区,国产播放,日韩福利在线

如何在五分鐘內開發一款Chrome擴展

轉帖|行業資訊|編輯：龔雪|2017-03-08 11:33:33.000|閱讀 168 次

概述：一個 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/，即可完成對該擴展的安裝。