Chrome 插件开发学习

Categories: 前端, 网站相关
Comments: No Comments
Published on: 2011 年 11 月 20 日

首先分类分在了html中。。。为什么,学过后就知道了。。。学习自chinaChrome论坛。
这是制作chrome扩展插件的入门指南,不需要任何编程基础,看完这个后,我们就着手做自己的Chrome插件了。好吧,我们现在就开始,其实我也是个新手。

准备工具
做任何事情都要有个工具,制作chrome插件需要的工具很少。
记事本,用来编写代码
Chrome浏览器,这个不能少吧。Windows下,所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本,Mac下载dev版本。

开始制作第一个插件
在计算机中创建一个目录来存放插件代码。
在目录里面创建文件manifest.json(注意后缀名是.json,这个文件名称一定不能变,我开始自己命名个文件,一直报错,原来这个文件名就像index,不能改变),用记事本打开,写入如下代码

{
"name": "第一个Chrome插件",
"version": "1.0",
"description": "我的第一个Chrome插件,还不错吧",
"browser_action": {
"default_icon": "icon.gif"
}
}

把下面两张图片保存到文件夹中,分别取名icon.gif和smile.gif
图片一:

图片二:

安装这个插件:
a.点击右上角扳手,选择扩展程序,打开扩展中心。
b.点击右上角的“开发人员模式”,使得前面的“+”变成“-”,打开相应的菜单。如果一开始就是“-”,那么不用点击。
c.点击“载入正在开发的扩展程序按钮”,导入刚才创建的文件夹。
如果一切顺利,你的Chrome地址栏将会有个新图标,你的第一个插件诞生了。

给第一个插件增加新功能
你现在虽然做了第一个插件,但实际上他并没有实现任何功能,我们点击图标,没有任何反应。下面我们就给他增加点功能。
编辑manifest.json这个文件,用下面的代码替换现有的代码,其实我们只是加了一行代码和一个逗号而已。

{
"name": "第一个Chrome插件",
"version": "1.0",
"description": "我的第一个Chrome插件,还不错吧",
"browser_action": {
"default_icon": "icon.gif",
"popup": "popup.html"
}
}

下面我们创建一个文本文件popup.html,用记事本打开,将下面的代码写进去

<p>Hello,Chrome!</p><p>我的名字叫ChromeChina!</p><p><a href="http://www.pureisle.net.net" target="_blank">三江小渡欢迎你</a><p><img src="smile.gif" /></p>

回到Chrome的扩展中心,点击插件下的“重新载入 ”。
现在点击插件图标看看。我们的第一个插件算是制作成功了。

打包插件
我们想把自己制作的插件给其他人用,那么就需要将插件打包。
回到Chrome的插件扩展中心,点击“打包扩展程序”按钮。
选择刚才创建的文件夹,点击确定生成后缀为crx和cpm文件各一个。
把crx文件发送给自己的朋友,告诉他们你也会制作chrome插件吧。

这篇文章翻译自http://code.google.com/chrome/extensions/overview.html(这个也是可以详细学习看一看的地方),我还没有真正做过插件,翻译这篇文章算是班门弄斧,有翻译的不好的地方请一定指出来,希望能够达到完美!

( 对新手说的话:文章涉及到的一些术语,对没有任何网页知识的新手来说还是挺难懂的,可以借助Google/baidu看一下,其实不懂也没多大关系,这篇文章只是一个概述,完全可以跳过这些术语,希望大家对制作插件不要失去信心。)

只要看完这篇文章,并且做过入门指南中的例子,你就可以真正开始开发属于自己的Chrome插件了。其实就是相当于学习了hello,world!只要知道原理了,剩下的就可以自己做着学着研究着,不知道的API搜一搜,基本上就是做网站,里边会用到不少chrome的API。暂时接触了解一下,有空深入探究吧。

最多留言日志

No Comments - Leave a comment

Leave a comment

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Welcome , today is 星期日, 2017 年 11 月 19 日