（一）MyBlock

最新推荐文章于 2024-08-03 17:05:14 发布

ReZerou

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量286

点赞数

分类专栏： ChromeExt 文章标签： javascript chrome extensions 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/github_35957188/article/details/54809729

版权

ChromeExt 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

准备工作
新建文档结构如下：
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

收藏

觉得还不错? 一键收藏
0
评论
（一）MyBlock

准备工作新建文档结构如下： myblock—-manifest.json |________img |________js |________popu.html 如上，其中js和img用来放js文件以及图片代码部分及解释 manifest.json 如下：{ "manifest_version": 2,
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。