认识Chrome扩展和应用

来源：互联网发布：php软件工程师编辑：程序博客网时间：2024/05/17 23:24

1.认识Chrome浏览器
Chrome是Google公司基于webkit发行的一款浏览器，但是你不能把她只定位成浏览器，同时也要把她定位成一个操作系统。(她上面可以有在线应用、离线应用、浏览器扩展等等，对html的高速渲染、js的强大执行效率等等)。(笔者在写博客前就听说ChromeOS要和AndroidOS进行合并，好奇的下了一下ChromeOS，不得不叹服谷歌就是强啊)

2.Chrome扩展的文件结构（扩展的文件结构和应用的文件结构是相同的）

mainfest.json(就是这个名字的文件，一个字母都不能错)
HTML
CSS
js（主要的编程语言）
其他的资源(图片、DLL动态库、so动态库啥的)
当看到这可能会疑惑，javaScript不是前端的轻量级的语言吗？能脱离网页写应用吗？Chrome的V8引擎使js的执行效率已经起飞，而且已经有将js作为后端语言的项目—Node.js。

3.区分Chrome应用和Chrome扩展
扩展强调是与浏览器的高度结合，扩展浏览器的功能。而应用与浏览器的关系不大。此外，扩展可对用户浏览的内容进行修改(美化啥的)，而应用不能。应用又分为Hosted App（托管应用）和Package App（打包应用）。

Hosted App:只需要图标文件和manifest.json文件。相当于一个高级的书签，打开的是一个URL。看如下代码：

manifest.json文件：

{"manifest_version":2,"name":"Google mail","version":"1.0","description":"Read your mail","app":{    "urls":[        "*://mail.google.com/mail/",        "*://www.google.com/mail/"    ],    "launch":{        "web_url":"http://mail.google.com/mail/"    }},"icons":{    "128":"icon_128.png"},"permissions":[    "unlimitedStorage",    "notifications"]}

Packaged App:把所有的文件打包在一起，通常是可以离线使用的。

4.我的第一个应用扩展
先说一下这个扩展的功能，很简答，显示当前的时间。

创建一个my_clock的文件夹（这就是我们的应用了，对没错！）
再在这个文件夹中放入一些东西就成了。

文件夹的文件组织目录如下:
文件的目录
扩展的代码如下：
mainifest.json文件

{    "manifest_version":2,               //清单文件的版本号<必须>    "name":"我的时钟",                  //扩展的名字<必须>    "version":"1.0",                    //扩展的版本号<必须>     "description":"我的第一个Chrome扩展", //对扩展的描述    "icons":{                                   "16":"images/icon19.png",        "32":"images/icon19.png",        "128":"images/icon19.png"    },      "browser_action":{                  //在浏览器中的状态        "default_icon":{                //扩展在浏览器中的图标            "19":"images/icon19.png",            "38":"images/icon19.png"        },        "default_title":"我的时钟",     //hover显示的文本        "default_popup":"popup.html"    //所显示页面的位置    }}

需要重点说一下version这个属性：这是我们应用的版本号。他是三点四段的。每段只能是数字，每段数不能大于65535、不能小于0，可以是0但是不能以0开头。左段为高位，如1.0.2.0比1.0.0.2大。每次更新，新的版本号必须比旧的大。

my_clock.html:

<html>   <head>        <style>            *{            margin:0;            padding:0;            }            body{                height:100px;                width:200px;            }            #clock_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>

my_clock.js:

function my_clock(el){    var today=new Date();    var h = today.getHours();    var m = today.getMinutes();    var s = today.getSeconds();    if(h<10)h='0'+h;    if(m<10)m='0'+m;    if(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);

5.放到chrome中
写好以后，想调试这个扩展很简单，如下：
1.在“设置”中找到“扩展应用程序”
2.如下操作：
添加扩展的步骤
3.找到刚才的文件夹“确定”就欧了。

==================================================================================================
有没有感觉到很简单啊！当然，精彩还在后面那 ……

0 0