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.如何改变显示字体?

  • 相关阅读:
    【GO】GO开发环境安装及VS Code配置
    【计算机组成原理】第一章 计算机系统概论
    oracle 12.2新特性:sqlplus history
    取消交互式创建linux用户密码
    undo表空间收缩
    如何对undo表空间大小进行设置
    查看数据库实际使用多大内存
    Oracle 12.2Cgrid脚本安装失败软件完全删除
    有关rman备份ora-27192和ora-19511错误
    数据库altert日志中的GTX提示
  • 原文地址:https://www.cnblogs.com/giddens/p/4512961.html
Copyright © 2011-2022 走看看