设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

如何开发Chrome扩展程序

2013-8-28 11:05| 发布者: 红黑魂| 查看: 6264| 评论: 0|来自: 伯乐在线

摘要: 我真的很喜欢Chrome浏览器,这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript,那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩 ...

我真的很喜欢Chrome浏览器,这种感觉是在我发现创建Chrome扩展竟然是如此的容易之后才有的。如果你懂得基本的HTML、CSS、JavaScript,那你就有了扩展Chrome浏览器需要的所有知识。这篇文章将会是一个让你对Chrome扩展有基本了解的速成班,但我在这个方面也不敢自称是专家,如果你在文章中发现任何错误,请一定让我知道。 

开始

为了着手创建你的扩展程序,你只需要为你的扩展创建一个文件夹。程序所必须的文件只有manifest.json.,不过也推荐准备一些图片用作图标,和至少一个JavaScript以提供功能。一般来说还会包含HTML文档、样式表、图片等等其他的资源。

Manifest文件

每个扩展都必须在其根目录下包含一个manifest.json文件。

这个文件里面声明了扩展的名称、版本、权限、设置选项和其他的一些和扩展相关的元数据。Manifest v1早在Chrome 18便已被弃用,而且会根据这个时间表逐渐淘汰使用Manifest v1的扩展。如果你在参考一些旧扩展的Manifest文件的话,请确认添加"manifest_version": 2.

Google发布的Manifest v2中支持的域

后台页

大多数扩展都会在其manfiest.json文件内有这样的内容:

1
2
3
4
5
{
  "background": {
    "scripts": ["index.js", "other.js"]
  }
}

这一段代码指定了两个需要被加载而且要保持在后台运行的脚本,这些脚本会在扩展的后台页运行。后台页是一个在扩展的进程中生成并运行的页面,存在时间会和扩展的生命周期等长。后台页可用来作为扩展的其他界面的控制器,用来维护某个状态或者保持某些活动。如果你需要用后台页来声明一些标记来用,可以把一个HTML文件名指定给page选项。

事件页

后台页会从扩展被加载的时候被装载,而且会一直留在内存里。这是因为如果有些状态需要被长时间维护,或者需要被扩展的其他部分访问。但是如果你没有这个需求,那么应该尽可能的使用事件页。事件页其实只是相当于一个包含了”persistent”: false条目的后台页,这一行语句告诉Chrome可以不需要把后台页保留在内存里。相对来说,事件页也会在最开始被装载,但是一旦指定的脚本运行完毕,事件页便会从内存卸载,而且会在需要的时候被再次加载(比如用来回应某些操作)。

以上便是在为扩展添加功能之前所需要知道的。

交互

利用Google提供的大量API,你的扩展与浏览器交互或者为用户提供功能都变得方便。

chrome.* APIs

Chrome的程序和扩展程序都非常喜欢调用chrome.* APIs,这些API可以让你通过不同的方式来操控浏览器,API通常会在后台脚本里面被调用,这是我找到的一些常用API:

  • chrome.tabs 标签页:新建、刷新、关闭、访问和操控标签页
  • chrome.history 历史:访问用户浏览历史
  • chrome.bookmarks 书签:添加、编辑、移除和搜索用户书签
  • chrome.events 事件:监听或者管理浏览器发生的事件
  • chrome.commands 命令:添加或者改变键盘命令
  • chrome.contextMenus 右键:添加条目到右键下文菜单
  • chrome.omnibox 多功能框(地址栏):添加多功能框关键字,使用户可以向扩展发送指令或者激活扩展

其他API

Chrome程序和扩展程序通常也会用到其他的API,包括如本地存储、地理位置、缓存、画布等新型的HTML5 API。你也可以用普通的JavaScript或者webkit API来实现。

声明权限

有些Chrome API的功能必须要在manifest.json文件中声明相关权限才能被调用,通过在permissions 域中把值设成相应权限名称,或者是通识符组成的数组。

1
2
3
4
5
6
7
8
{
  "permissions": [
    "contextMenus",
    "tabs",
    "https://google.com/*",
    "https://developer.mozilla.org/*"
  ]
}

在这一段声明代码中,数组中的头两个字符串是分别用来为chrome.contextMenus和chrome.tabs  的API授权的,最后的两个字符串则是用来匹配以 https://google.com/ 和 https://developer.mozilla.org/ 开头的地址。

用户界面

Chrome扩展的用户界面有着严格的限制,但是根据扩展的需要却可以有不同形式的界面。

浏览器按钮[a]

浏览器按钮允许你在右上角放置一个的16 x 16像素的图标,如果扩展应用的界面是全局的,而不是针对某个页面,那就应该使用浏览器操作。如果要使用浏览器按钮,你必须在manifest.json中的browser_action域中做如下声明:

1
2
3
4
5
6
7
8
9
10
{
  "browser_action": {
    "default_icon": {                   
      "19": "images/icon19.png",
      "38": "images/icon38.png"
    },
    "default_title": "tooltip text here",
    "default_popup": "popup.html"
  }
}

一个浏览器按钮可以有一个图标、提示、文字标记和一个弹出内容,文字标记可以将极少的文字(4字符)动态的覆盖在浏览器操作的图标上,你也可以通过chrome.browserActionAPI来对浏览器按钮相关的事件做出反应。



酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部