开发了一个chrome外卖插件(1)

今天真是无聊啊,弄点神奇的东西玩玩儿,想了想,还没做过chrome插件呢,Google了一下,chrome插件基本就是使用html,css,js来实现一些浏览器的扩展功能,前端完全能胜任呐!
团队平时(特别是周五)经常会一起点奶茶水果之类,那就把这些做个整理,顺便了解一下如何做插件,一举两得!

这里是配图
这是插件root文件夹
需要包含manifest.json、icon.png(大小一般为19px * 19px)、index.html(设置的弹出页面)
manifest.json
manifest在英语里是清单的意思,顾名思义,这个文件是整个插件的描述文件,开发插件就得说明这个插件叫什么,可以用来干什么,以及自己设计的功能etc…
brower_action是当鼠标悬浮或点击图标是的下拉列表,page_action是点击图标之后的弹出的页面,官方文档表示两者只能选其中一个或者都不选。

1
2
3
4
5
6
7
8
9
10
11
{
"manifest_version": 2,
"name":"takewayfood",
"version":"0.1",
"description":"takeway food for my friends",
"page_action":{
"default_icon":"eat.png",
"default_popup":"index.html",
"default_title":"Yummy!",
}
}

1
2
3
4
5
6
7
8
9
10
{
"manifest_version": 2,
"name":"takewayfood",
"version":"0.1",
"description":"takeway food for my friends",
"browser_action":{
"default_icon":"eat.png",
"default_title":"Yummy!"
}
}

安装
点击chrome浏览器右上角的“三”图标,进入设置,点击“扩展程序”,勾选“开发者模式”,点击“打包扩展程序”,选择插件所在目录,第一次上传时不需要选择“私有密钥文件”。
然后打开目录,发现多了两个文件,后缀名分别为crx和pem,pem即上面说到的“私有密钥文件”,当插件做了修改需要再次上传时,就需要选择这个pem文件作为“私有密钥文件”了。将crx文件拖入chrome浏览器中,即可完成插件安装。

顺便当个开发者吧
昨晚写的代码,居然今天就被chrome禁用了,所以决定申请一个chrome开发者账号。成为开发者需要一次性支付5美元,而在地区选择中是没有中国这个选项的(很墙大),所以我选择了香港这个选项,支付也需要符合地区的账户,查找之后发现可以在全球付(附录中有链接)开一个账户,但是需要支付100RMB,支付后剩余的钱可以提取到银行卡账户,还是很方便的。

附录
chrome插件官方文档
全球付