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

我的第一个chrome扩展（1）——读样例，实现时钟的更多相关文章

  1. 如何开发一个chrome扩展

    chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...

  2. 如何用原生js开发一个Chrome扩展程序

    原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...

  3. 如何通过写一个chrome扩展启动本地程序

    @(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...

  4. 推荐一个Chrome扩展应用，能够自动去除CSDN广告

    作为一个程序员,每天编程遇到问题时,少不了前往国内著名的CSDN网站上查信息,看是否有同行遇到类似问题.很多时候根据遇到问题的错误消息进行搜索,结果都是一篇篇CSDN博客.这些博客打开后都会显示很多广 ...

  5. 跟我一起写一个chrome扩展程序

    在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...

  6. 【spring教程之中的一个】创建一个最简单的spring样例

    1.首先spring的主要思想,就是依赖注入.简单来说.就是不须要手动new对象,而这些对象由spring容器统一进行管理. 2.样例结构 如上图所看到的,採用的是mavenproject. 2.po ...

  7. 我的第一个chrome扩展（3）——继续读样例

    1.操作用户正在浏览的界面 http://www.ituring.com.cn/article/60212 问题:1.google未定义ID,用name为何无法找到? 2.如何让整个按钮一起动?原函数 ...

  8. 自己写一个chrome扩展程序 - 右键菜单扩展

    最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...

  9. 我的第一个chrome扩展（0）——目标

    当前有两个方向: 一.实现一个自动解码的地址栏监视器 扩展程序在后台不断监视地址栏输入,地址栏输入并回车后检查输入,若输入符合解码条件则调用网站信息进行解码,并将结果输出到地址栏,否则不改变: 初始阶 ...

随机推荐

  1. Linux常用命令_（安装包管理）

    rpm命令: RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序” rpm -ivh rpm包安装rpm包rpm -Uvh rp ...

  2. 深入理解DIP、IoC、DI以及IoC容器（转）

    深入理解DIP.IoC.DI以及IoC容器 摘要 面向对象设计(OOD)有助于我们开发出高性能.易扩展以及易复用的程序.其中,OOD有一个重要的思想那就是依赖倒置原则(DIP),并由此引申出IoC.D ...

  3. CodeForces Round 193 Div2

    I know,this is another failure.It seems like that failure is a habit with me.This time I solved two ...

  4. BZOJ1175 : [Balkan2007]The stairways of Saharna

    杨氏图表,维护若干个单调不下降队列. 每次新加入一个数时,先考虑第一个队列: 如果可以放在最后,则放在最后. 否则找到最小的可以替换的替换掉,再将替换的数放入第二个队列,以此类推. 最后$ans_i= ...

  5. BZOJ3648 : 寝室管理

    求环套外向树上节点数不小于K的路径数. 首先树的话直接点分治+树状数组$O(n\log^2n)$搞定 环套树的话,先删掉多余的边(a,b) 然后变成了一棵树,直接点分治 然后在树上找到a到b的路径,将 ...

  6. gprof参数说明及常见错误

    参数说明 l -b 不再输出统计图表中每个字段的详细描述. l -p 只输出函数的调用图(Call graph的那部分信息). l -q 只输出函数的时间消耗列表. l -e Name 不再输出函数N ...

  7. LightOJ 1422 (区间DP)

    题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27130 题目大意:按顺序去参加舞会.每个舞会对衣服都有要求.可以 ...

  8. html5 filereader读取流注意事项

    对于截取读入的文件,一定要new FileReader,不可写全局调用同一个reader. 错误代码!!!function readAsBinaryString(file,callback){ rea ...

  9. 【BZOJ】1027: [JSOI2007]合金（凸包+floyd）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1027 题意:$n$种材料,$m$种需求.每种材料有三个属性,给出三个属性的含量(和为1),问能否通过 ...

  10. COJ990 WZJ的数据结构（负十）

    DFS序(带入栈出栈标记): 对于一个节点,我们用L[i]和R[i]表示它入栈和出栈的时间.这样[L[i],R[i]]就表示了以i为根的区间. 我们还要将入栈的符号为+,出栈的符号为-,那么令V[i] ...