实现效果

　　个人更喜欢用google进行搜索，然后抽空的时候可以看看百度热搜，来回切换总有点不方便，所以编写一个的油猴脚本，实现谷歌搜索去广告，然后右侧展示百度搜索结果和热搜，先看下使用前效果

　　脚本运行后的效果

　　api介绍

　　先放一个官方文档地址，下面介绍下这次用到的脚本Api

　　@match 脚本运行在哪个网页例子：@match https://www.google.com.hk/*

　　@grant 申请GM_*函数和unsafeWindow权限例子：@grant GM_xmlhttpRequest 可以实现跨域请求，在访问谷歌页面的时候请求百度页面，然后将热搜缝合在右侧

　　@require 可以引用外部的js脚本例子：@require https://libs.baidu.com/jquery/2.1.4/jquery.min.js 引入jquery脚本

　　分析

　　谷歌搜索页

　　访问网页，按f12打开控制台，发现广告在id为taw的p下面

　　右侧的内容在id为rhs的p下面，有时候不存在右侧内容，可以将热搜结果放在#rcnt下

　　百度搜索页

　　右侧的热搜是放在class为toplist1-tr*的下面，网页其实是把30条热搜全部加载完成之后，点击切换通过控制css display: none; 来显示和隐藏。所以可以通过正则 /<p class="toplist1-tr([\s\S])*?</p>/g 将他们全部取出来

　　顺便也可以把搜索的结果展示在右侧，通过 /<h3 class="c-title t t tts-title">/g 来获取所有结果。匹配之后发现一个issue，百度自家的搜索结果没匹配上，正好这些结果没啥用。

　　核心代码

　　在页面加载完成后执行脚本，获取百度结果，然后拼接，开始以为点击搜索是异步请求，结果是前后端不分离的，整个页面刷新，所以每次搜素后都会执行这个脚本，就不用hook一些点击事件、请求、dom发生变化之类的东西，执行就ok。

　　去除谷歌广告

　　function delGoogleAd() { $("#taw").remove(); $("#bottomads").remove();}获取百度搜索结果

　　GM_xmlhttpRequest({ method: "get", url: "https://www.baidu.com/s?wd=" + searchKey, onload: function (r) { console.log(r); }})完整代码

　　// ==UserScript==// @name test// @namespace http://tampermonkey.net/// @version 0.1// @description try to take over the world!// @author You// @match https://www.google.com.hk/*// @grant GM_xmlhttpRequest// @require https://libs.baidu.com/jquery/2.1.4/jquery.min.js// ==/UserScript==(function () { "use strict"; function delGoogleAd() { $("#taw").remove(); $("#bottomads").remove(); } async function addBdResult() { console.log($(`#tsf input`).value, $(`#tsf input.gLFyf.gsfi`).val()); const [str, hotRes] = await getBdResult($(`#tsf input.gLFyf.gsfi`).val()); // 处理百度热搜 const hotHtml = handleHot(hotRes); const rhs = $("#rhs"); if (rhs.length) { rhs.html(str).app(hotHtml); } else { $("#rcnt") .app(`<p id="rightBar" style="margin-left:20px;">${str}</p>`) .find("#rightBar") .app(hotHtml); } } async function getBdResult(searchKey) { return new Promise((reslove, reject) => { GM_xmlhttpRequest({ method: "get", url: "https://www.baidu.com/s?wd=" + searchKey, onload: function (r) { if (r.status === 200 && r.readyState === 4) { //解析搜索结果 let resReg = /<h3 class="c-title t t tts-title">([\s\S])*?</h3>/g; let result = "", temp; while ((temp = resReg.exec(r.responseText)) != null) { result += temp[0]; } // console.log("result===>", result); let str = result .replace( /<h3 class="c-title t t tts-title">/g, `<h4 style="margin: 6px 0;">` ) .replace(/</h3>/g, "</h4>"); // 解析百度热搜 let hotReg = /<p class="toplist1-tr([\s\S])*?</p>/g; let hotRes = [], tempRes; while ((tempRes = hotReg.exec(r.responseText)) != null) { // console.log(tempRes); hotRes.push( tempRes[0].replace(`href="`, `href="https://www.baidu.com`) ); } reslove([str, hotRes]); } else { reject(r.responseText); } }, }); }); } function handleHot(hotRes = []) { const hotPage1 = hotRes.splice(0, 15); const hotPage2 = hotRes; let toggleShow = true; return $( `<p><p id="toggle" style="cursor: pointer; margin-bottom: 10px;">切换</p></p>` ) .app(() => { return $( `<p id="page1" style="display: ${toggleShow ? "none" : ""}"><p/>` ).app(hotPage2.join("")); }) .app(() => { return $( `<p id="page2" style="display: ${toggleShow ? "" : "none"}"><p/>` ).app(hotPage1.join("")); }) .find("#toggle") .on("click", function () { toggleShow = !toggleShow; console.log($(this).next()); $(this) .next() .css("display", toggleShow ? "none" : "") .next() .css("display", toggleShow ? "" : "none"); }) .(); } function hookListener() { let oldadd = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener = function (...args) { console.log("addEventListener", this); oldadd.call(this, ...args); }; } // hookListener(); // $(()=>{ // }) delGoogleAd(); addBdResult();})();