这是制作chrome扩展插件的入门指南,不需要任何编程基础,看完这个后,我们就着手做自己的Chrome插件了。好吧,我们现在就开始,其实我也是个新手。
做任何事情都要有个工具,制作chrome插件需要的工具很少。
- 记事本,用来编写代码
- Chrome浏览器,这个不能少吧。Windows下,所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本,Mac下载dev版本。
- 在计算机中创建一个目录来存放插件代码。
- 在目录里面创建文件manifest.json(注意后缀名是.json),用记事本打开,写入如下代码
{
"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.chromechina.com" target="_blank">Chrome中文论坛欢迎你</a>
<p><img src="smile.gif" /></p>
- 回到Chrome的扩展中心,点击插件下的“重新载入 ”。
现在点击插件图标看看。我们的第一个插件算是制作成功了。
我们想把自己制作的插件给其他人用,那么就需要将插件打包。
- 回到Chrome的插件扩展中心,点击“打包扩展程序”按钮。
- 选择刚才创建的文件夹,点击确定生成后缀为crx和cpm文件各一个。
把crx文件发送给自己的朋友,告诉他们你也会制作chrome插件吧。
要是在制作过程中有任何问题,欢迎到http://dev.chromechina.com来讨论交流。本文参考官方指南http://code.google.com/chrome/extensions/编写。
本文首发:http://dev.chromechina.com/thread-1940-1-1.html
- 大小: 23.1 KB
- 大小: 868 Bytes
- 大小: 50.3 KB
分享到:
相关推荐
grunt-chrome-extension-reload 重新加载打开的 chrome 扩展选项卡 (chrome://extensions) 以缓解 chrome 扩展开发的单调性。 使用 prasmussen 的与 Chrome 交互。入门这个插件需要 Grunt ~0.4.2 这个插件还需要安装...
Chrome浏览器Codebattle扩展 项目的浏览器扩展。 CodeBattle是Hexlet社区开发的一个开源项目。 该应用程序的当前版本在可用。 要求 Mac / Linux 浏览器Chrome 安装 $ git clone git@github....扩展入门指南 扩展示例
:bell:请确保您对Chrome插件开发已经有基本的了解,入门教程: 。 在umi配置文件cofig/config.ts或.umirc.ts中配置extensions 。完整配置项说明请查阅。 如果脚脚架可使用 。 插件开发 如希望对本插件进行开发,可...
[Learn TurtleBot] ( ) 是一份开源入门指南,适用于对机器人感兴趣的网络、移动和创客开发人员。 [转到教程] ( ) 网络应用程序 这个存储库是一个 chrome 浏览器扩展,它控制 CoffeeBot(一个用 ROS 编写的 ...
入门指南 Atom 飞行手册中文版 AWK程序设计语言 Backbone.js入门教程第二版 Beyond the C++ Standard Library 中文版 Bootstrap3 中文官方文档 Beautiful Soup 4.2.0 文档 C/C++ API 参考(英文) C/C++ 中文参考 ...
入门指南 Atom 飞行手册中文版 AWK程序设计语言 Backbone.js入门教程第二版 Beyond the C++ Standard Library 中文版 Bootstrap3 中文官方文档 Beautiful Soup 4.2.0 文档 C/C++ API 参考(英文) C/C++ 中文参考 ...
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台,用来方便地搭建快速的,易于扩展的网络应用。Node.js 借助事件驱动,非阻塞 I/O 模型变得轻量和高效,非常适合 run across distributed devices 的 data...
该项目已弃用,不建议用于将来的开发。 方解石网 Calcite Web是一个Web设计框架,为基于浏览器的属性和产品实施Esri品牌指南和Calcite设计框架。 Calcite Web用编写,并且与标准SassRubygem和编译器兼容。 该项目还...
aurelia-初学者套件 该库是平台的一部分,为刚开始学习该框架的人们提供了... 如果您想对我们的开发过程有更深入的了解,请安装 Chrome扩展程序并访问我们的任何存储库板。 您可以通过访问获得Aurelia所有工作的概述。
第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用...