Chrome Extension

最新推荐文章于 2024-11-10 17:19:18 发布

Shamrock303

最新推荐文章于 2024-11-10 17:19:18 发布

阅读量642

点赞数

分类专栏： Chrome 文章标签： chrome javascript html 扩展

本文链接：https://blog.csdn.net/Shamrock303/article/details/53427083

版权

Chrome 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Chrome Extension入门—–用Chrome实现时钟

学习Chrome Extension的原因

最近在学习javaScript，html&css。觉得只是看书上的例子觉得好无聊。有道是：项目才是学习最好的驱动因素，所以想边学边做一些简单的东西出来，这样会很有成就感也很容易坚持下来。好废话不多说下面就用chrome的插件实现一个简单的时钟。

学习需要掌握的基础知识

学习Chrome Extension只需要会javaScript，html&css就可以了。

需要的工具

文本编辑器，Chrome

开工

先看一下最终的效果
这里写图片描述
好了现在我们开始一步一步实现这个效果
1.建立一个文件夹
2.在文件夹下新建一个名字manifest.json的文件 —-文件名不要取错而且一定要是json格式的文件
3.在文件夹下建立一个名字为js的文件夹（名字随意，主要用来存放js文件）
4.在文件夹下建立一个名字为img的文件夹（名字随意，这里要存放图标）
5.在文件夹线建立一个名字为popup.html的文件（弹出的窗口）
建立后目录结构如下图所示
这里写图片描述
下面列出几个文件的内容
manifest.json文件

{
    "manifest_version": 2,
    "name":"clock",
    "version": "1.0",
    "description":"MyFirstChromeExtension",
    "icons": {
        "16": "img/icon16.png",
        "48": "img/icon48.png",
        "128": "img/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "img/icon19.png",
            "38": "img/icon38.png"
        },
        "default_title": "My Clock",
        "default_popup": "popup.html"
    }
}

popup.html文件

<html>
    <head>
    <style>
    *{
        margin:0;
        padding:0;
    }
    body{
        width:400px;
        height:100px;
        background-color:red;
    }
    div {
        line-height:100px;
        font-size:42px;
        text-align:center;
        background-color: green;
    }

    </style>
    </head>
    <body>
    <div id="clock_div"></div>
    <script src="js/my_clock.js"></script>
    </body>
</html>

my_clock.js

function my_clock(el) {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    m=m>=10?m:('0'+m);
    s=s>=10?s:('0'+s);
    el.innerHTML = h+":"+m+":"+s;
    setTimeout(function(){my_clock(el)},1000);
}


var clock_div = document.getElementById('clock_div');
my_clock(clock_div);