我的第一个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.如何改变显示字体？
我的第一个chrome扩展（1）——读样例，实现时钟的更多相关文章
- 如何开发一个chrome扩展
chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...
- 如何用原生js开发一个Chrome扩展程序
原文地址:How to Build a Simple Chrome Extension in Vanilla JavaScript 开发一个Chrome扩展程序非常简单,只需要使用原生的js就可以完成 ...
- 如何通过写一个chrome扩展启动本地程序
@(编程) [toc] 本文介绍如何利用Chrome 的插件, 从我们的一个网站中启动一个我们的本地程序.本文的环境是windows10,本文的例子是通过点击网页上的一个button,调用本地的wor ...
- 推荐一个Chrome扩展应用，能够自动去除CSDN广告
作为一个程序员,每天编程遇到问题时,少不了前往国内著名的CSDN网站上查信息,看是否有同行遇到类似问题.很多时候根据遇到问题的错误消息进行搜索,结果都是一篇篇CSDN博客.这些博客打开后都会显示很多广 ...
- 跟我一起写一个chrome扩展程序
在我没有看这本书之前,我都想象不到,原来chrome扩展程序可以这样写,真的非常有意思. 就是用最简单最基础的代码,然后就实现了一些非常有意思的玩意儿. 先看效果图 实际运用要和现实联系在一起,经历和 ...
- 【spring教程之中的一个】创建一个最简单的spring样例
1.首先spring的主要思想,就是依赖注入.简单来说.就是不须要手动new对象,而这些对象由spring容器统一进行管理. 2.样例结构 如上图所看到的,採用的是mavenproject. 2.po ...
- 我的第一个chrome扩展（3）——继续读样例
1.操作用户正在浏览的界面 http://www.ituring.com.cn/article/60212 问题:1.google未定义ID,用name为何无法找到? 2.如何让整个按钮一起动?原函数 ...
- 自己写一个chrome扩展程序 - 右键菜单扩展
最近在学习Spring,心想dotnet如何实现类似形式呢.于是想认真学习Casetle组件,发现没有书籍!而spring的书多得很.于是只好找网上教程了.发现系统的文章不多.Terrylee好多文章 ...
- 我的第一个chrome扩展（0）——目标
当前有两个方向: 一.实现一个自动解码的地址栏监视器 扩展程序在后台不断监视地址栏输入,地址栏输入并回车后检查输入,若输入符合解码条件则调用网站信息进行解码,并将结果输出到地址栏,否则不改变: 初始阶 ...
随机推荐
- ajax请求成功后打开新窗口地址
转自:http://www.cnblogs.com/linjiqin/p/3148205.html jQuery.ajax({ "type":"post&qu ...
- 食物链 poj 1182
C - 食物链 Time Limit:1000MS Memory Limit:10000KB 64bit IO Format:%I64d & %I64u Submit Stat ...
- BZOJ3825 : [Usaco2014 Nov]Marathon
不跳过任何点的路程=dis(l,l+1)+dis(l+1,l+2)+...+dis(r-2,r-1)+dis(r-1,r) 要跳过一个点i,则要最小化dis(i,i+2)-dis(i,i+1)-dis ...
- Channel 笔记本项目 （门户客户端（介绍1） 和 wp7客户端）
- 使用WebRequest 检测 手机号归属地。 C#通用 使用json 和可设定超时的WebClient
首先建立jsonObject,当然你也可以使用xml解析,目前介绍一下我使用的方法. /******************************************************** ...
- 洛谷 P1908 逆序对 Label：归并排序||树状数组 不懂
题目描述 猫猫TOM和小老鼠JERRY最近又较量上了,但是毕竟都是成年人,他们已经不喜欢再玩那种你追我赶的游戏,现在他们喜欢玩统计.最近,TOM老猫查阅到一个人类称之为“逆序对”的东西,这东西是这样定 ...
- 【BZOJ】1221: [HNOI2001] 软件开发（最小费用最大流）
http://www.lydsy.com/JudgeOnline/problem.php?id=1221 先吐槽一下,数组依旧开小了RE:在spfa中用了memset和<queue>的版本 ...
- java：正则移出html元素
package com.loongtao.general.crawler.slave; import java.util.regex.Matcher; import java.util.regex.P ...
- 创建自定义 jQuery 移动主题
自定义页面.工具栏.内容.表单元素.列表.按钮等元素的外观 智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求.jQuery Mobile 框架支持您创建能与原生应用程序 ...
- cmd下常用的一些命令
1.calc计算器 2.Mspaint画图 3.Netstat -anb查看端口 输入netstat -anb时可能会遇到下面问题 只要到搜索框输入cmd,然后到其快捷方式上右击以管理员身份运行即可 ...