【油猴脚本】基于谷歌搜索引擎的站内搜索

// ==UserScript==
// @name Google 本站搜索
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// @version 1.0
// ==/UserScript==

(function () {
\’use strict\’;
let side = GM_getValue(\’gs_side\’, \’right\’),
topPos = GM_getValue(\’gs_top\’, window.innerHeight * 0.4);

const box = document.createElement(\’div\’), WIDTH = 240;
box.id = \’gs-widget\’;
box.innerHTML = `<div class=\”gs-wrapper\”><div class=\”gs-h\”>🔍</div><input type=\”text\” id=\”gs-input-field\” placeholder=\”Google 站内搜索\”></div>`;
document.body.appendChild(box);

const style = document.createElement(\’style\’);
style.textContent = `
#gs-widget {
position: fixed; top: ${topPos}px; height: 40px; width: 44px;
z-index: 2147483647; transition: opacity 0.3s; opacity: 0.8;
overflow: visible;
}
#gs-widget:hover { opacity: 1; }

.gs-wrapper {
display: flex; align-items: center; height: 100%; width: ${WIDTH}px;
/* 修改为白色毛玻璃背景 */
background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px);
border: 0.5px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: absolute; top: 0;
}

/* 侧边无缝连接逻辑 */
#gs-widget.right { right: 0; }
#gs-widget.right .gs-wrapper {
right: 0; border-radius: 20px 0 0 20px; border-right: none;
transform: translateX(calc(${WIDTH}px – 44px));
}
#gs-widget.right:hover .gs-wrapper { transform: translateX(0); }

#gs-widget.left { left: 0; }
#gs-widget.left .gs-wrapper {
left: 0; flex-direction: row-reverse; border-radius: 0 20px 20px 0; border-left: none;
transform: translateX(calc(-${WIDTH}px + 44px));
}
#gs-widget.left:hover .gs-wrapper { transform: translateX(0); }

.gs-h {
width: 44px; height: 100%; display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 18px; flex-shrink: 0;
color: #333; /* 图标颜色改为深色 */
user-select: none; transition: transform 0.2s ease;
}
.gs-h:hover { transform: scale(1.15); }

/* 内部搜索框：白色背景下的胶囊造型 */
#gs-input-field {
flex: 1 !important; height: 28px !important; border: none !important;
background: rgba(0, 0, 0, 0.05) !important;
color: #333 !important; /* 文字颜色改为深灰 */
padding: 0 15px !important; outline: none !important; font-size: 13px !important;
border-radius: 14px !important;
margin: 0 12px 0 6px !important;
transition: background 0.2s;
}
#gs-widget.left #gs-input-field {
margin: 0 6px 0 12px !important;
}
#gs-input-field::placeholder { color: #999; }
#gs-input-field:focus { background: rgba(0, 0, 0, 0.08) !important; }
`;
document.head.appendChild(style);
box.className = side;

const h = box.querySelector(\’.gs-h\’), input = box.querySelector(\’#gs-input-field\’);

let moved = false;
h.onmousedown = e => {
moved = false;
box.style.transition = \’none\’;
let startY = e.clientY, startTop = box.offsetTop;
const move = e => {
if (Math.abs(e.clientY – startY) > 5) {
moved = true;
box.style.top = (startTop + e.clientY – startY) + \’px\’;
}
};
const up = e => {
box.style.transition = \’opacity 0.3s\’;
side = (e.clientX < window.innerWidth / 2) ? \’left\’ : \’right\’;
box.className = side; GM_setValue(\’gs_side\’, side); GM_setValue(\’gs_top\’, box.offsetTop);
document.removeEventListener(\’mousemove\’, move); document.removeEventListener(\’mouseup\’, up);
};
document.addEventListener(\’mousemove\’, move); document.addEventListener(\’mouseup\’, up);
};

input.onkeydown = e => {
if (e.key === \’Enter\’ && input.value.trim()) {
location.href = `https://www.google.com/search?q=site:${location.hostname} ${encodeURIComponent(input.value.trim())}`;
input.value = \’\’;
}
};
})();