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

在本系列的前两篇文章中，咱们对用户脚本以及开发脚本前应该掌握的基础知识进行了介绍。从这篇文章开始，将以已发布可用的脚本为基础，进行脚本真实开发过程的讲解。今天学习的脚本是 百度首页和搜索页面添加 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 搜索框 的开发过程进行了介绍，若是还有疑问，能够留言，下一篇文章将对 脚本 一个返回顶部和到达底部的按钮 的开发过程进行介绍。