实现效果

个人更喜欢用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的div下面

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

百度搜索页

右侧的热搜是放在class为toplist1-tr*的下面，网页其实是把30条热搜全部加载完成之后，点击切换通过控制css display: none; 来显示和隐藏。所以可以通过正则 /<div class="toplist1-tr([\s\S])*?<\/div>/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).append(hotHtml);
    } else {
      $("#rcnt")
        .append(`<div id="rightBar" style="margin-left:20px;">${str}</div>`)
        .find("#rightBar")
        .append(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 = /<div class="toplist1-tr([\s\S])*?<\/div>/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 $(
      `<div><div id="toggle" style="cursor: pointer; margin-bottom: 10px;">切换</div></div>`
    )
      .append(() => {
        return $(
          `<div id="page1" style="display: ${toggleShow ? "none" : ""}"><div/>`
        ).append(hotPage2.join(""));
      })
      .append(() => {
        return $(
          `<div id="page2" style="display: ${toggleShow ? "" : "none"}"><div/>`
        ).append(hotPage1.join(""));
      })
      .find("#toggle")
      .on("click", function () {
        toggleShow = !toggleShow;
        console.log($(this).next());
        $(this)
          .next()
          .css("display", toggleShow ? "none" : "")
          .next()
          .css("display", toggleShow ? "" : "none");
      })
      .end();
  }
  function hookListener() {
    let oldadd = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function (...args) {
      console.log("addEventListener", this);
      oldadd.call(this, ...args);
    };
  }
  // hookListener();
  // $(()=>{
  // })
  delGoogleAd();
  addBdResult();
})();