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

脚本运行后的效果

api介绍

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

@match 脚本运行在哪个网页

1	@match 脚本运行在哪个网页

例子：@match
https://www.google.com.hk/*

@grant 申请GM_*函数和unsafeWindow权限

1	@grant 申请GM_*函数和unsafeWindow权限

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

@require 可以引用外部的js脚本

1	@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。

去除谷歌广告

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">delGoogleAd</span>() </span>{
    $(<span class="hljs-string">"#taw"</span>).remove();
    $(<span class="hljs-string">"#bottomads"</span>).remove();
}

function delGoogleAd() {

$("#taw").remove();

$("#bottomads").remove();

}

获取百度搜索结果

<span class="hljs-selector-tag">GM_xmlhttpRequest</span>({
    <span class="hljs-attribute">method</span>: <span class="hljs-string">"get"</span>,
    url: <span class="hljs-string">"https://www.baidu.com/s?wd="</span> + searchKey,
    onload: function (r) {
        console.<span class="hljs-built_in">log</span>(r);
    }
})

GM_xmlhttpRequest({

method: "get",

url: "https://www.baidu.com/s?wd=" + searchKey,

onload: function (r) {

console.log(r);

}

})

完整代码

<span class="hljs-comment">// ==UserScript==</span>
<span class="hljs-comment">// @name         test</span>
<span class="hljs-comment">// @namespace    http://tampermonkey.net/</span>
<span class="hljs-comment">// @version      0.1</span>
<span class="hljs-comment">// @description  try to take over the world!</span>
<span class="hljs-comment">// @author       You</span>
<span class="hljs-comment">// @match        https://www.google.com.hk/*</span>
<span class="hljs-comment">// @grant        GM_xmlhttpRequest</span>
<span class="hljs-comment">// @require https://libs.baidu.com/jquery/2.1.4/jquery.min.js</span>
<span class="hljs-comment">// ==/UserScript==</span>

