2018-05-07

初步认识Chrome扩展与应用

区别:
扩展:

用于对浏览器功能的增强,强调与浏览器的结合。

应用:
  • 可以不打开浏览器而运行这些程序。
  • 可以调用更加底层的系统接口(串口,USB,本地文件读写)
  • 可以拥有更加自由的独立窗口,而chrome扩展的界面只能限定在浏览器窗口中

Chrome扩展:一系列文件的集合,包括HTML文件,CSS 样式文件,JavaScript脚本文件,图片,以及manifest.json。(NPAPI 因为安全的缺陷已经被逐渐淘汰了)

manifest.json:

扩展被安装后,就会读取manifest,json文件,这个文件的内容是按照一定的格式描述扩展的相关信息,如 扩展名称,版本,更新地址,请求的权限,扩展的UI界面入口等等。

Chrome扩展只需要一个Chrome浏览器就可以运行!

Chrome扩展在处理逻辑运算和实现程序功能时所采用的编程语言必然只能是JavaScript.


Chrome扩展的启动入口可以在浏览器的工具栏和地址栏中,用户单击后激活扩展进行下一步操作,也可以没有图标,直接后台运行。

写一个扩展的常用步骤

  • 创建一个文件夹,命名为可以看出其功能的名称
  • 新建一个manifest.json文件,定义name(扩展名),version(扩展的版本),description(扩展的描述),icons(扩展相关图标文件的位置),browser_action:
    • browser_icon:定义相关图标文件的位置
    • browser_title:当用户鼠标悬停于扩展图标上所显示的文字
    • browser_popup:定义了当用户单击扩展图标时所显示页面的文件位置(.html)
  • 编写xxxxx.html(Chrome不允许将JavaScript代码段直接内嵌入HTML文档,所以要单独写js文件)
  • 编写xxxxx.js文件
  • 打开chrome,在地址栏中输入chrome://extentions,把写好的扩展加到浏览器中。

manifest.json

JSON是JavaScript Object Notation的缩写,这是一种基于JavaScript语言的轻量级数据交换格式。由于JSON储存的数据冗余度比XML更低,而且便于读取,所以也被很多其他语言所支持,现在JSON已经成为一种跨平台跨语言的通用数据交换格式。

下面,看一个例子:

{
    "name" : "Harry Potter",
    "author" : {
        "name" : "J.K.Rowling",
        "birth" : 1964
    },
    "books" : [
        "Harry Potter and the Philosopher's Stone",
        "Harry Potter and the Chamber of Secrets",
        "Harry Potter and the Prisoner of Azkaban",
        "Harry Potter and the Goblet of Fire",
        "Harry Potter and the Order of the Phoenix",
        "Harry Potter and the Half-Blood Prince",
        "Harry Potter and the Deathly Hallows"
    ]
}

以上例子展示了两种结构,分别是key:value对的形式和值的有序集合。
key:value对:名称和值之间用 “:”连接。多个key:value对之间用逗号隔开,最后在整个对象的两侧加上 { 和 }。
值的有序集合:值与值之间用逗号连接,最后在整个数组两侧加上“[”和“]”。

Chrome扩展的Manifest必须包含name、version和manifest_version属性,目前来说manifest_version属性值只能为数字2。name就是名称,而version则是版本号。


下面来看看书上例子给的时钟extentions.

首先看看html文件:







首先我们要知道这个是不够齐全的,但是chrome足以认识它了。