这是制作chrome扩展插件的入门指南,不需要任何编程基础,看完这个后,我们就着手做自己的Chrome插件了。好吧,我们现在就开始,其实我也是个新手。
准备工具
做任何事情都要有个工具,制作chrome插件需要的工具很少。
1.记事本,用来编写代码
2.Chrome浏览器,这个不能少吧。Windows下,所有版本的Chrome都可以制作插件。Linux下需要下载Beta版本,Mac下载dev版本。
开始制作第一个插件
1.在计算机中创建一个目录来存放插件代码。
2.在目录里面创建文件manifest.json(注意后缀名是.json),用记事本打开,写入如下代码
{
"name": "第一个Chrome插件",
"version": "1.0",
"description": "我的第一个Chrome插件,还不错吧",
"browser_action": {
"default_icon": "icon.gif"
}
}
3.把下面两张图片保存到文件夹中,分别取名icon.gif和smile.gif
4.安装这个插件:
a.点击右上角扳手,选择扩展程序,打开扩展中心。
b.点击右上角的“开发人员模式”,使得前面的“+”变成“-”,打开相应的菜单。如果一开始就是“-”,那么不用点击。
c.点击“载入正在开发的扩展程序按钮”,导入刚才创建的文件夹。
如果一切顺利,你的Chrome地址栏将会有个新图标,你的第一个插件诞生了。
给第一个插件增加新功能
你现在虽然做了第一个插件,但实际上他并没有实现任何功能,我们点击图标,没有任何反应。下面我们就给他增加点功能。
1.编辑manifest.json这个文件,用下面的代码替换现有的代码,其实我们只是加了一行代码和一个逗号而已。
{
"name": "第一个Chrome插件",
"version": "1.0",
"description": "我的第一个Chrome插件,还不错吧",
"browser_action": {
"default_icon": "icon.gif",
"popup": "popup.html"
}
}
2.下面我们创建一个文本文件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>
3.回到Chrome的扩展中心,点击插件下的“重新载入 ”。
现在点击插件图标看看。我们的第一个插件算是制作成功了。
打包插件
我们想把自己制作的插件给其他人用,那么就需要将插件打包。
1.回到Chrome的插件扩展中心,点击“打包扩展程序”按钮。
2.选择刚才创建的文件夹,点击确定生成后缀为crx和cpm文件各一个。
把crx文件发送给自己的朋友,告诉他们你也会制作chrome插件吧。
你可以修改里面的文字图片,制作出极具个性的扩展来了。现在让我们来看看大家都做出了什么样的扩展,把你的第一个扩展上传上来让大家看看吧!
- 大小: 23.1 KB
- 大小: 868 Bytes
- 大小: 50.3 KB
分享到:
相关推荐
Chrome 插件开发入门教程 Chrome 插件开发入门教程旨在帮助...本教程旨在为开发者提供一个快速入门 Chrome 插件开发的指南,涵盖了插件开发的基本概念、Manifest 文件的结构、模式匹配、开发和调试等方面的知识点。
Chrome扩展开发者指南 当读完了这个综述和入门之后,就可以开始创建应用(扩展)和WebApp了。 注意:WebApp是通过应用(扩展)的方式实现的,所以除非特别声明,本页所有内容都适用于WebApp。
grunt-chrome-extension-reload 重新加载打开的 chrome 扩展选项卡 (chrome://extensions) 以缓解 chrome 扩展开发的单调性。 使用 prasmussen 的与 Chrome 交互。入门这个插件需要 Grunt ~0.4.2 这个插件还需要安装...
综上所述,《Pro-Android Web Apps》这本书不仅是一本全面覆盖HTML5、CSS3和JavaScript等关键技术的指南,而且也深入探讨了如何构建高效、可扩展且具有竞争力的移动Web应用。对于希望在Android平台上开发Web应用的...
总的来说,`chrome-extension-template`是一个方便开发者快速入门Chrome扩展开发的工具,它简化了项目的初始化过程,让开发者可以更专注于实现扩展的创新功能和用户体验。通过学习和使用这个模板,开发者能够节省...
:bell:请确保您对Chrome插件开发已经有基本的了解,入门教程: 。 在umi配置文件cofig/config.ts或.umirc.ts中配置extensions 。完整配置项说明请查阅。 如果脚脚架可使用 。 插件开发 如希望对本插件进行开发,可...
### iPlatUI 前台开发指南知识点详解 #### 一、iPlatUI概述 iPlatUI是一款专为提升前台用户界面(UI)开发效率而设计的框架。通过集成丰富的组件库以及一系列便捷的功能特性,使得开发者能够快速构建出高质量的前端...
要获得入门帮助,请访问http://www.chromelogger.com 4.0版,该版本基本上是完全重写,可以将该扩展程序更名为Chrome Logger(而不是ChromePHP),并使其与最新的Chrome扩展程序指南保持一致。 此扩展程序以前称为...
Chrome扩展,也称为Chrome插件,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能,为用户提供个性化的体验。Chrome Extension Document,虽然非官方,但提供了详细的中文开发指南,帮助开发者构建...
总的来说,《Node.js开发指南》是一本全面、深入的Node.js入门教材,配合随书代码,无论是对初学者还是有一定基础的学习者,都能从中获益匪浅。通过学习,读者不仅可以掌握Node.js的开发技术,还能进一步提升...
"Liu_Fan_Wen_D.zip"这个压缩包显然包含了关于Chrome插件开发的中文学习资源,特别是"扩展程序插件开发初学者教程 扩展程序插件编程-菜鸟入门.pdf"这份文档,很可能是为初学者设计的一份详细指南。 在Chrome插件...
Chrome浏览器Codebattle扩展 项目的浏览器扩展。 CodeBattle是Hexlet社区开发的一个开源项目。 该应用程序的当前版本在可用。 要求 Mac / Linux 浏览器Chrome 安装 $ git clone git@github....扩展入门指南 扩展示例
此外,进阶技巧包括深入理解圈子机制、管理邮件通知、设置分享权限、查看内容的永久链接、优化图片和视频上传、使用Chrome扩展程序提升体验等,都是提升Google+使用体验的关键。 #### 展望与愿景 随着Google+的...
**RichFaces 开发指南概述** **1. 引言** RichFaces 是一个强大的 JavaServer Faces (JSF) 扩展框架,它提供了大量的富组件和皮肤可定制性支持。这个框架旨在帮助开发者创建功能丰富的、交互性强的Web应用程序,...
所有安装了GuideChimp Chrome扩展程序的Chrome用户都将收到通知,并能够通过点击扩展程序图标立即在访问页面上打开浏览。 无需在您的网站上安装其他JavaScript库或游览配置。 ==您可以使用GuideChimp做什么==-用户...
### Selenium入门教程C#分享知识点概述 #### 一、Selenium简介 - **定义**: Selenium 是一款主要用于 Web 应用程序的自动化测试工具,由 ThoughtWorks 开发。 - **核心特性**: - 运行在浏览器中,模拟真实用户...
对机器人感兴趣的开发人员的“入门”指南 [Learn TurtleBot] ( ) 是一份开源入门指南,适用于对机器人感兴趣的网络、移动和创客开发人员。 [转到教程] ( ) 网络应用程序 这个存储库是一个 chrome 浏览器扩展,它...