☰

Custom Google Homepage with Timer and Guess the Number

Customize the Google homepage by adding buttons, a color changer feature, social media buttons, a timer, and a Guess the Number game.

  1. // ==UserScript==
  2. // @name Custom Google Homepage with Timer and Guess the Number
  3. // @namespace https://gf.qytechs.cn/users/1129625
  4. // @version 3.3
  5. // @description Customize the Google homepage by adding buttons, a color changer feature, social media buttons, a timer, and a Guess the Number game.
  6. // @match        *://www.google.com/*
  7. // @match        *://www.google.co.uk/*
  8. // @match        *://www.google.ca/*
  9. // @match        *://www.google.fr/*
  10. // @match        *://www.google.de/*
  11. // @match        *://www.google.it/*
  12. // @match        *://www.google.es/*
  13. // @match        *://www.google.se/*
  14. // @match        *://www.google.nl/*
  15. // @match        *://www.google.no/*
  16. // @match        *://www.google.dk/*
  17. // @match        *://www.google.fi/*
  18. // @match        *://www.google.be/*
  19. // @match        *://www.google.ch/*
  20. // @match        *://www.google.at/*
  21. // @match        *://www.google.ru/*
  22. // @match        *://www.google.com.br/*
  23. // @match        *://www.google.com.mx/*
  24. // @match        *://www.google.com.ar/*
  25. // @match        *://www.google.co.jp/*
  26. // @match        *://www.google.co.kr/*
  27. // @match        *://www.google.com.au/*
  28. // @match        *://www.google.com.hk/*
  29. // @match        *://www.google.co.in/*
  30. // @match        *://www.google.co.id/*
  31. // @match        *://www.google.com.sg/*
  32. // @match        *://www.google.com.my/*
  33. // @match        *://www.google.co.th/*
  34. // @match        *://www.google.com.ph/*
  35. // @match        *://www.google.com.vn/*
  36. // @match        *://www.google.com.sa/*
  37. // @match        *://www.google.ae/*
  38. // @match        *://www.google.co.il/*
  39. // @match        *://www.google.com.tr/*
  40. // @match        *://www.google.co.za/*
  41. // @grant none
  42. // @license MIT
  43. // ==/UserScript==
  44.  
  45. (function () {
  46.   'use strict';
  47.  
  48.   // Function to create a button element
  49.   function createButton(text, url) {
  50.     var button = document.createElement('a');
  51.     button.textContent = text;
  52.     button.href = url;
  53.     button.style.marginRight = '10px';
  54.     button.style.cursor = 'pointer';
  55.     return button;
  56.   }
  57.  
  58.   // Function to create a button element with a color wheel
  59.   function createButtonWithColorWheel(text, url) {
  60.     var buttonContainer = document.createElement('div');
  61.     buttonContainer.style.display = 'flex';
  62.     buttonContainer.style.alignItems = 'center';
  63.  
  64.     var button = document.createElement('a');
  65.     button.textContent = text;
  66.     button.href = url;
  67.     button.style.marginRight = '10px';
  68.     button.style.cursor = 'pointer';
  69.  
  70.     var colorWheelContainer = document.createElement('div');
  71.     colorWheelContainer.style.marginRight = '10px';
  72.  
  73.     var colorWheel = document.createElement('input');
  74.     colorWheel.type = 'color';
  75.     colorWheel.style.cursor = 'pointer';
  76.     colorWheel.addEventListener('input', function (event) {
  77.       document.body.style.backgroundColor = event.target.value;
  78.     });
  79.  
  80.     colorWheelContainer.appendChild(colorWheel);
  81.  
  82.     buttonContainer.appendChild(button);
  83.     buttonContainer.appendChild(colorWheelContainer);
  84.  
  85.     return buttonContainer;
  86.   }
  87.  
  88.   // Function to create the Color Changer button
  89.   function createColorChangerButton() {
  90.     var button = document.createElement('button');
  91.     button.textContent = 'Change Color';
  92.     button.style.marginRight = '10px';
  93.     button.style.cursor = 'pointer';
  94.     button.addEventListener('click', function () {
  95.       var color = prompt(
  96.         "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. Custom Color"
  97.       );
  98.  
  99.       if (color !== null) {
  100.         var colors = [
  101.           'blue', 'red', 'green', 'yellow', 'purple', 'orange', 'pink', 'teal', 'gray', 'brown',
  102.           'skyblue', 'cyan', 'magenta', 'lime', 'indigo', 'olive', 'silver', 'maroon', 'navy'
  103.         ];
  104.         if (color >= 1 && color <= 19) {
  105.           document.body.style.backgroundColor = colors[color - 1];
  106.         } else if (color == 20) {
  107.           showCustomColor();
  108.         } else {
  109.           alert("Invalid selection. Please choose a valid option.");
  110.         }
  111.       }
  112.     });
  113.  
  114.     return button;
  115.   }
  116.  
  117.   // Function to show the custom color prompt
  118.   function showCustomColor() {
  119.     var customColor = prompt("Enter a custom color (HEX or RGB):");
  120.     if (customColor !== null) {
  121.       document.body.style.backgroundColor = customColor;
  122.     }
  123.   }
  124.  
  125.   // Function to create the Random Number button
  126.   function createRandomNumberButton() {
  127.     var button = document.createElement('button');
  128.     button.textContent = 'Random Number';
  129.     button.style.marginRight = '10px';
  130.     button.style.cursor = 'pointer';
  131.     button.addEventListener('click', function () {
  132.       var randomNumber = Math.floor(Math.random() * 101);
  133.       alert('Random Number: ' + randomNumber);
  134.     });
  135.  
  136.     return button;
  137.   }
  138.  
  139.   // Function to create the New Fact button
  140.   function createNewFactButton() {
  141.     var button = document.createElement('button');
  142.     button.textContent = 'New Fact';
  143.     button.style.marginRight = '10px';
  144.     button.style.cursor = 'pointer';
  145.     button.addEventListener('click', function () {
  146.       var currentDay = new Date().getDate();
  147.       var fact = getFactOfTheDay(currentDay);
  148.       alert('Fact of the Day: ' + fact);
  149.     });
  150.  
  151.     return button;
  152.   }
  153.  
  154.   // Function to get the fact of the day based on the current day
  155.   function getFactOfTheDay(day) {
  156.     if (isNaN(day)) {
  157.       day = 1;
  158.     }
  159.  
  160.     var facts = [
  161. 'The Earth is the third planet from the Sun.',
  162.     'Water covers about 71% of the Earth\'s surface.',
  163.     'The Great Wall of China is visible from space.',
  164.     'The human body is made up of approximately 60% water.',
  165.     'The speed of light is approximately 299,792,458 meters per second.',
  166.     'The largest ocean on Earth is the Pacific Ocean.',
  167.     'The Eiffel Tower is located in Paris, France.',
  168.     'The Statue of Liberty was a gift from France to the United States.',
  169.     'The Mona Lisa was painted by Leonardo da Vinci.',
  170.     'The planet Mars is also known as the "Red Planet".',
  171.     'Mount Everest is the highest mountain in the world.',
  172.     'The Amazon rainforest is the largest tropical rainforest on Earth.',
  173.     'The Nile River is the longest river in the world.',
  174.     'The Taj Mahal is located in Agra, India.',
  175.     'The Great Barrier Reef is the largest coral reef system in the world.',
  176.     'The Colosseum is located in Rome, Italy.',
  177.     'The Sahara Desert is the largest hot desert in the world.',
  178.     'The Sydney Opera House is located in Sydney, Australia.',
  179.     'The polar bear is the largest species of bear.',
  180.     'The moon is approximately 384,400 kilometers away from Earth.',
  181.     'The Statue of Liberty\'s full name is "Liberty Enlightening the World".',
  182.     'The Leaning Tower of Pisa is located in Pisa, Italy.',
  183.     'The pyramids of Giza were built as tombs for the pharaohs.',
  184.     'The Arctic is home to the North Pole.',
  185.     'The Mediterranean Sea is connected to the Atlantic Ocean.',
  186.     'The Galapagos Islands are located in the Pacific Ocean.',
  187.     'The Golden Gate Bridge is located in San Francisco, California.',
  188.     'The kangaroo is a marsupial native to Australia.',
  189.     'The Vatican City is the smallest independent state in the world.',
  190.     'The Red Sea is known for its diverse marine life.',
  191.     'The Hollywood sign is located in Los Angeles, California.',
  192.     ];
  193.  
  194.     // Get the fact corresponding to the current day
  195.     var factIndex = (day - 1) % facts.length;
  196.     return facts[factIndex];
  197.   }
  198.  
  199.   // Function to create the Timer element
  200.   function createTimerElement() {
  201.     var timerElement = document.createElement('div');
  202.     timerElement.style.position = 'fixed';
  203.     timerElement.style.top = '50%';
  204.     timerElement.style.left = '10px';
  205.     timerElement.style.transform = 'translateY(-50%)';
  206.     timerElement.style.backgroundColor = '#fff';
  207.     timerElement.style.padding = '10px';
  208.     timerElement.style.borderRadius = '5px';
  209.     timerElement.style.fontSize = '18px';
  210.     timerElement.style.fontWeight = 'bold';
  211.     timerElement.style.zIndex = '9999';
  212.     timerElement.textContent = '00:00:00';
  213.  
  214.     return timerElement;
  215.   }
  216.  
  217.   // Function to create the Guess the Number game elements
  218.   function createGuessTheNumberElements() {
  219.     var guessContainer = document.createElement('div');
  220.     guessContainer.style.position = 'fixed';
  221.     guessContainer.style.top = '50%';
  222.     guessContainer.style.left = '1165px';
  223.     guessContainer.style.transform = 'translateY(-50%)';
  224.     guessContainer.style.backgroundColor = '#fff';
  225.     guessContainer.style.padding = '10px';
  226.     guessContainer.style.borderRadius = '5px';
  227.     guessContainer.style.fontSize = '18px';
  228.     guessContainer.style.fontWeight = 'bold';
  229.     guessContainer.style.zIndex = '9999';
  230.  
  231.     var guessLabel = document.createElement('p');
  232.     guessLabel.textContent = 'Guess the Number (0-100)';
  233.     guessContainer.appendChild(guessLabel);
  234.  
  235.     var attemptsLabel = document.createElement('p');
  236.     attemptsLabel.textContent = 'Attempts left:';
  237.     guessContainer.appendChild(attemptsLabel);
  238.  
  239.     var inputField = document.createElement('input');
  240.     inputField.type = 'number';
  241.     guessContainer.appendChild(inputField);
  242.  
  243.     var submitButton = document.createElement('button');
  244.     submitButton.textContent = 'Submit Guess';
  245.     submitButton.style.cursor = 'pointer';
  246.     submitButton.style.marginTop = '5px';
  247.     submitButton.addEventListener('click', function () {
  248.       checkGuess(parseInt(inputField.value));
  249.     });
  250.     guessContainer.appendChild(submitButton);
  251.  
  252.     return guessContainer;
  253.   }
  254.  
  255.   // Function to create the message container for Guess the Number game
  256.   function createMessageContainer() {
  257.     var messageContainer = document.createElement('div');
  258.     messageContainer.style.marginTop = '10px';
  259.     return messageContainer;
  260.   }
  261.  
  262.   // Create the Start button
  263.   var startButton = document.createElement('button');
  264.   startButton.textContent = 'Start';
  265.   startButton.style.marginRight = '10px';
  266.   startButton.style.cursor = 'pointer';
  267.   startButton.style.position = 'absolute';
  268.   startButton.style.left = '32px';
  269.   startButton.style.top = '312px';
  270.   startButton.addEventListener('click', function () {
  271.     startTimer();
  272.   });
  273.  
  274.   // Create the Pause button
  275.   var pauseButton = document.createElement('button');
  276.   pauseButton.textContent = 'Pause';
  277.   pauseButton.style.marginRight = '10px';
  278.   pauseButton.style.cursor = 'pointer';
  279.   pauseButton.style.position = 'absolute';
  280.   pauseButton.style.left = '72px';
  281.   pauseButton.style.top = '312px';
  282.   pauseButton.addEventListener('click', function () {
  283.     pauseTimer();
  284.   });
  285.  
  286.   // Create the Reset button
  287.   var resetButton = document.createElement('button');
  288.   resetButton.textContent = 'Reset';
  289.   resetButton.style.cursor = 'pointer';
  290.   resetButton.style.position = 'absolute';
  291.   resetButton.style.left = '122px';
  292.   resetButton.style.top = '312px';
  293.   resetButton.addEventListener('click', function () {
  294.     resetTimer();
  295.   });
  296.  
  297.   // Find the Google Apps button
  298.   var appsButton = document.querySelector('a.gb_d');
  299.   if (appsButton) {
  300.     // Create the color changer button
  301.     var changeColorButton = createColorChangerButton();
  302.     changeColorButton.style.marginRight = '10px';
  303.     changeColorButton.style.cursor = 'pointer';
  304.  
  305.     // Replace the Google Apps button with the color changer button
  306.     appsButton.parentNode.replaceChild(changeColorButton, appsButton);
  307.   }
  308.  
  309.   // Find the About button
  310.   var aboutButton = document.querySelector('a[href*="about.google"]');
  311.   if (aboutButton) {
  312.     // Replace the About button with the YouTube button
  313.     var youtubeButton = createButton('YouTube', 'https://www.youtube.com');
  314.     aboutButton.parentNode.replaceChild(youtubeButton, aboutButton);
  315.   }
  316.  
  317.   // Find the Store button
  318.   var storeButton = document.querySelector('a[href*="store.google.com"]');
  319.   if (storeButton) {
  320.     // Replace the Store button with the Twitch button and color wheel
  321.     var twitchButton = createButtonWithColorWheel('Twitch', 'https://www.twitch.tv');
  322.     storeButton.parentNode.replaceChild(twitchButton, storeButton);
  323.   }
  324.  
  325.   // Find the Images button
  326.   var imagesButton = document.querySelector('a[href*="google.com/imghp"]');
  327.   if (imagesButton) {
  328.     // Replace the Images button with the Discord button
  329.     var discordButton = createButton('Discord', 'https://www.discord.com/app');
  330.     imagesButton.parentNode.replaceChild(discordButton, imagesButton);
  331.   }
  332.  
  333.   // Create the Reddit button
  334.   var redditButton = createButton('Reddit', 'https://www.reddit.com');
  335.   redditButton.style.marginRight = '10px';
  336.   redditButton.style.cursor = 'pointer';
  337.  
  338.   // Create the Twitter button
  339.   var twitterButton = createButton('Twitter', 'https://www.twitter.com');
  340.   twitterButton.style.marginRight = '10px';
  341.   twitterButton.style.cursor = 'pointer';
  342.  
  343.   // Create the Instagram button
  344.   var instagramButton = createButton('Instagram', 'https://www.instagram.com');
  345.   instagramButton.style.marginRight = '10px';
  346.   instagramButton.style.cursor = 'pointer';
  347.  
  348.   // Create the Facebook button
  349.   var facebookButton = createButton('Facebook', 'https://www.facebook.com');
  350.   facebookButton.style.marginRight = '10px';
  351.   facebookButton.style.cursor = 'pointer';
  352.  
  353.   // Create the Random Number button
  354.   var randomNumberButton = createRandomNumberButton();
  355.   randomNumberButton.style.marginRight = '10px';
  356.   randomNumberButton.style.cursor = 'pointer';
  357.  
  358.   // Create the New Fact button
  359.   var newFactButton = createNewFactButton();
  360.   newFactButton.style.marginRight = '10px';
  361.   newFactButton.style.cursor = 'pointer';
  362.  
  363.   // Find the color wheel container
  364.   var colorWheelContainer = document.querySelector('div[style="margin-right: 10px;"]');
  365.   if (colorWheelContainer) {
  366.     // Insert the Reddit button after the color wheel container
  367.     colorWheelContainer.parentNode.insertBefore(redditButton, colorWheelContainer.nextSibling);
  368.  
  369.     // Insert the Twitter button after the Reddit button
  370.     redditButton.parentNode.insertBefore(twitterButton, redditButton.nextSibling);
  371.  
  372.     // Insert the Instagram button after the Twitter button
  373.     twitterButton.parentNode.insertBefore(instagramButton, twitterButton.nextSibling);
  374.  
  375.     // Insert the Facebook button after the Instagram button
  376.     instagramButton.parentNode.insertBefore(facebookButton, instagramButton.nextSibling);
  377.  
  378.     // Insert the Random Number button after the Facebook button
  379.     facebookButton.parentNode.insertBefore(randomNumberButton, facebookButton.nextSibling);
  380.  
  381.     // Insert the New Fact button after the Random Number button
  382.     randomNumberButton.parentNode.insertBefore(newFactButton, randomNumberButton.nextSibling);
  383.   }
  384.  
  385.   // Create the Timer element
  386.   var timerElement = createTimerElement();
  387.   document.body.appendChild(timerElement);
  388.  
  389.   // Create the Guess the Number elements
  390.   var guessContainer = createGuessTheNumberElements();
  391.   document.body.appendChild(guessContainer);
  392.  
  393.   // Create the message container for Guess the Number
  394.   var messageContainer = createMessageContainer();
  395.   document.body.appendChild(messageContainer);
  396.  
  397.   var timerInterval;
  398.   var startTime;
  399.  
  400.   var randomNumber;
  401.   var remainingAttempts = 6;
  402.  
  403.   // Function to update the timer
  404.   function updateTimer() {
  405.     var currentTime = new Date().getTime();
  406.     var elapsedTime = currentTime - startTime;
  407.     var hours = Math.floor(elapsedTime / (1000 * 60 * 60)).toString().padStart(2, '0');
  408.     var minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
  409.     var seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000).toString().padStart(2, '0');
  410.  
  411.     timerElement.textContent = hours + ':' + minutes + ':' + seconds;
  412.   }
  413.  
  414.   // Function to start the timer
  415.   function startTimer() {
  416.     if (!timerInterval) {
  417.       startTime = new Date().getTime();
  418.       timerInterval = setInterval(updateTimer, 1000);
  419.     }
  420.   }
  421.  
  422.   // Function to pause the timer
  423.   function pauseTimer() {
  424.     if (timerInterval) {
  425.       clearInterval(timerInterval);
  426.       timerInterval = null;
  427.     }
  428.   }
  429.  
  430.   // Function to reset the timer
  431.   function resetTimer() {
  432.     if (timerInterval) {
  433.       clearInterval(timerInterval);
  434.       timerInterval = null;
  435.     }
  436.     timerElement.textContent = '00:00:00';
  437.   }
  438.  
  439.   // Function to show the hint popup with remaining attempts
  440.   function showHintPopup(hint) {
  441.     var popup = document.createElement('div');
  442.     popup.style.position = 'fixed';
  443.     popup.style.top = '50%';
  444.     popup.style.left = 'calc(50% - 100px)';
  445.     popup.style.transform = 'translate(-50%, -50%)';
  446.     popup.style.backgroundColor = '#fff';
  447.     popup.style.padding = '10px';
  448.     popup.style.borderRadius = '5px';
  449.     popup.style.fontSize = '18px';
  450.     popup.style.fontWeight = 'bold';
  451.     popup.style.zIndex = '9999';
  452.     popup.textContent = hint + ' (Attempts left: ' + remainingAttempts + ')';
  453.  
  454.     document.body.appendChild(popup);
  455.  
  456.     setTimeout(function () {
  457.       document.body.removeChild(popup);
  458.     }, 2000);
  459.   }
  460.  
  461.   // Function to check the guess in the Guess the Number game
  462.   function checkGuess(guess) {
  463.     if (remainingAttempts > 0) {
  464.       if (isNaN(guess) || guess < 0 || guess > 100) {
  465.         messageContainer.textContent = 'Please enter a valid number between 0 and 100.';
  466.       } else {
  467.         remainingAttempts--;
  468.         messageContainer.textContent = 'Attempts left: ' + remainingAttempts;
  469.  
  470.         if (guess === randomNumber) {
  471.           messageContainer.textContent = 'Congratulations! You guessed the correct number.';
  472.           guessContainer.style.display = 'none';
  473.         } else if (remainingAttempts === 0) {
  474.           messageContainer.textContent = 'Game Over. The correct number was: ' + randomNumber;
  475.           guessContainer.style.display = 'none';
  476.         } else if (guess < randomNumber) {
  477.           showHintPopup('Higher');
  478.         } else {
  479.           showHintPopup('Lower');
  480.         }
  481.  
  482.         // Add the guessed number to the history container
  483.         addToGuessHistory(guess);
  484.       }
  485.     }
  486.   }
  487.  
  488.   // Function to create the Guess History container
  489.   function createGuessHistoryContainer() {
  490.     var guessHistoryContainer = document.createElement('div');
  491.     guessHistoryContainer.style.position = 'fixed';
  492.     guessHistoryContainer.style.top = '50%';
  493.     guessHistoryContainer.style.left = '1100px';
  494.     guessHistoryContainer.style.transform = 'translateY(-50%)';
  495.     guessHistoryContainer.style.backgroundColor = '#fff';
  496.     guessHistoryContainer.style.padding = '10px';
  497.     guessHistoryContainer.style.borderRadius = '5px';
  498.     guessHistoryContainer.style.fontSize = '18px';
  499.     guessHistoryContainer.style.fontWeight = 'bold';
  500.     guessHistoryContainer.style.zIndex = '9999';
  501.     guessHistoryContainer.textContent = 'Guess History:\n';
  502.  
  503.     return guessHistoryContainer;
  504.   }
  505.  
  506.   // Create the Guess History container
  507.   var guessHistoryContainer = createGuessHistoryContainer();
  508.   document.body.appendChild(guessHistoryContainer);
  509.  
  510.   // Function to add the guessed number to the history container
  511.   function addToGuessHistory(guess) {
  512.     guessHistoryContainer.textContent += guess + ', ';
  513.   }
  514.  
  515.   // Generate the initial random number for the Guess the Number game
  516.   randomNumber = Math.floor(Math.random() * 101);
  517.  
  518.   // Create the Start/Pause/Reset buttons container
  519.   var timerButtonsContainer = document.createElement('div');
  520.   timerButtonsContainer.style.display = 'flex';
  521.   timerButtonsContainer.style.alignItems = 'center';
  522.   timerButtonsContainer.style.marginTop = '10px';
  523.  
  524.   // Insert the Start/Pause/Reset buttons container after the color wheel container
  525.   if (colorWheelContainer) {
  526.     colorWheelContainer.parentNode.insertBefore(timerButtonsContainer, colorWheelContainer.nextSibling);
  527.   }
  528.  
  529.   // Add the Start button to the container
  530.   timerButtonsContainer.appendChild(startButton);
  531.  
  532.   // Add the Pause button to the container
  533.   timerButtonsContainer.appendChild(pauseButton);
  534.  
  535.   // Add the Reset button to the container
  536.   timerButtonsContainer.appendChild(resetButton);
  537.  
  538.   // Remove the unwanted div with class "KxwPGc SSwjIe"
  539.   const unwantedDiv = document.querySelector('div.KxwPGc.SSwjIe');
  540.   if (unwantedDiv) {
  541.     unwantedDiv.remove();
  542.   }
  543.  
  544.   // Attach scroll event listener to lock the timer in place
  545.   window.addEventListener('scroll', function () {
  546.     var topOffset = '10px'; // Adjust this value if needed
  547.     timerElement.style.top = 'calc(50% + ' + topOffset + ' - ' + window.scrollY + 'px)';
  548.   });
  549. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址