如何在五分鐘內開發(fā)一款Chrome擴展
譯文【51CTO.com快譯】Chrome擴展是什么？在著手開發(fā)之前，我們首先需要明確Chrome擴展的基本概念。具體來講，這是一款用于強化瀏覽器功能的插件。
在本文中，我們將開發(fā)一款能夠顯示美妙背景圖像的Chrome擴展，其同時亦可在您打開新選項卡時顯示每日名言。這款擴展將適用于全部基于chromium內核的瀏覽器。
先決條件
您需要掌握以下基礎知識：
• HTML
• CSS
• JavaScript
我們將利用HTML、CSS與JavaScript構建一套簡單網站，并將其托管在谷歌Chrome當中。要開發(fā)Chrome擴展，我們應當遵循以下***實踐或格式。
如何利用JavaScript開發(fā)Chrome擴展
擴展的構建工作并不復雜，只需要以下幾個步驟即可實現(xiàn)。
***步
打開Chrome并前往chrome://extensions/。而后啟用開發(fā)者模式。
第二步
前往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": "http://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": [ "https://source.unsplash.com/","http://quotes.rest/"]
- }
第四步
在CSS與js文件夾中分別創(chuàng)建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則負責提供每日名言。
• https://source.unsplash.com
• https://theysaidso.com/api/
要對外部鏈接發(fā)送請求，我們需要在manifest.json當中添加URL的必要權限。
在custom.css中添加以下CSS代碼（我們使用PT serif谷歌字體）。
- @import url(https://fonts.googleapis.com/css?family=PT+Serif:400italic);
- body {
- background-image:url("https://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（http://quotes.rest/qod.json）處獲取JSON數據以及Quote。
在您創(chuàng)建的JavaScript文件中添加以下代碼：
- $(function(){
- var url = "http://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/，即可完成對該擴展的安裝。
最終成果
如此一來，每當您打開一個新選項卡，瀏覽器中即會顯示一幅新圖片外加一條每日名言。利用API，大家也可以設置JSON數據的background屬性以確保每天只使用一幅圖片。
原文標題：How to Make a Chrome Extension in 5 Minutes 原文作者：Vivek Sharma
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
