轉帖|行業資訊|編輯:龔雪|2017-03-08 11:33:33.000|閱讀 176 次
概述:一個 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/,即可完成對該擴展的安裝。

最終成果
如此一來,每當您打開一個新選項卡,瀏覽器中即會顯示一幅新圖片外加一條每日名言。利用API,大家也可以設置JSON數據的background屬性以確保每天只使用一幅圖片。

原文標題:How to Make a Chrome Extension in 5 Minutes
原文作者:Vivek Sharma ; 翻譯:
更多行業資訊,更新鮮的技術動態,盡在。

本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn