制作一个简单的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"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

最后，打开谷歌浏览器，进入chrome://extensions，选择左上角的加载扩展程序，然后选择SHOWTIME文件夹，即可添加，然后点击右上角的extension标志就可以看到了：

这样一个简单的extension就做好了，跟网页制作的过程其实差不多

发布到应用商店

进入如下网址：
https://chrome.google.com/webstore/developer/dashboard
用你的谷歌账户登录，然后进入开发者界面，需要支付5美元的开发者费用
先将你的文件夹压缩，点击upload，上传即可，然后填写相应的信息

相关阅读:
Matter开发，看这一篇就够了
CarSim仿真高级进阶(三)---VS 命令行(3)
[附源码]Java计算机毕业设计SSM高铁乘坐舒适性在线调查及评价系统
【数值计算】基于四阶Runge-Kutta方法实现Mackey_Glass混沌时间序列生成以及相位时差的绘制附matlab代码
【梳理】第一章浅谈物体检测与PyTorch
中心经纬度计算周边8宫格GeoHash编码
【回归预测-BP预测】基于灰狼算法优化BP神经网络实现数据回归预测附matlab代码
面试官：MySQL 数据库查询慢，除了索引问题还可能是什么原因？面试架构师必备知识
Python Union联合类型注解
Python图像处理丨图像缩放、旋转、翻转与图像平移

原文地址：https://blog.csdn.net/weixin_43456810/article/details/126798260