如何在五分鐘內(nèi)開發(fā)一款Chrome擴(kuò)展
譯文【51CTO.com快譯】Chrome擴(kuò)展是什么？在著手開發(fā)之前，我們首先需要明確Chrome擴(kuò)展的基本概念。具體來(lái)講，這是一款用于強(qiáng)化瀏覽器功能的插件。
在本文中，我們將開發(fā)一款能夠顯示美妙背景圖像的Chrome擴(kuò)展，其同時(shí)亦可在您打開新選項(xiàng)卡時(shí)顯示每日名言。這款擴(kuò)展將適用于全部基于chromium內(nèi)核的瀏覽器。
先決條件
您需要掌握以下基礎(chǔ)知識(shí)：
• HTML
• CSS
• JavaScript
我們將利用HTML、CSS與JavaScript構(gòu)建一套簡(jiǎn)單網(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)的？之上獲取更多說(shuō)明）：
• 隱藏?cái)U(kuò)展
• 無(wú)背景
• 無(wú)額外選項(xiàng)
• 覆蓋新選項(xiàng)卡
• 添加jQuery
在選擇結(jié)束后，下載zip文件。
第三步
對(duì)此zip文件進(jìn)行解壓，而后編輯主文件夾中的manifest.json文件。Manifest.json當(dāng)中包含Chrome擴(kuò)展所需要的全部元數(shù)據(jù)，這即為我們擴(kuò)展的入口點(diǎn)。其在本質(zhì)上屬于一個(gè)JavaScript對(duì)象，同時(shí)包含名稱、版本以及描述等屬性。在后文中我們將對(duì)其加以使用。
- {
- "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文件。
第五步
構(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é)提供每日名言。
• https://source.unsplash.com
• https://theysaidso.com/api/
要對(duì)外部鏈接發(fā)送請(qǐng)求，我們需要在manifest.json當(dāng)中添加URL的必要權(quán)限。
在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數(shù)據(jù)以及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擴(kuò)展（.crx）文件。首先對(duì)您的文件夾進(jìn)行測(cè)試，而后打包擴(kuò)展并生成可進(jìn)行共享的a.crx文件。只需要將該.ctx文件拖拽至chrome://extensions/，即可完成對(duì)該擴(kuò)展的安裝。
最終成果
如此一來(lái)，每當(dāng)您打開一個(gè)新選項(xiàng)卡，瀏覽器中即會(huì)顯示一幅新圖片外加一條每日名言。利用API，大家也可以設(shè)置JSON數(shù)據(jù)的background屬性以確保每天只使用一幅圖片。
原文標(biāo)題：How to Make a Chrome Extension in 5 Minutes 原文作者：Vivek Sharma
【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】
