如何开发一个用户脚本系列(3)——脚本一:百度首页和搜索页面添加 Google 搜索框

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_43909455/article/details/84710701

本文原创首发于我的个人博客 一个贾程序员，文章原地址 点此 查看

在本系列的前两篇文章中，我们对用户脚本以及开发脚本前应该掌握的基础知识进行了介绍。从这篇文章开始，将以已发布可用的脚本为基础，进行脚本真实开发过程的讲解。在正式开始之前，先说一下我认为开发脚本应该遵循的两个准则:

• 功能实现。当你决定要开发一个脚本的时候，你肯定清楚你的脚本要实现什么功能，只有你的脚本实现了你所描述的功能，才会有更多的人安装使用，才会有更多的人给你好评；
• 样式实现。什么叫样式实现？就是你在目标网站中添加的元素，要尽量与原网站的配色，样式相一致。这一项是非必须的，但我认为是非常重要的。你想想，如果原网站整体是蓝色，而你添加的按钮是红色，那该有多突兀，有多丑，虽然你的按钮确实突出了，但别人一看就是山寨，看着会很不舒服。而如果你的按钮也用它网站的颜色，这样就会跟原网站已有的元素契合，整体特别自然，做到以假乱真的效果。你的脚本让别人用的舒服，别人才更愿意给你好评。

需求分析

今天讲解的脚本是 百度首页和搜索页面添加 Google 搜索框。我们平时在用百度搜索的时候，有些问题的搜索结果是不尽人意的，这时候我们需要再去 Google 搜索同样的问题，看一下 Google 有没有我们想要的结果。那么我们就需要在新的 tab 页打开 Google 搜索，输入同样的问题，然后搜索。这个过程略显繁琐，如果我们可以直接在百度搜索页面添加一个按钮，当我们觉得百度搜索结果不满意时，我们点击一下这个按钮，就可以自动打开 Google 搜索，将我们的搜索内容带过来，直接搜索展示结果，岂不是很方便？

功能实现

根据上面的需求分析，我们知道我们的脚本要运行的网站是百度的首页和搜索页面，然后观察可知，百度首页的 URL 形式为:

https://www.baidu.com/

，搜索页面的URL 形式为:

https://www.baidu.com/s?wd=xxx

，其中 wd 表示我们的搜索内容，每次搜索问号前面的部分都是不变的，所以我们

@match

可以这样写:

// @match        *://www.baidu.com/
// @match        *://www.baidu.com/s?*

关于协议头，需要说明的是，如果你写

http

，那么只能匹配

http

开头的网站，如果你写

https

，那么只能匹配

https

开头的网站，有些网站不管你用

http

还是

https

，都可以访问，那么你可以写

http*

，但这样 Violentmonkey 和 Greasemonkey 匹配不了，脚本用不了，所以最简单的方法就是直接写

*

，这样简单方便。
我们对比一下使用脚本前和使用脚本后的效果:




可以看到，我们希望将添加的按钮叫 Google，跟在百度搜索按钮的后面，按钮使用的字体大小，字体颜色，背景色，都跟百度搜索按钮一致。

var baiduBtn = document.getElementById("su"); // 获取百度搜索按钮
baiduBtn.style.width = "80px"; //将百度搜索按钮的宽度设为 80 px
baiduBtn.value = "百度"; //将百度搜索按钮的文字设为百度
var googleBtn = document.createElement('span'); // 创建 Google 搜索按钮
googleBtn.className = baiduBtn.parentNode.className; // 将 Google 搜索按钮和百度搜索按钮的 class 名称设置为相同，目的是使用百度搜索按钮已有的部分样式
googleBtn.style = "width:80px;margin:0px 0px 0px 2px";
googleBtn.innerHTML = "<input type='button' id='google' value='Google' class='btn bg s_btn' style='width:80px;'>";
var form = document.getElementsByClassName("fm")[0]; // 获取百度搜索按钮的父元素
form.appendChild(googleBtn); // 将 Google 按钮作为一个子元素添加到百度搜索按钮的父元素里面

上面的代码已经实现了向页面中添加一个 Google 搜索按钮，样式和百度搜索按钮一致，下面要实现点击该按钮打开 Google 进行搜索的功能。

googleBtn.addEventListener('click', function () {
var input = document.getElementById("kw"); // 获取百度输入框
var keyword = input.value.replace(/(^\s*)|(\s*$)/g, ""); // 获取搜索内容（去空格）
if (keyword != "") { // 如果搜索内容不为空，就调用 googleSearch() 方法进行搜索，需要传入的参数是搜索内容
googleSearch(keyword);
}
});
function googleSearch(keyword){ // Google 搜索方法
var link = "https://www.google.com/search?q=" + encodeURIComponent(keyword); // 拼接好 Google 搜索的链接
window.open(link); //新窗口打开链接
}

在 Google 搜索方法中，需要先拿到 Google 搜索时的 URL，通过观察得知，Google 搜索时的 URL 形式为:

https://www.google.com/search?q= xxx

，其中 q 表示搜索内容，所以我们只需要将我们获取到的百度搜索输入框中的内容拼接到链接后面就可以了。为了避免搜索有些特殊字符时出现问题，需要使用

encodeURIComponent()

方法对搜索内容进行编码。然后使用

window

对象的

open()

方法打开最终的链接就可以了。当然你也可以使用脚本管理器提供的

GM_openInTab()

方法打开链接。然后我们看看效果，发现在搜索页面按钮已经可以正常使用了，但是在百度首页，按钮位置出现了偏差，所以我们还需要对首页的样式做一些改变。

document.getElementById("form").style.width = "705px";
document.getElementsByClassName("s_btn_wr")[0].style.width = "80px";

至此，我们就完成了这个脚本的开发，我们选择

文件

下面的

保存到磁盘

，将脚本保存成一个以

.user.js

结尾的文件。

然后我们打开 GreasyFork，发布我们的脚本。我们点击选择文件，从磁盘上选择我们刚才保存的 js 文件。然后填写脚本介绍，并上传截图，最后发布脚本。

总结

本文对脚本 百度首页和搜索页面添加 Google 搜索框 的开发过程进行了介绍，如果还有疑问，可以留言，下一篇文章将对 脚本 一个返回顶部和到达底部的按钮 的开发过程进行介绍。