zoukankan      html  css  js  c++  java
  • 我的第一个chrome扩展(1)——读样例,实现时钟

    学习chrome扩展开发:

    与网页类似,需要的知识:html,javascript

    chrome扩展程序的构成:

    manifest.json:对扩展程序的整体描述文件

    {
        "manifest_version": 2,  //manifest_version:默认为2,可不写
      //在第2版manifest下chrome出于安全不会运行html内的js代码
    "name": "我的时钟", "version": "1.0", "description": "我的第一个Chrome扩展", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "browser_action": {          //指定扩展图标放在chrome工具栏中 "default_icon": { "19": "images/icon19.png", "38": "images/icon38.png" }, "default_title": "我的时钟",  //当鼠标悬停时显示的信息 "default_popup": "popup.html"  //单击图标时显示页面的文件位置 } }

    //popup.html:

    <
    html> <head> <style> *{ margin: 0; padding: 0; } body { width: 200px; height: 100px; } div { line-height: 100px; font-size: 42px; text-align: center; } </style> </head> <body> <div id="clock_div"></div> <script src="js/my_clock.js"></script> </body> </html>

    body中定义了一个id为clock_div的div容器显示当前时间

    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);

     结果:

    remaining problem:

    1.在manifest中调用一个js脚本,从而使鼠标移动到按钮上就显示时间,是否可行?

    2.如何改变显示字体?

  • 相关阅读:
    Java高并发17-LongAccumulator类详解
    Java高并发16-LongAdder类源码解析(下)
    SpringBoot之模板引擎
    SpringBoot之yml与properties配置文件格式的区别
    SpringBoot之SpringBoot整合静态资源访问
    SpringBoot之SpringBoot的启动方式
    SpringBoot之RestController注解
    SpringBoot之SpringBoot依赖引入
    SpringBoot之SpringBoot与SpringCloud之间的区别
    SpringBoot之IDEA创建SpringBoot项目
  • 原文地址:https://www.cnblogs.com/giddens/p/4512961.html
Copyright © 2011-2022 走看看