(<span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
  <span class="hljs-string">"use strict"</span>;
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">delGoogleAd</span>() </span>{
    $(<span class="hljs-string">"#taw"</span>).remove();
    $(<span class="hljs-string">"#bottomads"</span>).remove();
  }
  <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addBdResult</span>() </span>{
      <span class="hljs-built_in">console</span>.log($(<span class="hljs-string">`#tsf input`</span>).value, $(<span class="hljs-string">`#tsf input.gLFyf.gsfi`</span>).val());
    <span class="hljs-keyword">const</span> [str, hotRes] = <span class="hljs-keyword">await</span> getBdResult($(<span class="hljs-string">`#tsf input.gLFyf.gsfi`</span>).val());
    <span class="hljs-comment">// 处理百度热搜</span>
    <span class="hljs-keyword">const</span> hotHtml = handleHot(hotRes);
    <span class="hljs-keyword">const</span> rhs = $(<span class="hljs-string">"#rhs"</span>);
    <span class="hljs-keyword">if</span> (rhs.length) {
      rhs.html(str).append(hotHtml);
    } <span class="hljs-keyword">else</span> {
      $(<span class="hljs-string">"#rcnt"</span>)
        .append(<span class="hljs-string">`&lt;div id="rightBar" style="margin-left:20px;"&gt;<span class="hljs-subst">${str}</span>&lt;/div&gt;`</span>)
        .find(<span class="hljs-string">"#rightBar"</span>)
        .append(hotHtml);
    }
  }
  <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getBdResult</span>(<span class="hljs-params">searchKey</span>) </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">reslove, reject</span>) =&gt;</span> {
      GM_xmlhttpRequest({
        <span class="hljs-attr">method</span>: <span class="hljs-string">"get"</span>,
        <span class="hljs-attr">url</span>: <span class="hljs-string">"https://www.baidu.com/s?wd="</span> + searchKey,
        <span class="hljs-attr">onload</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">r</span>) </span>{
          <span class="hljs-keyword">if</span> (r.status === <span class="hljs-number">200</span> &amp;&amp; r.readyState === <span class="hljs-number">4</span>) {
            <span class="hljs-comment">//解析搜索结果</span>
            <span class="hljs-keyword">let</span> resReg = <span class="hljs-regexp">/&lt;h3 class="c-title t t tts-title"&gt;([\s\S])*?&lt;\/h3&gt;/g</span>;
            <span class="hljs-keyword">let</span> result = <span class="hljs-string">""</span>,
              temp;
            <span class="hljs-keyword">while</span> ((temp = resReg.exec(r.responseText)) != <span class="hljs-literal">null</span>) {
              result += temp[<span class="hljs-number">0</span>];
            }
            <span class="hljs-comment">// console.log("result===&gt;", result);</span>
            <span class="hljs-keyword">let</span> str = result
              .replace(
                <span class="hljs-regexp">/&lt;h3 class="c-title t t tts-title"&gt;/g</span>,
                <span class="hljs-string">`&lt;h4 style="margin: 6px 0;"&gt;`</span>
              )
              .replace(<span class="hljs-regexp">/&lt;\/h3&gt;/g</span>, <span class="hljs-string">"&lt;/h4&gt;"</span>);
            <span class="hljs-comment">// 解析百度热搜</span>
            <span class="hljs-keyword">let</span> hotReg = <span class="hljs-regexp">/&lt;div class="toplist1-tr([\s\S])*?&lt;\/div&gt;/g</span>;
            <span class="hljs-keyword">let</span> hotRes = [],
              tempRes;
            <span class="hljs-keyword">while</span> ((tempRes = hotReg.exec(r.responseText)) != <span class="hljs-literal">null</span>) {
              <span class="hljs-comment">// console.log(tempRes);</span>
              hotRes.push(
                tempRes[<span class="hljs-number">0</span>].replace(<span class="hljs-string">`href="`</span>, <span class="hljs-string">`href="https://www.baidu.com`</span>)
              );
            }
            reslove([str, hotRes]);
          } <span class="hljs-keyword">else</span> {
            reject(r.responseText);
          }
        },
      });
    });
  }
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleHot</span>(<span class="hljs-params">hotRes = []</span>) </span>{
    <span class="hljs-keyword">const</span> hotPage1 = hotRes.splice(<span class="hljs-number">0</span>, <span class="hljs-number">15</span>);
    <span class="hljs-keyword">const</span> hotPage2 = hotRes;
    <span class="hljs-keyword">let</span> toggleShow = <span class="hljs-literal">true</span>;
    <span class="hljs-keyword">return</span> $(
      <span class="hljs-string">`&lt;div&gt;&lt;div id="toggle" style="cursor: pointer; margin-bottom: 10px;"&gt;切换&lt;/div&gt;&lt;/div&gt;`</span>
    )
      .append(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">return</span> $(
          <span class="hljs-string">`&lt;div id="page1" style="display: <span class="hljs-subst">${toggleShow ? "none" : ""}</span>"&gt;&lt;div/&gt;`</span>
        ).append(hotPage2.join(<span class="hljs-string">""</span>));
      })
      .append(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">return</span> $(
          <span class="hljs-string">`&lt;div id="page2" style="display: <span class="hljs-subst">${toggleShow ? "" : "none"}</span>"&gt;&lt;div/&gt;`</span>
        ).append(hotPage1.join(<span class="hljs-string">""</span>));
      })
      .find(<span class="hljs-string">"#toggle"</span>)
      .on(<span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
        toggleShow = !toggleShow;
        <span class="hljs-built_in">console</span>.log($(<span class="hljs-keyword">this</span>).next());
        $(<span class="hljs-keyword">this</span>)
          .next()
          .css(<span class="hljs-string">"display"</span>, toggleShow ? <span class="hljs-string">"none"</span> : <span class="hljs-string">""</span>)
          .next()
          .css(<span class="hljs-string">"display"</span>, toggleShow ? <span class="hljs-string">""</span> : <span class="hljs-string">"none"</span>);
      })
      .end();
  }
  <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">hookListener</span>() </span>{
    <span class="hljs-keyword">let</span> oldadd = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...args</span>) </span>{
      <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"addEventListener"</span>, <span class="hljs-keyword">this</span>);
      oldadd.call(<span class="hljs-keyword">this</span>, ...args);
    };
  }
  <span class="hljs-comment">// hookListener();</span>
  <span class="hljs-comment">// $(()=&gt;{</span>
  <span class="hljs-comment">// })</span>
  delGoogleAd();
  addBdResult();
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

// ==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();

})();

google提供的广告怎么关闭（屏蔽谷歌广告的软件怎么设置）

api介绍

分析

核心代码

完整代码

相关推荐