第一步:初始化项目
每个应用(扩展)都应该包含下面的文件:
- 一个manifest文件
- 一个或多个html文件(除非这个应用是一个皮肤)
- 可选的一个或多个javascript文件
- 可选的任何需要的其他文件,例如图片
在开发应用(扩展)时,需要把这些文件都放到同一个目录下。发布应用(扩展)时,这个目录全部打包到一个应用(扩展)名是.crx的压缩文件中。本项目使用Chrome Developer Dashboard,上传应用(扩展),可以自动生成.crx文件。
第二部:编写配置文件
manifest.json 清单文件必须的字段只有:name和version。
{
"name":"searchTool",
"manifest_verson":2,
"version":"0.0.1",
"description":"便于搜索的chrome插件",
"browser_action":{
"default_icon":"icon.png",
"default_title":"搜索集合工具",
"default_popup":popup.html""
}
}
参数说明:
- name 插件名称
- version 插件的版本号
- manifest_version 指定清单文件格式的版本, 2就OK了
- description 插件描述
- icons 插件图标,PNG格式, 需准备三个图标文件: 16x16(扩展信息栏) 48x48(扩展管理页面) 128x128(用在安装过程中)
- default_locale 国际化支持,支持何种语言的浏览器,虽然官方推荐,不过我没用
第三步:编写popup跳转页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<base target="_blank" />
<style>
.main{
width: 100px;
height: 200px;
font-size: 18px;
text-align: center;
}
a{
text-decoration: none;
}
.title{
width: 100%;
font-size: 20px;
background-color: #E8E8E8;
}
img{
width: 18px;
height: 18px;
}
.links{
margin-top: 5px;
}
.links a{
width: 100%;
display: block;
margin: 4px 0;
color: black;
line-height: 25px;
}
.links a:hover{
background-color: red;
color: white;
}
.links img{
line-height: 25px;
}
.footer a{
font-size: 12px;
color: grey;
}
</style>
<div class="main">
<div class="title">搜索导航</div>
<div class="links">
<a href="https://www.baidu.com/"><img src="images/baidu.ico" alt="">百度</a>
<a href="https://www.google.com.hk/"><img src="images/google.ico" alt="">谷歌</a>
<a href="https://cn.bing.com/"><img src="images/bing.ico" alt="">必应</a>
<a href="https://www.sogou.com/"><img src="images/sogou.ico" alt="">搜狗</a>
<a href="https://www.so.com/"><img src="images/so.ico" alt="">360</a>
</div>
<div class="footer">
<a href="https://www.pengshiyu.com/message.html">问题反馈</a>
</div>
</div>
参考:http://open.chrome.360.cn/extension_dev/manifest.html
图片大小修改网站:http://www.gaitubao.com/