Einmal ist keinmal

Chrome拓展简明开发指南

HTML5:未来webapp解决方案

HTML5最大的贡献可谓一统移动互联网市场的开发方式,从此编写跨浏览器、跨平台、跨终端的应用不是难事。从这个角度来说,前端开发在未来的工作重心肯定会从以往的“兼容浏览器开发”逐步转移到iOS、Android、WP7和“现代浏览器”的应用上来。在这四大平台中,基于web的app也将会越来越多。

我最近尝试了一下Chrome拓展(插件)的开发,发布了“报时娘”和“智尺”两个小应用,在此大致归纳下Chrome插件的概念,开发流程和需要注意的地方。(细节推荐查阅Chrome拓展官方文档教程

Chrome 拓展的概念与权限

在Chrome浏览器中,拓展是那些在右上角(或地址栏)显示有图标,抓取某些网页信息,修改某些网页元素,用以根据浏览者的交互行为返回某些需求数据,或者承担链接到某个网站的快捷方式的小程序。以上对拓展的定义是根据设计拓展的目的来说的,也就是说,我们编写一个Chrome拓展,肯定是基于某种和浏览者期待的交互行为上,为达成某种目的而设计制作的。

这就引申出一个问题,什么样的元素,拓展可以获取,修改,提交?Chrome的权限体现在两个方面:

Chrome“压扁”的新logo

1、私有权限:指在拓展激发使用时(如点击拓展图标)弹出页面(popup)的权限,弹出页面实际上就是一个web页面,准确的来说,是一个本地的web页面,可以调用合理的一切资源(包括远程资源)。拓展弹出页面的特点就是生命周期很短,在用户鼠标焦点不在浏览器或者在浏览器其他tab页的时候,弹出页面会自动关闭,释放变量所占内存。

2、全局权限:指拓展拥有的得以改变所有用户打开的网页的权限,这意味着,拓展可以被授权往用户的页面里插入和修改DOM元素,脚本,锚点等(通过content_script的方式,这在以后会说到)。同时,拓展可以通过以background.html(拓展后台页面)的运行来监听用户具体的行为,激发某些操作(一个简单的例子是,当用户被监听到点击拓展的图标时,往当前页面里插入一个DOM元素,例如“hello world”)。

所以,Chrome拓展开发基本等于web开发,只是,在拓展的开发中,有许多无法使用到的web开发方式。那么拓展开发的流程是怎样的呢?非常简单,我们会在以下的章节里详细描述。

Chrome拓展开发流程

1、新建插件目录

我们需要在任何地方新建一个文件夹(如果你安装了本地环境,建议在localhost根目录里新建)。

在这个文件夹里,这个文件是必要的:

manifest.json(拓展的注册文件)

其他文件的调用都在这个注册文件里申明,因此可以按照你所喜欢的方式命名并组织(推荐的方式是将js文件统一放在js文件夹、样式文件的主文件放在根目录、图像文件放在images文件夹)。

在这个注册文件中,你需要写入这些代码(以智尺为例,复制后请将//注释删除,*为必要项目):
{
"name": "智尺", //这是你要新建的插件名称 *
"version": "1.1",//这里是它的版本 *
"description": "智尺是一个基于paperjs工具集的交互与视觉设计小工具。用来帮您丈量网页元素长款和水平垂直角度; 【使用方法:点击图标打开智尺,双击屏幕或者右键单击屏幕关闭智尺。】", //这里写入它的简单描述 *
"background_page": "bg.html", //如果你需要监听用户行为或要申明全局变量,可以引入这个后台文件
"permissions": [
"tabs", "http://*/*" //这表示哪些页面许可拓展操作,用法详见此
],
"content_scripts" : [ //content_script表示希望插入页面的脚本和样式表(指浏览者的网页,并不是插件本身的页面)
{
"matches" : [
"http://*/*",
"https://*/*"
],
"js" : ["jquery.min.js","paper.js","custom.js"], //可以看到这里插入了jquery脚本库,paper脚本库和自定义的一些脚本
"css": ["style.css"], //这里插入了样式表
"run_at" : "document_end", //申明这些脚本在文档最末尾处插入
"all_frames" : false
}
],
"icons": { //这里申明了拓展的logo,必要*
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"browser_action": { //如果你需要让拓展在浏览器右上方显示,请添加此段。
"default_icon": "images/icon.gif", //用于在右上方显示的小logo
"default_title": "智能尺" //鼠标悬停在右上方logo上的文字
}
}

这个文件的作用是告诉浏览器,我这个文件夹是一个插件文件夹,所有文件夹里的东西都是该插件的文件(以后提交到Chrome应用店也是将这个文件夹打包成zip上传)。这样,一个插件就注册好了,接下来,只需要将manifest里引用到的文件都新建好,然后按照web开发的方式调试好相应的脚本功能。就可以正式在chrome里以插件的方式调试了。

2、引入插件

我们需要打开拓展程序管理(偏好设置>拓展程序、即:chrome://settings/extensions),在右上角选择开发人员模式,然后点击左边的“载入正在开发的应用程序”,载入刚才那个文件夹,那么,在下边的拓展列表里,你刚才新建的插件就显示出来了。

以“智尺”为例,成功导入后截图

这样,一个Chrome拓展就已经新建好了。剩下的事情就和一般的web开发无异了。

在Chrome应用店发布App

智尺是一个基于paperjs工具集的Chrome插件,已在Chrome应用店发布

如果你已经在本地调试好了拓展,希望在chrome应用店发布,这就需要你有一个google账户,进入拓展中心后,点击开发人员信息页面,然后新建一个应用。有一点需要注意,发布应用前需要付5刀的费用(通过google wallet checkout),所以最好你得有张信用卡。

万事俱备之后,就可以开始编写自己的应用了。对了,也欢迎下载我的几款应用 “报时娘”和“智尺”。

  1. 博主好,我申请开发者账号,付费的时候,总是付费失败。用中国的信用卡,填写的是HK的地址,总是无法通过审核啊⋯⋯博主付费方面怎么弄的?

    [回复]

  2. 地址好像并没有关系,只要填写英文的就可以了。另外卡号注意不要加空格。我印象里没有审核一说 [囧]

    [回复]

    silsnow 回复:

    恩已经通过了,不知道为啥有审核,后来写了封信过去就好了。多谢~~

    [回复]