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. iterm2 配色修改

    打开终端 输入 cd ~ vim .bash_profile 插入 export CLICOLOR= export LSCOLORS=gxfxcxdxbxegedabagacad export PS1 ...

  2. cxgrid footer summary value by a column

    var AIndex: integer; AValue: variant; begin with cxGrid1DBTableView1.DataController.Summary do begin ...

  3. PHP的$_SERVER['HTTP_HOST']获取服务器地址功能详解,$_SERVER['HTTP_X_FORWARDED_HOST']

    uchome的index文件中的二级域名功能判断,使用了php的$_SERVER['HTTP_HOST'],开始对这个不是很了解,所以百度了一下,发现一篇帖子有点意思,转发过来做个记录. 在php中, ...

  4. C/C++错误分析errno,perror,strerror和GetLastError()函数返回的错误代码的意义

    在C语言编译中,经常会出现一些系统的错误,这些错误如果在编译的时候不能很好的“预见”,会使系统“崩溃”,常见的捕获错误函数有: errno #include<errno.h> 这个变量是程 ...

  5. N皇后摆放问题

    Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上.  你的任务是,对于给定的N,求出有多少种 ...

  6. C#向C++编写的DLL传递字符串参数的办法

    使用StringBuilder,举例: C++代码中函数定义如下: PVPOWERFORCASTDLL_API int PVPowerForcast(SForcastInfo &_Forcas ...

  7. python 新时代

    今天看到有关python的文章,感觉很好奇,学了python很久了,但是还没有真正的用过,只是写一些小程序 看了这篇文章以后真的感觉自己所了解都是皮毛,在此与大家分享: 原文链接:http://www ...

  8. 读书笔记汇总 --- 用Python写网络爬虫

    本系列记录并分享:学习利用Python写网络爬虫的过程. 书目信息 Link 书名: 用Python写网络爬虫 作者: [澳]理查德 劳森(Richard Lawson) 原版名称: web scra ...

  9. js学习之函数声明与函数表达式区别[原创]

    作为一名js初学者,与大家分享下.Javascript中有函数声明提升的功能,会优先编译函数声明部分.比如, ff(); function ff(){ alert("hello world. ...

  10. dubbo zookeeper模型

    本文摘自dubbo的官方文档,原文请参见: http://alibaba.github.io/dubbo-doc-static/User+Guide-zh.htm#UserGuide-zh-Zooke ...