Quick search & Go to Top -- Google

Add 'quick search' input and 'go to top' button for Google
当前为 2015-09-13 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Quick search & Go to Top -- Google
// @namespace   feifeihang.info
// @description Add 'quick search' input and 'go to top' button for Google
// @include     https://www.google.*
// @include     http://www.google.*
// @version     5.1.2
// @grant       none
// ==/UserScript==
(function (window, document, undefined) {
  var COLORS = [
    '#FFFF00',
    '#FFCC00',
    '#CCCCFF',
    '#00CCFF',
    '#33CCCC',
    '#FF8080',
    '#008000',
    '#FFFF99',
    '#808000',
    '#FFFFCC'
  ];
  // highlight search terms.
  var urlBuffer,
  resultBuffer;
  setInterval(function () {
    // if it's not google's landing page.
    if (urlBuffer !== window.location.href &&
    !document.querySelector('#hplogo')) {
      var resultContainer = document.querySelector('#search');
      if (resultContainer && resultContainer.textContent !== resultBuffer) {
        // update buffer.
        resultBuffer = resultContainer.textContent;
        // first, find all 'em's.
        var ems = document.querySelectorAll('em');
        // if there is no 'em's, do nothing.
        if (ems.length === 0) {
          return false;
        }
        // convert ems into an array.

        ems = Array.prototype.slice.apply(ems);
        var counter = 0;
        var styles = {};

        // iterate through all the keywords in search result, 
        // and map the predefined color to them.
        ems.forEach(function (em) {
          var text = em.textContent.toUpperCase().trim();
          var bg = styles[text];
          if (!bg) {
            bg = styles[text] = COLORS[counter++];
            if (counter === COLORS.length) {
              counter = 0;
            }
          }
          em.style.background = bg;
          em.style.color = '#000';
          em.style.fontWeight = 'bold';
        });
        urlBuffer = window.location.href;
      }
    }
  }, 200);
  var container = document.createElement('div');
  container.style = 'display: none; position: fixed; bottom: 20px;' +
  'right: 5px; text-align: right;' +
  'width: 280px; height: 60px; z-index: 999999999;' +
  'opacity: 0.8;';
  container.addEventListener('mouseenter', function () {
    this.style.opacity = '1';
  }, true);
  container.addEventListener('mouseout', function () {
    this.style.opacity = '0.8';
  }, true);
  // create quick query input.
  var input = document.createElement('input');
  input.tyle = 'text';
  input.value = document.querySelector('#lst-ib').value;
  input.setAttribute('placeholder', 'Search...');
  input.style = 'border: none; border-left: solid #EA4335 5px; flex: 1; display: inline-block; outline: none; height: 40px;' +
  'font-size: 15px; margin-top: 10px; margin-bottom: 10px; padding: 0; ' +
  'padding-left: 10px; padding-right: 10px; box-shadow: 0 1px 3px #999999;';
  container.appendChild(input);
  // bind keypress-enter event.
  input.addEventListener('keypress', function (evt) {
    if (evt.keyCode === 13) {
      var value = input.value.trim() || '';
      if (value !== '') {
        document.querySelector('#lst-ib').value = value;
        document.querySelector('.lsb').click();
        window.scrollTo(0, 0);
        document.querySelector('#lst-ib').focus();
      }
    }
  }, false);
  // create the goto-top button.
  var btn = document.createElement('div');
  btn.id = 'goto-top-btn';
  btn.innerHTML = 'TOP';
  btn.onclick = gotoTop;
  // set button CSS style.
  btn.style = 'display: inline-block; position: relative; left: -7px; color: #fff; line-height: 60px; text-align: center;' +
  'width: 60px; height: 60px; background: #4285F4; box-shadow: 0 2px 3px #999999;' +
  'cursor: pointer; font-weight: bolder; border-radius: 100%;';
  // append the go-to-top to search form to successfully attach to the UI.
  container.appendChild(btn);
  var form = document.querySelector('#searchform');
  form.appendChild(container);
  window.onload = function () {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    if (top !== 0) {
      container.style.display = 'flex';
    }
  }
  // bind button hiden/show event.

  window.onscroll = function () {
    var doc = document.documentElement;
    var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
    if (top === 0) {
      container.style.display = 'none';
    } else {
      container.style.display = 'flex';
    }
  }
  function gotoTop() {
    goto(Math.floor(window.pageYOffset / 5));
  }
  function goto(step) {
    setTimeout(function () {
      window.scrollTo(0, window.pageYOffset - step);
      if (window.pageYOffset <= 0) return;
      goto(step);
    }, 100);
  }
}) (window, document);
欢迎访问Greasy Fork镜像
