Chrome插件的学习入门
来源:互联网 发布:网络主播经纪人 编辑:程序博客网 时间:2024/05/26 02:20
参考网页:http://www.ituring.com.cn/article/60134
我们准备编写一款显示用户计算机当前时间的扩展,这应该比Hello World有趣得多。设计思路是在浏览器的工具栏中显示一个时钟的图标,当用户点击这个图标时显示一个实时显示计算机时间的界面。
首先新建一个名为my_clock的文件夹,在此文件夹中新建一个名为manifest.json的文件,内容如下:
{
"manifest_version":2,
"name":"我的时钟",
"version":"1.0",
"description":"我的第一个Chrome扩展",
"icons": {
"16":"images/icon16.png",
"48":"images/icon48.png",
"128":"images/icon128.png"
},
"browser_action": {
"default_icon": {
"19":"images/icon19.png",
"38":"images/icon38.png"
},
"default_title":"我的时钟",
"default_popup":"popup.html"
}
}
上面这段内容有些我们可以一眼看出在定义什么,比如name定义了扩展的名称,version定义了扩展的版本,description定义了扩展的描述,icons定义了扩展相关图标文件的位置。version的值最多可以是由三个圆点分为四段的版本号,每段只能是数字,每段数字不能大于65535且不能以0开头(可以是0,但不可以是0123),版本号段左侧为高位,比如1.0.0.2版本比1.0.0.1版本更高。每次更新扩展时,新的版本号必须比之前的版本号高。
下面的browser_action定义了扩展的图标放置于Chrome浏览器的工具栏中,browser_action的default_icon属性定义了相应图标文件的位置,default_title定义了当用户鼠标悬停于扩展图标上所显示的文字,default_popup则定义了当用户单击扩展图标时所显示页面的文件位置。
接下来我们开始编写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>
<divid="clock_div"></div>
<scriptsrc="js/my_clock.js"></script>
</body>
</html>
如果你曾经编写过网页,会发现上面这个页面省略了很多内容,比如<title>标签。因为对于Chrome扩展来说,很多对网页有意义的内容是无意义的,所以我们可以只挑需要的写,当然你全写出来也不会有什么问题。
之后我们在body标签中定义了一个id为clock_div的div容器,用这个容器来显示当前的时间,这样我们就把HTML的布局写好了。接下来我们就需要引入JavaScript处理数据并动态显示了。值得注意的是Chrome不允许将JavaScript直接通过<script>标签内嵌入HTML文档,所以我们需要通过外部引入的方式引用js文件。当然inline script也是被禁止的,所以所有元素的事件都需要使用JavaScript代码进行绑定,如果你没有使用一个拥有强大选择器的库(如jQuery),最好给需要绑定事件的元素分配一个id以便进行操作。
下面来编写my_clock.js文件。
function my_clock(el){
var today=newDate();
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);
在my_clock.js文件中我们定义了一个my_clock函数用于显示时间,这个函数包含了一个el参数,这个参数为显示时间的容器,由于在HTML文档中我们设计在id为clock_div的div容器中显示时间,所以调用my_clock函数时我们传入了这个容器,在js文件中用变量clock_div表示。之后my_clock函数1000毫秒之后又会再次调用自身,这样clock_div中显示的时间就会被更新。
至此这个扩展就编写完毕了,当然别忘了将图标文件也放入相应的文件夹中。
下面我们就需要将这个扩展载入Chrome中运行了。依次点击“”-“工具”-“扩展程序”打开扩展程序页面(也可以直接在地址栏中输入chrome://extensions进入),勾选右上角的“开发者模式”,点击“加载正在开发的扩展程序”,选择扩展所在的文件夹,就可以在浏览器工具栏中看到我们的扩展了。
当鼠标点击扩展图标后,一个显示时钟的界面就出现了。
0 0
- Chrome插件的学习入门
- 开发Chrome插件入门
- Chrome插件开发入门
- Chrome插件开发入门
- chrome插件开发入门
- chrome 插件开发入门
- Chrome插件开发学习——开发入门
- 学习笔记 - Chrome插件
- chrome 插件学习
- Chrome插件开发入门+扩展
- Chrome浏览器插件开发入门
- Chrome浏览器插件开发入门
- chrome插件开发(入门)
- Chrome 插件开发,入门Demo
- chrome插件入门 使用chrome插件修改页面属性
- chrome的Emacs插件
- chrome的vim插件
- chrome的post插件
- qt 处理ORACLE的AMERICAN_AMERICA.US7ASCII编码
- Json-lib简单使用
- 22、文字截图把背景变透明
- 记录
- 求数组中的最大值和次最大值、、、
- Chrome插件的学习入门
- java50题----01兔子
- 让打印出的数组有格式
- AutoLayout NSLayoutConstraint
- NOJ [1328] TT Had a Cow
- #define中 #与##的神奇用法
- hdu 4823 Energy Conversion(数学)
- handle ecshop problem
- The new CSDN blog