http://jingyan.baidu.com/article/b907e627fb90fd46e7891c3c.html

Chrome 浏览器作为基于Webkit的新一代浏览器。Chrome自从正式发布以来,市场占有率逐步提高,自从公布了Chrome扩展的API以来,Chrome扩展开发更是前途似锦。一个Chrome插件小则可以解决生活中琐碎的问题,多则可以惠及千众,造福万代。而且,Google为Chrome建立了自己的Web开发市场,做得好的插件还可以为作者赢得丰厚的利益。

工具/原料

  • Chrome浏览器
  • 文本编辑工具,普通的记事本也可以,不过最好是带格式整理和语法高亮的,笔者用的是Notepad++,需要的朋友可以百度一下。

步骤/方法

  1. 1
    创建一个单独的文件夹,起个名字吧,比如说我们为百度贴吧开发一个插件,就叫TiebaAddion。之后在这个文件夹里创建一个名字为“manifest.json”的文件,在里面写上如下的样子。
    {
    "name": "TiebaAddin",
    "version": "1.0",
    "description": "An addin for Tieba.",
    "browser_action": {"default_icon": "icon.png"},
    "permissions": [http://*/*]
    }
    这里各项的意义很显然可以通过名字得之,但如果你想了解更多,请参考“Chrome扩展”文档(详见参考资料)
  2. 2
    如果你细心看上面的配置文件,你就会知道,你现在需要找一个图标,放在这个目录下,名字叫icon.png,当然,这个名字只要和上面的配置文件里default_icon的属性一致就好。
  3. 3
    现在,只要点击Chrome工具条的菜单按钮选择里面的工具(Tools)>> 扩展(Extensions)就好。菜单按钮如右图。
  4. 4
    选择开发者模式,选择加载未打包的插件,然后,选择第一步中的那个文件夹即可。好吧,现在我们就可以启动插件了。
  5. 5
    好了,在地址栏的右侧出现了我们的图标,但是点击图标却什么也没做,这是自然地,因为我们还什么代码没有写。现在在那个目录下,建立一个html文件,并且名字为popup.html,同时在配置文件里“browser_action”下加上一条:"popup": "popup.html"。示范:
    {
    "name": "TiebaAddin",
    "version": "1.0",
    "description": "An addin for Tieba.",
    "browser_action": {"default_icon": "icon.png","popup": "popup.html"},
    "permissions": [http://*/*]
    }
    此处注意,每一对大括号里的最后一项后面都没有逗号,其余的每项之间必须用逗号间隔!哪怕是browser_action这样复合的项目,在他的大括号后也要有逗号。
  6. 6
    在Popup.html里写上一些html代码,比如简单的输出HelloWorld也好,这个Popup.html和普通的html文件按没有任何差别。
  7. 7
    这就是基本的插件制作方法,插件制作的中级教程我在一下篇相关经验会详细讲解的

怎样开发Chrome浏览器的插件的更多相关文章

  1. chrome浏览器postman 插件安装

    postman 软件功能 模拟各种HTTPrequests 从常用的GET.POST到RESTful的PUT.DELETE…等等.甚至还可以发送文件.送出额外的header. Collection功能 ...

  2. chrome浏览器视频插件

    以前安装chrome浏览器flash插件是将libflashplayer.so拷贝到chrome浏览器的plugins目录下.但最近好像不行了. 于是换了另一插件:pepperflashplugin- ...

  3. 使用JavaScript开发IE浏览器本地插件实例

    使用JavaScript开发IE浏览器本地插件实例 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2015-02-18我要评论 这篇文章主要介绍了使用JavaScript开发IE浏览器本 ...

  4. Chrome浏览器Postman插件安装使用

    最近调试后台接口一直在使用的工具,由于换了新的电脑重新安装了一下PostMan.随便记录一下如何安装使用这个插件. 闲言不要谈,直接上步骤: 1. 首先必须有chrome浏览器,这个相信大家肯定都安装 ...

  5. 自媒体人Chrome浏览器必备插件精选神器!

    自从互联网时代起,浏览器使用从最早的IE,到opera,到猎豹浏览器,到360双核浏览器,到火狐,到safari,到目前最喜欢用的chrome.一路下来,chrome的稳定性与扩展性征服了我,成了我必 ...

  6. CSS写一个圣诞树Chrome浏览器小插件

    一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...

  7. .net使用cefsharp开源库开发chrome浏览器(二)

    离上篇写介绍pc端的混合开发和为什么以cefsharp入手研究混合开发已经有好几天,一直忙,抽不出时间继续写怎么搭建cefsharp开发环境.其实没有时间是借口,一切都是懒,没有爱到深处. 今天继续写 ...

  8. Chrome浏览器安装插件提示(net::ERR_NAME_NOT_RESOLVED)

    在chrome的webstore中安装currently插件.使用goagentFQ后能正常访问,但出现"net::ERR_NAME_NOT_RESOLVED"错误. 该错误的含义 ...

  9. chrome浏览器美化插件:让你的浏览器页面冒水泡, 游小鱼儿

    下载插件和效果图 这是一个让你的浏览器冒泡泡的插件, 浏览网页的时候仿佛置身于海底世界: 插件下载地址:http://files.cnblogs.com/files/diligenceday/chro ...

随机推荐

  1. web浏览器下的缓存 - Etag

    设置浏览器缓存的几种方法: Last-Modified : 服务器上文件的最后修改时间 Etag  : 文件标识 Expiers : 本地缓存目录中文件过期的时间 ( 由服务器指定具体的时间 ) Ca ...

  2. 静态的html页面想要设置使用浏览器缓存

    设置html页面缓存方法: 静态的html页面想要设置使用缓存: 通过HTTP的META设置expires和cache-control code 1.  <meta http-equiv=&qu ...

  3. Jquery ajax basic

    $.ajax({ url: "test.aspx?action=testaction", contentType: "application/json; charset= ...

  4. 彻底删除sql server的方法

    请先确定是否把sql相关的东西删了,建议进行如下操作. 1.先下个Windows Install Clean Up,清理sql相关东西,要全部清理. 2.到控制面板--添加删除程序中看是否还有未删的. ...

  5. PHPExcel读取excel03/07版到数组

    想总结下PHPExcel的读取excel到数组的function,用的时候直接调取,懒…… 参考了以下链接: http://www.jb51.net/article/29071.htm http:// ...

  6. php入门单引号与双引号区别

    [1]单引号和双引号在处理变量的时候做法: 括在双引号内的变量会解释出值,但是括在单引号内则不做处理,直接输出: <?php $var = 'my name is huige'; echo &q ...

  7. centos架设FTP服务器

    1.安装vsftp在这里,我们架设的是虚拟用户,所谓虚拟用户就是没有使用真实的帐户,只是通过某种手段达到映射帐户和设置权限的目的.yum -y install vsftpd在CentOS中,这样就可以 ...

  8. WordPress 后台禁用Google Open Sans字体,加速网站

    解决方法很简单,安装启用 Disable Google Fonts 或者 Remove Open Sans font Link from WP core 其中之一即可.或者如果你没有使用WP自带的官方 ...

  9. Spark小课堂Week3 FirstSparkApp(RDD开发)

    Spark小课堂Week3 FirstSparkApp 问题:Java有哪些数据结构 大致有如下几种,其中List与Map是最重要的: List Map Set Array Heap Stack Qu ...

  10. [旧博客]QQ旋风加速漏洞

    漏洞是这样的,用开通QQ会员的账号登录QQ旋风,添加要下载的任务,启动加速后,注销,登录lixian.qq.com 删除刚才添加的离线任务,这时QQ旋风还是在加速那个任务.而你又可以登录QQ旋风添加其 ...