您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Customize Google's logos, buttons, icons, and text with a settings page
当前为
// ==UserScript== // @name Google Custom Style with Settings // @namespace http://tampermonkey.net/ // @version 0.1 // @description Customize Google's logos, buttons, icons, and text with a settings page // @author You // @match https://www.google.com/* // @grant GM_addStyle // ==/UserScript== (function() { 'use strict'; // Insert settings button into the page let settingsButton = document.createElement('div'); settingsButton.id = 'customStyleSettingsButton'; settingsButton.innerText = '⚙️ Settings'; document.body.appendChild(settingsButton); // Insert settings menu into the page let settingsMenu = document.createElement('div'); settingsMenu.id = 'customStyleSettingsMenu'; settingsMenu.innerHTML = ` <h2>Custom Style Settings</h2> <div class="setting-item"> <label for="logo-size">Logo Size:</label> <input type="range" id="logo-size" min="50" max="300" value="100"> </div> <div class="setting-item"> <label for="move-logo">Move Logo:</label> <input type="range" id="move-logo" min="-100" max="100" value="0"> </div> <button id="applyStyles">Apply Styles</button> `; document.body.appendChild(settingsMenu); // Toggle settings menu visibility settingsButton.addEventListener('click', () => { settingsMenu.classList.toggle('open'); }); // Apply custom styles dynamically document.getElementById('applyStyles').addEventListener('click', () => { let logoSize = document.getElementById('logo-size').value; let moveLogo = document.getElementById('move-logo').value; // Apply styles GM_addStyle(` img[alt="Google"] { width: ${logoSize}px !important; transform: translateX(${moveLogo}px) !important; } `); }); // Add styles for settings menu, button, and animations GM_addStyle(` #customStyleSettingsButton { position: fixed; top: 10px; right: 10px; background-color: #4285f4; color: white; padding: 10px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } #customStyleSettingsButton:hover { background-color: #0b66c2; } #customStyleSettingsMenu { display: none; position: fixed; top: 50px; right: 10px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; opacity: 0; transform: translateY(-10px); } #customStyleSettingsMenu.open { display: block; opacity: 1; transform: translateY(0); } .setting-item { margin-bottom: 10px; } input[type="range"] { width: 100%; } button { background-color: #4285f4; color: white; border: none; padding: 10px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } button:hover { background-color: #0b66c2; } `); })();