搜索引擎快捷导航一个简单的chrome插件

使用方法 ：下载crx扩展名文件，拖入chrome应用管理界面即可

github地址：https://github.com/mouday/chrome-search-tool

简单理解：chrome扩展程序就是一个web应用，小型网站，只不过是在chrome上多了个快捷方式

必备知识(初级即可)：

html

css

javascript

第一步：初始化项目

项目文件说明：

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" } }

参数说明:

第三步：编写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>

其实就是html + css + javascript

备注：如果出现中文乱码，记得在文件顶部加入<meta charset="utf8">，此方法和html编码是一样的，没有什么特别之处

第四步：配置图标

可以百度图片上找一张方块图片，最好找png格式的

对于简单的尺寸大小的裁剪，可以到这个网址处理：http://www.gaitubao.com/

第五步：打包安装扩展程序

打开Chrome –> 更多工具 –> 扩展程序 -> 打开“开发者模式”

有两个方法：