认识Chrome扩展和应用

最新推荐文章于 2019-09-26 01:39:37 发布

热情de马金

最新推荐文章于 2019-09-26 01:39:37 发布

阅读量391

点赞数

分类专栏： Chrome扩展文章标签： chrome webkit 浏览器 chrome扩展

本文链接：https://blog.csdn.net/a1459268562/article/details/54412546

版权

Chrome扩展专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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);