`
iaiai
  • 浏览: 2181103 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Chrome扩展开发指南--入门

 
阅读更多
这是制作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 插件开发入门教程旨在帮助...本教程旨在为开发者提供一个快速入门 Chrome 插件开发的指南,涵盖了插件开发的基本概念、Manifest 文件的结构、模式匹配、开发和调试等方面的知识点。

    Chrome扩展开发者指南.chm

    Chrome扩展开发者指南 当读完了这个综述和入门之后,就可以开始创建应用(扩展)和WebApp了。 注意:WebApp是通过应用(扩展)的方式实现的,所以除非特别声明,本页所有内容都适用于WebApp。

    grunt-chrome-extension-reload:重新加载您的扩展代码

    grunt-chrome-extension-reload 重新加载打开的 chrome 扩展选项卡 (chrome://extensions) 以缓解 chrome 扩展开发的单调性。 使用 prasmussen 的与 Chrome 交互。入门这个插件需要 Grunt ~0.4.2 这个插件还需要安装...

    Pro-Android-Web-Apps-Developing-HTML5-JavaScript-CSS-and-Chrome-OS-Web-Apps.pd

    综上所述,《Pro-Android Web Apps》这本书不仅是一本全面覆盖HTML5、CSS3和JavaScript等关键技术的指南,而且也深入探讨了如何构建高效、可扩展且具有竞争力的移动Web应用。对于希望在Android平台上开发Web应用的...

    chrome-extension-template

    总的来说,`chrome-extension-template`是一个方便开发者快速入门Chrome扩展开发的工具,它简化了项目的初始化过程,让开发者可以更专注于实现扩展的创新功能和用户体验。通过学习和使用这个模板,开发者能够节省...

    umi-plugin-extensions:用于开发Chrome插件的umi适应插件

    :bell:请确保您对Chrome插件开发已经有基本的了解,入门教程: 。 在umi配置文件cofig/config.ts或.umirc.ts中配置extensions 。完整配置项说明请查阅。 如果脚脚架可使用 。 插件开发 如希望对本插件进行开发,可...

    iPlatUI 前台开发指南

    ### iPlatUI 前台开发指南知识点详解 #### 一、iPlatUI概述 iPlatUI是一款专为提升前台用户界面(UI)开发效率而设计的框架。通过集成丰富的组件库以及一系列便捷的功能特性,使得开发者能够快速构建出高质量的前端...

    《nodejs开发指南》中文pdf

    总之,《Node.js开发指南》是一本全面覆盖Node.js基础知识及高级特性的教程,无论你是前端开发者希望扩展到后端,还是对JavaScript有基础并想进入服务器端编程的世界,这本书都能为你的Node.js学习之路提供宝贵的...

    HTML基础入门指南

    ### HTML基础入门指南知识点详解 #### 一、HTML概述与基本结构 - **HTML简介**: - HTML(HyperText Markup Language),即超文本标记语言,是一种用于创建网页的标准标记语言。 - HTML文档由一系列标签组成,...

    Chrome Logger-crx插件

    要获得入门帮助,请访问http://www.chromelogger.com 4.0版,该版本基本上是完全重写,可以将该扩展程序更名为Chrome Logger(而不是ChromePHP),并使其与最新的Chrome扩展程序指南保持一致。 此扩展程序以前称为...

    ChromeExtensionDocument:chrome插件中文开发文档(非官方)

    Chrome扩展,也称为Chrome插件,是Google Chrome浏览器上的应用程序,可以增强或修改浏览器的功能,为用户提供个性化的体验。Chrome Extension Document,虽然非官方,但提供了详细的中文开发指南,帮助开发者构建...

    NodeJs开发指南 中文(附随书代码)

    总的来说,《Node.js开发指南》是一本全面、深入的Node.js入门教材,配合随书代码,无论是对初学者还是有一定基础的学习者,都能从中获益匪浅。通过学习,读者不仅可以掌握Node.js的开发技术,还能进一步提升...

    Liu_Fan_Wen_D.zip

    "Liu_Fan_Wen_D.zip"这个压缩包显然包含了关于Chrome插件开发的中文学习资源,特别是"扩展程序插件开发初学者教程 扩展程序插件编程-菜鸟入门.pdf"这份文档,很可能是为初学者设计的一份详细指南。 在Chrome插件...

    chrome_extension:新的Codebattle镀Chrome扩展

    Chrome浏览器Codebattle扩展 项目的浏览器扩展。 CodeBattle是Hexlet社区开发的一个开源项目。 该应用程序的当前版本在可用。 要求 Mac / Linux 浏览器Chrome 安装 $ git clone git@github....扩展入门指南 扩展示例

    Google+新手入门指南

    此外,进阶技巧包括深入理解圈子机制、管理邮件通知、设置分享权限、查看内容的永久链接、优化图片和视频上传、使用Chrome扩展程序提升体验等,都是提升Google+使用体验的关键。 #### 展望与愿景 随着Google+的...

    richfaces开发指南(英文版)

    **RichFaces 开发指南概述** **1. 引言** RichFaces 是一个强大的 JavaServer Faces (JSF) 扩展框架,它提供了大量的富组件和皮肤可定制性支持。这个框架旨在帮助开发者创建功能丰富的、交互性强的Web应用程序,...

    GuideChimp Chrome Extension-crx插件

    所有安装了GuideChimp Chrome扩展程序的Chrome用户都将收到通知,并能够通过点击扩展程序图标立即在访问页面上打开浏览。 无需在您的网站上安装其他JavaScript库或游览配置。 ==您可以使用GuideChimp做什么==-用户...

Global site tag (gtag.js) - Google Analytics