使用方法 :下载crx扩展名文件,拖入chrome应用管理界面即可 github地址:https://github.com/mouday/chrome-search-tool 编写一个简单的chrome插件(教程) 项目文件说明: manifest.json 参数说明: popup.html 其实就是html + css + javascript 备注:如果出现中文乱码,记得在文件顶部加入<meta charset="utf8">,此方法和html编码是一样的,没有什么特别之处 icon.png 可以百度图片上找一张方块图片,最好找png格式的 对于简单的尺寸大小的裁剪,可以到这个网址处理:http://www.gaitubao.com/ 打开Chrome –> 更多工具 –> 扩展程序 -> 打开“开发者模式” 有两个方法: 学会编写简单插件之后,剩下的就是自己动手扩展,实现自己的小功能了 --------------------- 本文来自 彭世瑜 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/mouday/article/details/82885948?utm_source=copy 搜索引擎快捷导航
html
css
javascript
1
2
3
第一步:初始化项目
chrome-search-tool/
├── manifest.json # 配置文件
├── popup.html # 弹出窗口
├── icon.png # 扩展图标
└── images # 静态资源文件(如images、css、js等)
1
2
3
4
5
第二步:编写配置文件
{
"name": "searchTool",
"manifest_version":2,
"version": "0.0.1",
"description": "便于搜索的chrome插件",
"browser_action": {
"default_icon": "icon.png" ,
"default_title": "搜索集合工具",
"default_popup": "popup.html"
}
}
1
2
3
4
5
6
7
8
9
10
11
第三步:编写popup页面
<meta charset="utf8">
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
第四步:配置图标
第五步:打包安装扩展程序