日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
如何在五分鐘內(nèi)開發(fā)一款Chrome擴(kuò)展

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

在本文中，我們將開發(fā)一款能夠顯示美妙背景圖像的Chrome擴(kuò)展，其同時亦可在您打開新選項卡時顯示每日名言。這款擴(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ù)雜，只需要以下幾個步驟即可實(shí)現(xiàn)。

***步

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

 第二步

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

? 隱藏擴(kuò)展

? 無背景

? 無額外選項

? 覆蓋新選項卡

? 添加jQuery

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

第三步

對此zip文件進(jìn)行解壓，而后編輯主文件夾中的manifest.json文件。Manifest.json當(dāng)中包含Chrome擴(kuò)展所需要的全部元數(shù)據(jù)，這即為我們擴(kuò)展的入口點(diǎn)。其在本質(zhì)上屬于一個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文件夾中分別創(chuàng)建a.css文件與a .js文件。

第五步

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

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

 
 
 
 
    
  
  
  
  
  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.   
 
  •  
  •  
  •  
  •  

    • 第六步

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

    ? https://source.unsplash.com

    ? https://theysaidso.com/api/

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

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

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

    最終成果

    如此一來，每當(dāng)您打開一個新選項卡，瀏覽器中即會顯示一幅新圖片外加一條每日名言。利用API，大家也可以設(shè)置JSON數(shù)據(jù)的background屬性以確保每天只使用一幅圖片。


    文章題目：如何在五分鐘內(nèi)開發(fā)一款Chrome擴(kuò)展
    文章路徑：http://www.5511xx.com/article/ccioddj.html