在本系列的前两篇文章中,咱们对用户脚本以及开发脚本前应该掌握的基础知识进行了介绍。从这篇文章开始,将以已发布可用的脚本为基础,进行脚本真实开发过程的讲解。今天学习的脚本是 百度首页和搜索页面添加 Google 搜索框。在正式开始以前,先说一下我认为开发脚本应该遵循的两个准则:app
咱们平时在用百度搜索的时候,有些问题的搜索结果是不尽人意的,这时候咱们须要再去 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,跟在百度搜索按钮的后面,按钮使用的字体大小,字体颜色,背景色,都跟百度搜索按钮一致。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()
方法打开连接。而后咱们看看效果,发如今搜索页面按钮已经能够正常使用了,可是在百度首页,按钮位置出现了误差,因此咱们还须要对首页的样式作一些改变。spa
document.getElementById("form").style.width = "705px"; document.getElementsByClassName("s_btn_wr")[0].style.width = "80px";
至此,咱们就完成了这个脚本的开发,咱们选择 文件
下面的 保存到磁盘
,将脚本保存成一个以 .user.js
结尾的文件。code
而后咱们打开 GreasyFork,发布咱们的脚本。咱们点击选择文件,从磁盘上选择咱们刚才保存的 js 文件。而后填写脚本介绍,并上传截图,最后发布脚本。orm
本文对脚本 百度首页和搜索页面添加 Google 搜索框 的开发过程进行了介绍,若是还有疑问,能够留言,下一篇文章将对 脚本 一个返回顶部和到达底部的按钮 的开发过程进行介绍。对象