九网软件

Chrome是极为优秀的浏览器,目前它的用户量正在激增.就个人使用web和设计web的经验,Chrome浏览器对前端代码的支持性相当好.是web 设计者心中最省心的一个浏览器.

另外,Chrome是基于开源的chromium的.为开发人员提供了扩展文档和API.

下面简单介绍下制作一个简单的Chrome扩展程序的过程

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -

1.用编辑器(比如优秀的Notepad++,其实只要是代码编辑器都支持多个编码方式)新建文件在UTF-8编码格式输入代码:

(代码仅仅作为例子,大家按照这个找规律然后自己修改)

{
"name":"工大九网软件",   //扩展的名称
"description":"分享小巧实用，绿色免费，边缘有趣的软件资源和有趣的网络应用",//扩展的介绍
"version":"1.0",//扩展的版本
"icons":{
"128":"hit9.jpg"
},//扩展的图标尺寸为128*128的,图标路径
 "app": {
    "urls": [
      "http://www.hit9.net/"
    ],
    "launch": {
      "web_url": "http://www.hit9.net/"
    }//启动的导航到的地址
  },//可安装的webapp，包括打包过的app，需要这个字段来指定app需要使用的url
 "permissions": [
    "notifications" //允许使用桌面提醒
  ]
  }

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -
2.把这个文件保存为manifest.json,然后和图片hit9.jpg放在一个目录下.

打开Chrome浏览器的扩展程序页面(chrome://extensions/),点击开发人员模式。

载入正在开发的扩展,选择那个目录.

如果提示有错误,多半是语法错误,也就是多一个,号或少一个,号的原因.

如果未提示错误的话,说明这个已经开发成功啦.

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -
3.这个例子扩展的功能是访问九网软件.效果如图(其实,小众在Chrome的webstore上的chrome扩展就是个这个~~~~很简单的程序~~)

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -

4.有的童鞋会说,我使用的chrome一般在地址栏的右侧也就是如图的位置

这个图标的位置只需要修改下配置文件manifest.json(这个文件是所有扩展必备的文件)

代码如下(注意browser_action这个标签)

{
 "name":"工大九网软件",
 "description":"分享小巧实用，绿色免费，边缘有趣的软件资源和有趣的网络应用",
 "version":"1.0",
 "icons":{
 "128":"hit9.jpg"
},
  "browser_action": {
  "default_icon": "hit9.jpg",
  "defaut_title":"工大九网软件",
  "popup": "index.html" //这是点击应用图标之后载入的web页面
  },//browser_action这个标签会使图标在地址栏处显示
    "permissions": [
    "http://*.hit9.net/",//允许和九网交互
	"notifications"
  ]
}

你再新建一个页面index.html即可.
为了控制这个窗口的大小可以在index.html加入css样式来限制比如:

<!--
body{
min-width:100px;
min-height:100px;
}
-->
 
<img src="hit9.jpg" alt="" />

于是,一个简单的Chrome扩展就完成了,注意每次更改manifest.json之后,都要重新载入这个目录一下,只更改html代码不必重新载入.

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -

5.关于打包程序:

开发完毕之后,可以通过chrome把程序打包为.crx的文件.这个文件直接拖进chrome即可安装.

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -

6.推荐的链接:

1.Chrome扩展开发文档中文版http://open.chrome.360.cn/html/dev_doc.html (360公司进行的翻译)

2.Chrome网上商店https://chrome.google.com/webstore/category/home (你进行开发完毕之后,可以把扩展发布到这里,不过需要一个极为难以支付的$5注册费~)

- –  - – - – - – - – - – - – - – - – - – -  - – - – - – - – - – - – - – - – - – - – - -

我把我做的例子提供下载

下载:chrome_hit9_1.crx chrome_hit9_2.crx (右键另存为保存后,再拖到chrome即可安装)

下载例子源码:

程序1 程序2

PS:crx文件用WinRAR等解压文件解压后就能得到源文件。。

转载请注明本文链接http://www.hit9.net/archives/2948