如何開發一個用戶腳本系列(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 搜索框 的開發過程進行了介紹，若是還有疑問，能夠留言，下一篇文章將對 腳本 一個返回頂部和到達底部的按鈕 的開發過程進行介紹。