（一）MyBlock

来源：互联网发布：南京外国语学校知乎编辑：程序博客网时间：2024/06/05 23:59

准备工作
新建文档结构如下：
myblock—-manifest.json
|________img
|________js
|________popu.html
如上，其中js和img用来放js文件以及图片
代码部分及解释
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）
- browser_action 指定扩展的图标放在Chrome的工具栏中
- browser_action 中的default_icon属性定义了相应图标文件的位置
- default_title 定义了当用户鼠标悬停于扩展图标上所显示的文字
- default_popup 则定义了当用户单击扩展图标时所显示页面的文件位置。
popu.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>
```
- 全局元素的margin和padding为0，自由地控制元素的外观
- body的尺寸告诉Chrome当单击图标后展示一个多大的界面
- 在body标签中定义了一个id为clock_div的div显示容器
- lineheight 表示行间距，也就是行高
值得注意的是

Chrome不允许将JavaScript代码段直接内嵌入HTML文档
所以我们需要通过外部引入的方式引用JS文件
当然inline-script也是被禁止的
所以所有元素的事件都需要使用JavaScript代码进行绑定
如果你没有使用一个拥有强大选择器的库（jQuery）
最好给需要绑定事件的元素分配一个id以便进行操作
myblock.js
```
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);
```
- 函数包含了一个el参数，这个参数为显示容器（就那个div块），由于在HTML文档中我们设计在div容器中显示时间，所以调用my_clock函数时我们传入了这个容器，在js文件中用变量clock_div表示。
- my_clock函数1000毫秒之后又会再次调用自身，这样clock_div中显示的时间就会被更新
放好图标后加载即可

0 0