2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

在本系列的前兩篇文章中，我們對用戶腳本以及開發(fā)腳本前應(yīng)該掌握的基礎(chǔ)知識進行了介紹。從這篇文章開始，將以已發(fā)布可用的腳本為基礎(chǔ)，進行腳本真實開發(fā)過程的講解。今天學(xué)習(xí)的腳本是 百度首頁和搜索頁面添加 Google 搜索框。在正式開始之前，先說一下我認(rèn)為開發(fā)腳本應(yīng)該遵循的兩個準(zhǔn)則:

• 功能實現(xiàn)。當(dāng)你決定要開發(fā)一個腳本的時候，你肯定清楚你的腳本要實現(xiàn)什么功能，只有你的腳本實現(xiàn)了你所描述的功能，才會有更多的人安裝使用，才會有更多的人給你好評；
• 樣式實現(xiàn)。什么叫樣式實現(xiàn)？就是你在目標(biāo)網(wǎng)站中添加的元素，要盡量與原網(wǎng)站的配色，樣式相一致。這一項是非必須的，但我認(rèn)為是非常重要的。你想想，如果原網(wǎng)站整體是藍(lán)色，而你添加的按鈕是紅色，那該有多突兀，有多丑，雖然你的按鈕確實突出了，但別人一看就是山寨，看著會很不舒服。而如果你的按鈕也用它網(wǎng)站的顏色，這樣就會跟原網(wǎng)站已有的元素契合，整體特別自然，做到以假亂真的效果。你的腳本讓別人用的舒服，別人才更愿意給你好評。

需求分析

我們平時在用百度搜索的時候，有些問題的搜索結(jié)果是不盡人意的，這時候我們需要再去 Google 搜索同樣的問題，看一下 Google 有沒有我們想要的結(jié)果。那么我們就需要在新的 tab 頁打開 Google 搜索，輸入同樣的問題，然后搜索。這個過程略顯繁瑣，如果我們可以直接在百度搜索頁面添加一個按鈕，當(dāng)我們覺得百度搜索結(jié)果不滿意時，我們點擊一下這個按鈕，就可以自動打開 Google 搜索，將我們的搜索內(nèi)容帶過來，直接搜索展示結(jié)果，豈不是很方便？

功能實現(xiàn)

根據(jù)上面的需求分析，我們知道我們的腳本要運行的網(wǎng)站是百度的首頁和搜索頁面，然后觀察可知，百度首頁的 URL 形式為: https://www.baidu.com/，搜索頁面的URL 形式為: https://www.baidu.com/s?wd=xxx，其中 wd 表示我們的搜索內(nèi)容，每次搜索問號前面的部分都是不變的，所以我們 @match 可以這樣寫:

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

關(guān)于協(xié)議頭，需要說明的是，如果你寫 http，那么只能匹配 http 開頭的網(wǎng)站，如果你寫 https，那么只能匹配 https 開頭的網(wǎng)站，有些網(wǎng)站不管你用 http 還是 https，都可以訪問，那么你可以寫 http*，但這樣 Violentmonkey 和 Greasemonkey 匹配不了，腳本用不了，所以最簡單的方法就是直接寫 *，這樣簡單方便。 我們對比一下使用腳本前和使用腳本后的效果:

可以看到，我們希望將添加的按鈕叫 Google，跟在百度搜索按鈕的后面，按鈕使用的字體大小，字體顏色，背景色，都跟百度搜索按鈕一致。

var baiduBtn = document.getElementById("su"); // 獲取百度搜索按鈕baiduBtn.style.width = "80px"; //將百度搜索按鈕的寬度設(shè)為 80 pxbaiduBtn.value = "百度"; //將百度搜索按鈕的文字設(shè)為百度var googleBtn = document.createElement('span'); // 創(chuàng)建 Google 搜索按鈕googleBtn.className = baiduBtn.parentNode.className; // 將 Google 搜索按鈕和百度搜索按鈕的 class 名稱設(shè)置為相同，目的是使用百度搜索按鈕已有的部分樣式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 按鈕作為一個子元素添加到百度搜索按鈕的父元素里面

上面的代碼已經(jīng)實現(xiàn)了向頁面中添加一個 Google 搜索按鈕，樣式和百度搜索按鈕一致，下面要實現(xiàn)點擊該按鈕打開 Google 進行搜索的功能。

googleBtn.addEventListener('click', function () {var input = document.getElementById("kw"); // 獲取百度輸入框var keyword = input.value.replace(/(^\s*)|(\s*$)/g, ""); // 獲取搜索內(nèi)容（去空格）if (keyword != "") { // 如果搜索內(nèi)容不為空，就調(diào)用 googleSearch() 方法進行搜索，需要傳入的參數(shù)是搜索內(nèi)容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 表示搜索內(nèi)容，所以我們只需要將我們獲取到的百度搜索輸入框中的內(nèi)容拼接到鏈接后面就可以了。為了避免搜索有些特殊字符時出現(xiàn)問題，需要使用 encodeURIComponent() 方法對搜索內(nèi)容進行編碼。然后使用 window 對象的 open() 方法打開最終的鏈接就可以了。當(dāng)然你也可以使用腳本管理器提供的 GM_openInTab() 方法打開鏈接。然后我們看看效果，發(fā)現(xiàn)在搜索頁面按鈕已經(jīng)可以正常使用了，但是在百度首頁，按鈕位置出現(xiàn)了偏差，所以我們還需要對首頁的樣式做一些改變。

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

至此，我們就完成了這個腳本的開發(fā)，我們選擇 文件 下面的 保存到磁盤，將腳本保存成一個以 .user.js 結(jié)尾的文件。

然后我們打開 GreasyFork，發(fā)布我們的腳本。我們點擊選擇文件，從磁盤上選擇我們剛才保存的 js 文件。然后填寫腳本介紹，并上傳截圖，最后發(fā)布腳本。

總結(jié)

本文對腳本 百度首頁和搜索頁面添加 Google 搜索框 的開發(fā)過程進行了介紹，如果還有疑問，可以留言，下一篇文章將對 腳本 一個返回頂部和到達(dá)底部的按鈕 的開發(fā)過程進行介紹。

轉(zhuǎn)載于:https://my.oschina.net/u/4041154/blog/2967295

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。