chrome扩展开发之hello world

如需转载请标明出处：http://blog.csdn.net/itas109
QQ技术交流群：129518033

文章目录

chrome扩展开发之hello world
- 1. 功能描述
- 1. 编写Manifest文件manifest.json
- 1. 编写html文件hello.html
- 1. 编写JavaScript文件hello.js
- 1. 调试
- - 5.1 查看扩展程序信息
  - 5.2 审查扩展程序的弹出内容
  - 5.3 设置断点，单步调试
  - 5.4 重新加载页面进行调试
- 1. 运行
- - 6.1 本地运行
  - 6.2 打包ctx上传chrome应用商店

1. 功能描述

点击browser action按钮弹出页面，显示内容Hello Extensions 和当前的时间。

$ tree
.
+--- hello.html
+--- hello.js
+--- manifest.json

2. 编写Manifest文件manifest.json

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "browser_action": {
    "default_popup": "hello.html"
  },
  "manifest_version": 2
}

3. 编写html文件hello.html

<!DOCTYPE html>
<html>
<body>
    <h1>Hello Extensions</h1>
    <h1 id="time"></h1>
</body>
<script src="hello.js"></script>
</html>

4. 编写JavaScript文件hello.js

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
// 例子： 
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}
document.getElementById("time").innerHTML = (new Date()).Format("yyyy-MM-dd hh:mm:ss.S");