2019獨角獸企業重金招聘Python工程師標準>>>

在本系列的前兩篇文章中，我們對用戶腳本以及開發腳本前應該掌握的基礎知識進行了介紹。從這篇文章開始，將以已發布可用的腳本為基礎，進行腳本真實開發過程的講解。今天學習的腳本是 百度首頁和搜索頁面添加 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 pxbaiduBtn.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 搜索框 的開發過程進行了介紹，如果還有疑問，可以留言，下一篇文章將對 腳本 一個返回頂部和到達底部的按鈕 的開發過程進行介紹。

轉載于:https://my.oschina.net/u/4041154/blog/2967295

總結

以上是生活随笔為你收集整理的如何开发一个用户脚本系列(3)——脚本一:百度首页和搜索页面添加 Google 搜索框...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。