版权声明:本文为Boyd Wang原创文章,转载时请注明作者及本文链接
本文链接:http://www.boydwang.com/2013/12/the-first-chrome-extension-hello-chrome/

今天在浏览亚马逊网页的时候发现我很多时候都是想直接看评论,但是看评论要跳过长长的图片介绍,非常不方便,于是就想到做一个Chrome的扩展程序,可以直接一键跳到评论,这样不用再滚鼠标了。下面我们来学习如何制作第一个Chrome插件,Hello Chrome!
首先新建一个文件夹取名为HelloChrome,在里面新建一个文本文件,命名为:

这是chrome插件的的总入口,存放描述信息,使用JSON的格式进行定义,我们用记事本打开这个文件,输入如下内容:

到此,mainifest.json完成,我们来安装一下,打开chrome,在设置-扩展程序里勾选 开发者选项,之后会出现菜单,
extension-setup
单击”加载正在开发的扩展程序…”,选择刚才新建的文件夹,注意是文件夹,点确定,然后你就能在地址栏右边看到你刚才添加的插件了,图标是icon.jpg的样子
extension-installed
这时候点击它没有任何反应,因为没有任何功能。
下面我们加一个最简单的弹出popup功能,让它显示一个HelloChrome。
在文件夹里新建一个文本文件,命名为popup.html,编辑如下文字:

保存,并编辑manifest.json,在”browser_action”后加入:

完整的代码如下:

在chrome扩展程序里点击”重新加载”,这时再点击图标,就会发现弹出了一个小窗口,里面显示了popup.html的内容,
Hello,Chrome!
popup
好了,今天就到这里吧



打赏

Boyd Wang

想给自己贴上各种NB的头衔,NB程序员,NB自由职业者,最后发现自己其实是个Newbie,没办法,慢慢来吧

1 Comment

第二个Chrome扩展程序-生成二维码 - Boyd Wang · 10/13/2016 at 13:17

[…] 从上次实现了第一个Chrome扩展程序之后,我们对chrome扩展程序对组织结构有了一定的了解,对这次我们来学习如何自己写一个生成二维码的Chrome扩展程序,主要功能是把网址或者用户输入的内容转化成二维码。 […]

Leave a Reply

Your email address will not be published. Required fields are marked *

无觅相关文章插件,快速提升流量