Custom Google Homepage

Greasy Fork is available in English.
Custom Google Homepage

Customize the Google homepage by adding buttons, a color changer feature, and social media buttons.
当前为 2023-07-18 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name Custom Google Homepage
// @namespace http://greasyfork.icu/users/1129625
// @version 2.0
// @description Customize the Google homepage by adding buttons, a color changer feature, and social media buttons.
// @match *://www.google.com/*
// @grant none
// @license mit
// ==/UserScript==

(function() {
  'use strict';

  // Remove the Advertising, Business, and How Search works div
  var adBusinessDiv = document.querySelector('div[data-sfe="true"]');
  if (adBusinessDiv) {
    adBusinessDiv.remove();
  }

  // Find the Google Apps button
  var appsButton = document.querySelector('a.gb_d');
  if (appsButton) {
    // Create the color changer button
    var changeColorButton = createColorChangerButton();
    changeColorButton.style.marginRight = '10px';
    changeColorButton.style.cursor = 'pointer';

    // Replace the Google Apps button with the color changer button
    appsButton.parentNode.replaceChild(changeColorButton, appsButton);
  }

  // Find the About button
  var aboutButton = document.querySelector('a[href*="about.google"]');
  if (aboutButton) {
    // Replace the About button with the YouTube button
    var youtubeButton = createButton('YouTube', 'https://www.youtube.com');
    aboutButton.parentNode.replaceChild(youtubeButton, aboutButton);
  }

  // Find the Store button
  var storeButton = document.querySelector('a[href*="store.google.com"]');
  if (storeButton) {
    // Replace the Store button with the Twitch button and color wheel
    var twitchButton = createButtonWithColorWheel('Twitch', 'https://www.twitch.tv');
    storeButton.parentNode.replaceChild(twitchButton, storeButton);
  }

  // Find the Images button
  var imagesButton = document.querySelector('a[href*="google.com/imghp"]');
  if (imagesButton) {
    // Replace the Images button with the Discord button
    var discordButton = createButton('Discord', 'https://www.discord.com');
    imagesButton.parentNode.replaceChild(discordButton, imagesButton);
  }

  // Create the Reddit button
  var redditButton = createButton('Reddit', 'https://www.reddit.com');
  redditButton.style.marginRight = '10px';
  redditButton.style.cursor = 'pointer';

  // Create the Twitter button
  var twitterButton = createButton('Twitter', 'https://www.twitter.com');
  twitterButton.style.marginRight = '10px';
  twitterButton.style.cursor = 'pointer';

  // Create the Instagram button
  var instagramButton = createButton('Instagram', 'https://www.instagram.com');
  instagramButton.style.marginRight = '10px';
  instagramButton.style.cursor = 'pointer';

  // Create the Facebook button
  var facebookButton = createButton('Facebook', 'https://www.facebook.com');
  facebookButton.style.marginRight = '10px';
  facebookButton.style.cursor = 'pointer';

  // Create the Random Number button
  var randomNumberButton = createRandomNumberButton();
  randomNumberButton.style.marginRight = '10px';
  randomNumberButton.style.cursor = 'pointer';

  // Find the color wheel container
  var colorWheelContainer = document.querySelector('div[style="margin-right: 10px;"]');
  if (colorWheelContainer) {
    // Insert the Reddit button after the color wheel container
    colorWheelContainer.parentNode.insertBefore(redditButton, colorWheelContainer.nextSibling);

    // Insert the Twitter button after the Reddit button
    redditButton.parentNode.insertBefore(twitterButton, redditButton.nextSibling);

    // Insert the Instagram button after the Twitter button
    twitterButton.parentNode.insertBefore(instagramButton, twitterButton.nextSibling);

    // Insert the Facebook button after the Twitter button
    twitterButton.parentNode.insertBefore(facebookButton, instagramButton.nextSibling);

    // Insert the Random Number button after the Facebook button
    facebookButton.parentNode.insertBefore(randomNumberButton, facebookButton.nextSibling);
  }

  // Function to create a button element
  function createButton(text, url) {
    var button = document.createElement('a');
    button.textContent = text;
    button.href = url;
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    return button;
  }

  // Function to create a button element with a color wheel
  function createButtonWithColorWheel(text, url) {
    var buttonContainer = document.createElement('div');
    buttonContainer.style.display = 'flex';
    buttonContainer.style.alignItems = 'center';

    var button = document.createElement('a');
    button.textContent = text;
    button.href = url;
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';

    var colorWheelContainer = document.createElement('div');
    colorWheelContainer.style.marginRight = '10px';

    var colorWheel = document.createElement('input');
    colorWheel.type = 'color';
    colorWheel.addEventListener('input', function(event) {
      document.body.style.backgroundColor = event.target.value;
    });

    colorWheelContainer.appendChild(colorWheel);

    buttonContainer.appendChild(button);
    buttonContainer.appendChild(colorWheelContainer);

    return buttonContainer;
  }

  // Function to create the Color Changer button
  function createColorChangerButton() {
    var button = document.createElement('button');
    button.textContent = 'Change Color';
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    button.addEventListener('click', function() {
      var color = prompt(
        "Select a color:\n1. Blue\n2. Red\n3. Green\n4. Yellow\n5. Purple\n6. Orange\n7. Pink\n8. Teal\n9. Gray\n10. Brown\n11. SkyBlue\n12. Cyan\n13. Magenta\n14. Lime\n15. Indigo\n16. Olive\n17. Silver\n18. Maroon\n19. Navy\n20. More Colors"
      );

      if (color !== null) {
        switch (color) {
          case "1":
            document.body.style.backgroundColor = "blue";
            break;
          case "2":
            document.body.style.backgroundColor = "red";
            break;
          case "3":
            document.body.style.backgroundColor = "green";
            break;
          case "4":
            document.body.style.backgroundColor = "yellow";
            break;
          case "5":
            document.body.style.backgroundColor = "purple";
            break;
          case "6":
            document.body.style.backgroundColor = "orange";
            break;
          case "7":
            document.body.style.backgroundColor = "pink";
            break;
          case "8":
            document.body.style.backgroundColor = "teal";
            break;
          case "9":
            document.body.style.backgroundColor = "gray";
            break;
          case "10":
            document.body.style.backgroundColor = "brown";
            break;
          case "11":
            document.body.style.backgroundColor = "skyblue";
            break;
          case "12":
            document.body.style.backgroundColor = "cyan";
            break;
          case "13":
            document.body.style.backgroundColor = "magenta";
            break;
          case "14":
            document.body.style.backgroundColor = "lime";
            break;
          case "15":
            document.body.style.backgroundColor = "indigo";
            break;
          case "16":
            document.body.style.backgroundColor = "olive";
            break;
          case "17":
            document.body.style.backgroundColor = "silver";
            break;
          case "18":
            document.body.style.backgroundColor = "maroon";
            break;
          case "19":
            document.body.style.backgroundColor = "navy";
            break;
          case "20":
            showMoreColors();
            break;
          default:
            alert("Invalid selection. Please choose a valid option.");
        }
      }
    });

    return button;
  }

  // Function to show the additional color options
  function showMoreColors() {
    var moreColors = prompt(
      "Select a color:\n21. LightCoral\n22. RoyalBlue\n23. Tomato\n24. ForestGreen\n25. Gold\n26. Orchid\n27. Sienna\n28. SteelBlue\n29. DarkSlateGray\n30. Custom Color"
    );

    if (moreColors !== null) {
      switch (moreColors) {
        case "21":
          document.body.style.backgroundColor = "lightcoral";
          break;
        case "22":
          document.body.style.backgroundColor = "royalblue";
          break;
        case "23":
          document.body.style.backgroundColor = "tomato";
          break;
        case "24":
          document.body.style.backgroundColor = "forestgreen";
          break;
        case "25":
          document.body.style.backgroundColor = "gold";
          break;
        case "26":
          document.body.style.backgroundColor = "orchid";
          break;
        case "27":
          document.body.style.backgroundColor = "sienna";
          break;
        case "28":
          document.body.style.backgroundColor = "steelblue";
          break;
        case "29":
          document.body.style.backgroundColor = "darkslategray";
          break;
        case "30":
          var customColor = prompt(
            "Enter a custom color (HEX or RGB):"
          );
          if (customColor !== null) {
            document.body.style.backgroundColor = customColor;
          }
          break;
        default:
          alert("Invalid selection. Please choose a valid option.");
      }
    }
  }

  // Function to create the Random Number button
  function createRandomNumberButton() {
    var button = document.createElement('button');
    button.textContent = 'Random Number';
    button.style.marginRight = '10px';
    button.style.cursor = 'pointer';
    button.addEventListener('click', function() {
      var randomNumber = Math.floor(Math.random() * 101);
      alert('Random Number: ' + randomNumber);
    });

    return button;
  }
})();