三级片视频网站,丁香婷婷五月,丰满少妇在线观看网站

国产精品青草久-国产精品情侣愉拍-国产精品区网红主-国产精品区一区二-国产精品热久久-国产精品热热热-国产精品人aⅴ-国产精品人成在线-国产精品人妻人伦-国产精品人人

如何在五分鐘內(nèi)開發(fā)一款Chrome擴(kuò)展

轉(zhuǎn)帖|行業(yè)資訊|編輯：龔雪|2017-03-08 11:33:33.000|閱讀 168 次

概述：一個(gè) Chrome擴(kuò)展其實(shí)就是一個(gè)配置入口文件和一系列html、css、js圖片文件的集合，所以只要有前端基礎(chǔ)，寫一個(gè)簡單的 Chrome 擴(kuò)展還是很簡單的。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

Chrome擴(kuò)展是什么？

在著手開發(fā)之前，我們首先需要明確Chrome擴(kuò)展的基本概念。具體來講，這是一款用于強(qiáng)化瀏覽器功能的插件。

在本文中，我們將開發(fā)一款能夠顯示美妙背景圖像的Chrome擴(kuò)展，其同時(shí)亦可在您打開新選項(xiàng)卡時(shí)顯示每日名言。這款擴(kuò)展將適用于全部基于chromium內(nèi)核的瀏覽器。

先決條件

您需要掌握以下基礎(chǔ)知識：

•HTML

•CSS

•JavaScript

我們將利用HTML、CSS與JavaScript構(gòu)建一套簡單網(wǎng)站，并將其托管在谷歌Chrome當(dāng)中。要開發(fā)Chrome擴(kuò)展，我們應(yīng)當(dāng)遵循以下最佳實(shí)踐或格式。

如何利用JavaScript開發(fā)Chrome擴(kuò)展

擴(kuò)展的構(gòu)建工作并不復(fù)雜，只需要以下幾個(gè)步驟即可實(shí)現(xiàn)。

第一步

打開Chrome并前往chrome://extensions/。而后啟用開發(fā)者模式。

第二步

前往extensionizr.com并從以下選項(xiàng)中作出選擇（您可將鼠標(biāo)在各選項(xiàng)的？之上獲取更多說明）：

•隱藏?cái)U(kuò)展

•無背景

•無額外選項(xiàng)

•覆蓋新選項(xiàng)卡

•添加jQuery

在選擇結(jié)束后，下載zip文件。

第三步

對此zip文件進(jìn)行解壓，而后編輯主文件夾中的manifest.json文件。Manifest.json當(dāng)中包含Chrome擴(kuò)展所需要的全部元數(shù)據(jù)，這即為我們擴(kuò)展的入口點(diǎn)。其在本質(zhì)上屬于一個(gè)JavaScript對象，同時(shí)包含名稱、版本以及描述等屬性。在后文中我們將對其加以使用。

    { 
    "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文件夾中分別創(chuàng)建a.css文件與a.js文件。

第五步

構(gòu)建基本HTML文件。前往src/override/，您將在這里找到override.html文件。

將.js與.css文件添加到此override.html文件內(nèi)。

    <!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>

第六步

這里我們將使用以下兩個(gè)網(wǎng)站。Unsplash將提供可供使用的圖像，而TheySaidSo則負(fù)責(zé)提供每日名言。

•//source.unsplash.com

•//theysaidso.com/api/

要對外部鏈接發(fā)送請求，我們需要在manifest.json當(dāng)中添加URL的必要權(quán)限。

在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數(shù)據(jù)以及Quote。

在您創(chuàng)建的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擴(kuò)展（.crx）文件。首先對您的文件夾進(jìn)行測試，而后打包擴(kuò)展并生成可進(jìn)行共享的a.crx文件。只需要將該.ctx文件拖拽至chrome://extensions/，即可完成對該擴(kuò)展的安裝。