admin管理员组文章数量:1578023
搜索引擎快捷导航
使用方法 :下载crx扩展名文件,拖入chrome应用管理界面即可
github地址:https://github/mouday/chrome-search-tool
编写一个简单的chrome插件(教程)
-
实现效果:
-
简单理解:chrome扩展程序就是一个web应用,小型网站,只不过是在chrome上多了个快捷方式
-
必备知识(初级即可):
html
css
javascript
- 必备工具: chrome浏览器(本次使用的版本是 69)
第一步:初始化项目
项目文件说明:
chrome-search-tool/
├── manifest.json # 配置文件
├── popup.html # 弹出窗口
├── icon.png # 扩展图标
└── images # 静态资源文件(如images、css、js等)
第二步:编写配置文件
manifest.json
{
"name": "searchTool",
"manifest_version":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页面
popup.html
<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/"><img src="images/baidu.ico" alt="">百度</a>
<a href="https://www.google.hk/"><img src="images/google.ico" alt="">谷歌</a>
<a href="https://cn.bing/"><img src="images/bing.ico" alt="">必应</a>
<a href="https://www.sogou/"><img src="images/sogou.ico" alt="">搜狗</a>
<a href="https://www.so/"><img src="images/so.ico" alt="">360</a>
</div>
<div class="footer">
<a href="https://www.pengshiyu/message.html">问题反馈</a>
</div>
</div>
其实就是html + css + javascript
备注:如果出现中文乱码,记得在文件顶部加入<meta charset="utf8">
,此方法和html编码是一样的,没有什么特别之处
第四步:配置图标
icon.png
可以百度图片上找一张方块图片,最好找png格式的
对于简单的尺寸大小的裁剪,可以到这个网址处理:http://www.gaitubao/
第五步:打包安装扩展程序
打开Chrome –> 更多工具 –> 扩展程序 -> 打开“开发者模式”
有两个方法:
- 加载已解压的扩展程序 -> 将文件夹
chrome-search-tool
拖入就行(多用于调试,修改文件后刷新即可) - 打包扩展程序 -> 选择打包扩展程序文件夹的路径 -> 生成crx扩展名的文件 -> 拖入chrome
学会编写简单插件之后,剩下的就是自己动手扩展,实现自己的小功能了
参考文章:
编写一个简单的chrome插件
版权声明:本文标题:搜索引擎快捷导航:一个简单的chrome插件(教程) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727831567a1132658.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论