csdn很少上线，经常在掘金摸鱼，本文掘金链接https://juejin.cn/post/7058602557987356708

言归正传：

为什么要做这个小案例呢？

首先我有极度严重的强迫症，对于设备交互界面的追求是越整洁越好，另外由于我的专业原因，需要经常不断地跨平台搜索各种资料，所以我作做了一个结合百度、bing、Yandex、掘金、CSDN等于一体的搜索栏。

看看百度的搜索页

百度算是好的，有的搜索引擎一打开全是广告和弹窗，比如QQ浏览器。。。。

为了还自己一个干净的界面，同时提高搜索效率，于是我自己做了一个（下图）

我知道有很多大佬做过类似的浏览器插件，但是我做的这个是一个纯网页的，不需要大家安装，也没太多花里胡哨的内容（更轻便）

实现原理

主要技术路线：网页页面跳转 思路：

1、怎么将输入的内容提交到指定的平台

百度为例：当我们搜索“你好”时

地址栏地址：https://www.baidu.com/s?wd=你好

https是通信协议

www.baidu.com是网址（域名）

那么后的s?wd=你好 是什么意思呢？我们不妨将浏览器的地址改为https://www.baidu.com/s?wd=世界

原来 后面的字符对应的是我们需要搜索的内容，那我不就可以利用js将搜索栏的内容获取到后，做一个拼接，然后使用js跳转到拼接好的链接页面，就可以现实自制带有搜索功能的搜索栏了吗？

2、找规律

有了上述的理论基础，尝试各个平台搜索方式后发现其实现方式与百度类似，但是其具体的实现方式是有区别的具体如下

其他平台（如图）

3、写代码

我认为这个案例的html和js代码都很重要，所以重点分享这两个文件