• 我的第一个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.如何改变显示字体?

  • 相关阅读:
    is running beyond physical memory limits. Current usage: 2.0 GB of 2 GB physical memory used; 2.6 GB of 40 GB virtual memory used
    saiku执行速度优化二
    saiku执行速度慢
    saiku 升级&备份&恢复
    saiku 展示优化第二步(要诀和技巧)
    saiku 无密码登陆
    saiku 展示优化
    saiku源代码安装
    结合使用saiku、mondrian workbentch建立多维查询报表
    浅析 mondrian 模式文件 Schema
  • 原文地址:https://www.cnblogs.com/giddens/p/4512961.html
Copyright © 2020-2023  润新知