1514283656qq.com / 💊 百度clear

// ==UserScript==
// @name         💊 百度clear
// @namespace    http://tampermonkey.net/
// @version      1.4
// @description  百度清理、界面美化
// @author       zhangzhihao
// @license MIT
// @match        https://www.baidu.com/*
// @match        http://www.baidu.com/*
// @icon         https://www.baidu.com/favicon.ico
// @grant        none
// ==/UserScript==
(function () {
  const stylesheet = `
    *::-webkit-scrollbar {
        width: 16px;
        height: 16px;
    }
    *::-webkit-scrollbar-track:hover {
        visibility: visible;
        background: #f1f1f1;
    }
    *::-webkit-scrollbar-thumb:hover {
        visibility: visible;
        background: #a8a8a8;
    }
    *::-webkit-scrollbar-thumb {
        visibility: visible;
        background: #c1c1c1;
    }
    *::-webkit-scrollbar-track {
        visibility: visible;
        background: #f1f1f1;
    }
    #head {
      background: #fbfbfb;
    }
    #s_tab {
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    }
    #wrapper_wrapper {
      background: radial-gradient(rgba(0, 0, 0, 0.04) 2px, transparent 4px) center center / 20px 20px repeat;
    }
    #wrapper {
     background: #fbfbfb;
    }
    #wrapper>#iframe--result-item {
      position: fixed;
      display: none;
      top: 70px;
      right: 20px;
      width: calc(100% - 800px);
      height: calc(100% - 70px);
      border: none;
      outline: none;
      background: white;
    }
    #content_left>* {
      box-shadow: 0 1px 3px #ddd;
      transition:all 0.5s;
    }
    #content_left>*:hover {
      box-shadow: 0px 1px 2px #ccc, 2px 6px 12px #ddd;
    }
    #content_left>.result-op {

    }
    #content_left {

    }
    .c-title, .c-title a, .c-title em {
      text-decoration: none !important;
    }
    `

  const init = () => {
    // 图片浏览器能打开,但img标签加载提示403
    const $meta = document.querySelector('meta[name="referrer"]') || document.createElement('meta')
    const $head = document.querySelector('head')
    $meta.name = 'referrer'
    $meta.content = "no-referrer"
    $head.insertBefore($meta, $head.children[0])
    // 加载个样式表好控制
    const $style = document.createElement('style')
    $style.innerText = stylesheet
    $head.appendChild($style)
    // 加个背景图
    const $wrapperWrapper = document.querySelector('#wrapper_wrapper')
    const $resultMolecule = document.querySelector('.result-molecule')
    // 加个iframe用于快捷展示搜索结果内容
    const $wrapper = document.querySelector('#wrapper')
    const $detail = document.createElement('iframe')
    $detail.id = 'iframe--result-item'
    $detail.onload = e => {
      if ($detail.src) {
        $detail.style.display = 'block'
      }
    }
    $wrapper.appendChild($detail)
  }

  const clearAd = () => {

    const isSearchPortal = location.href.includes('www.baidu.com/s?')

    if (!isSearchPortal) return

    const $adRight = document.querySelector('#content_right')
    const $adLeft = document.querySelector('#content_left')

    // 左侧搜索结果列表去除广告
    $adLeft && Array.from($adLeft.querySelectorAll('*')).filter($a => $a.innerText === '广告').forEach($a => {
      const searchList = Array.from($adLeft.children)
      const $containedItem = searchList.find($item => $item.contains($a))
      $containedItem && $adLeft.removeChild($containedItem);
    })
    // 搜索结果列表beautify
    $adLeft && Array.from($adLeft.children).forEach($item => {
      // 所属网站
      const $avatar = $item.querySelector('.user-avatar')
      const $avatarLink = $avatar && $avatar.querySelector('a')
      const iconUrl = $avatarLink?.querySelector('img')?.src || '' // 有些已经提供了图标不用单独请求
      // 标题
      const $t = $item.querySelector('.t')
      const $tLink = $t && $t.querySelector('a')
      const $isAdded = $item.querySelector('#CUSTOM_ICO')
      // 为标题添加ico
      if (($tLink && $tLink.href || iconUrl) && !$isAdded) {
        const link = $tLink.href
        const $ico = document.createElement('img')
        $ico.src = iconUrl
        $ico.id = 'CUSTOM_ICO'
        $ico.style = `
               position: absolute;
               right: 8px;
               bottom: 8px;
               height: 32px;
               width: auto;
               cursor: pointer;`
        $ico.onclick = e => {
          const $detail = document.querySelector('#iframe--result-item')
          $detail.style.display = 'none'
          $detail.src = link
        }
        $ico.onerror = e => {
          $ico.src = ''
        }
        $item.appendChild($ico)
        if (!iconUrl) {
          const controller = new AbortController();
          const signal = controller.signal;
          // 资源请求失败会导致导致浏览器tab一直提示加载,5s手动关闭
          setTimeout(window.stop, 5000);
          const fetchIcon = fetch(link, {
            signal
          }).then(async res => {
            const {
              url: targetLink
            } = res
            const {
              origin,
              protocol
            } = new URL(targetLink)
            const htmlStr = await res.text()
            const icoUrl = htmlStr.match(/<link [^<>]*rel="\w*\s?icon\s*" [^<>]+\/?>/gim)?.pop()?.replace(/.*\s+href="([^""'']+)".*/gim, '$1')
            if (icoUrl) {
              const isAbsolute = icoUrl.startsWith('http')
              const isMissProtocol = icoUrl.startsWith('//') // 没有写协议头
              const urlTmp = isAbsolute ? icoUrl : isMissProtocol ? `${protocol}${icoUrl}` : new URL(icoUrl, origin).href
              $ico.src = urlTmp
            }
            else {
              // 瞎蒙一个,没有设置声明的浏览器会自动找这个路径去展示,还显示不了拉倒
              $ico.src = `${origin}/favicon.ico`
            }
          }).catch(e => {
            // 获取不到目标页面直接删掉这条记录,无意义
            // $item.parentNode.removeChild($item)
          })
          Promise.race([
            fetchIcon,
            new Promise((resolve, reject) => setTimeout(reject, 5000))
          ]).catch(_ => {
            // 请求超时关闭请求
            controller.abort()
          })
        }
      }
      // 修改搜索结果标题样式
      if ($t) {
        if ($tLink) {
          //$tLink.innerHTML = $tLink.innerText
        }
        Object.assign(
          $t.style, {
            fontWeight: 'bold',
          }
        )
      }
      // 修改搜索结果项样式
      Object.assign(
        $item.style, {
          position: 'relative',
          borderRadius: "12px",
          padding: "16px",
          minWidth: "560px",
          background: "#fff"
        }
      )
    })

    // 右侧推广栏清除
    $adRight && $adRight.parentNode && $adRight.parentNode.removeChild($adRight)
  }
  if (MutationObserver) {
    const observer = new MutationObserver(clearAd)
    const target = document.querySelector('#content_left') || document.body
    observer.observe(target, {
      childList: true
    })
  }
  else {
    document.addEventListener('DOMNodeInserted', clearAd)
  }
  self.requestAnimationFrame(() => {
    init()
    clearAd()
  });
})();