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. [转]PHP错误日志

    对 于PHP开发者来说,一旦某个产品投入使用,应该立即将display_errors选项关闭,以免因为这些错误所透露的路径.数据库连接.数据表等信息 而遭到黑客攻击.但是,任何一个产品在投入使用后,都 ...

  2. SSH连接时出现Host key verification failed的原因及解决方法

    SSH连接的时候Host key verification failed. [root@cache001 swftools-0.9.0]# ssh 192.168.1.90@@@@@@@@@@@@@@ ...

  3. phpcmsV9中表单向导在js调用里日期控件在IE下报Calendar未定义的解决办法

    最近在phpcmsV9里用表单向导弄个的提交表单,但用了日期和时间类型时,用   <script language='javascript' src='{APP_PATH}index.php?m ...

  4. linux系统文件属性及企业精典故障案例

    linux系统文件属性: [root@nginx_back ~]# stat keepalived-1.2.7.tar.gz 查看文件属性 File: "keepalived-1.2.7.t ...

  5. 移植openssl

    1.官网(ftp://ftp.openssl.org/source/old/0.9.x/)下载openssl-0.9.8k.tar.gz2.交叉编译openssl CC=arm-hisiv400-li ...

  6. ASP.NET 页面传值得9种方式

    1. Get(即使用QueryString显式传递)     方式:在url后面跟参数.     特点:简单.方便.     缺点:字符串长度最长为255个字符:数据泄漏在url中.     适用数据 ...

  7. EXTJS4.2 控件之Grid 行点击事件

    listeners: { 'itemclick': function (view, record, item, index, e) { //Ext.MessageBox.alert("标题& ...

  8. 遍历并修改dictionary的值

    var dictionary = clb_Select.Items.Cast<object>().ToDictionary(item => item.ToString(), item ...

  9. svn is already locked解决方案

    在出错文件夹下,鼠标右键TortoiseSVN->Clean up. SVN错误:Attempted to lock an already-locked dir 1.出现这个问题后使用“清理”功 ...

  10. Mybatis的分页查询

    示例1:查询业务员的联系记录 1.控制器代码(RelationController.java) //分页列出联系记录 @RequestMapping(value="toPage/custom ...