制作一个简单的Chrome extensions并发布到应用商店
蒙峰
制作一个简单的Chrome extensions并发布到应用商店
制作一个简单的Chrome extensions并发布到谷歌商店
- 一个简单的ShowTime extension
注：工具推荐使用VS Code，对网页开发很友好，也很方便
一个chrome extension首先需要最基本的4个文件：popup.html, popup.js, icon.png, and manifest.json，如下所示：
请添加图片描述
manifest.json: 是extension的基本信息
注：上传时manifest_version一定要大于等于2
{
"manifest_version" : 2,
"name" : "ShowTime",
"description" : "Extension to show the current time and date",
"version" : "1.2",
"browser_action": {
"default_title" : "ShowTime",
"default_icon" : "icon.png",
"default_popup" : "popup.html"
},
"icons" : {
"16" : "icon16.png",
"48" : "icon48.png",
"128" : "icon128.png"
}
}
popup.html：类似于index.html的extension的主页面
<!DOCTYPE html>
<html>
<head>
<title>ShowTime</title>
<script src="popup.js"></script>
<style>
body {
padding:0px;
margin:0px;
width:300px;
height:200px;
background-image: url(background.jpeg);
}
div {
height:100%;
width:100%;
display:table;
font-family:"Times";
font-size:15px;
font-weight:bold;
text-shadow:0px 0px 1px #000000;
color:#fff;
}
h1,h2 {
display:table-row;
vertical-align:middle;
text-align:center;
}
.unselectable {
-webkit-user-select:none;
cursor:default;
}
</style>
</head>
<body>
<div class="unselectable">
<h1 class="empty"></h1>
<h1 id="time"></h1>
<h2 id="date"></h2>
</div>
</body>
</html>
popup.js：
var timeId = "time";
var dateId = "date";
var days = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var consoleGreeting = "Hello World! - from popup_script.js";
function setTimeAndDate(timeElement,dateElement) {
var date = new Date();
var minutes = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
var time = date.getHours() + ":" + minutes;
//In "date.getMonth", 0 indicates the first month of the year
//In "date.getDay", 0 represents Sunday
var date = days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear();
timeElement.innerHTML = time;
dateElement.innerHTML = date;
}
console.log(consoleGreeting);
document.addEventListener("DOMContentLoaded",function(dcle) {
var timeElement = document.getElementById(timeId);
var dateElement = document.getElementById(dateId);
setTimeAndDate(timeElement,dateElement);
});
最后，打开谷歌浏览器，进入chrome://extensions，选择左上角的加载扩展程序，然后选择SHOWTIME文件夹，即可添加，然后点击右上角的extension标志就可以看到了：
这样一个简单的extension就做好了，跟网页制作的过程其实差不多
- 发布到应用商店
进入如下网址：
https://chrome.google.com/webstore/developer/dashboard
用你的谷歌账户登录，然后进入开发者界面，需要支付5美元的开发者费用
先将你的文件夹压缩，点击upload，上传即可，然后填写相应的信息
类似资料：