美化必应搜索页面 (重构版 - 使用localStorage)
// ==UserScript==
// @name 究极美化必应搜索页面（毛玻璃）(原生JS重构版)
// @namespace http://tampermonkey.net/
// @version 3.0.3
// @description 美化必应搜索页面 (重构版 - 使用localStorage)
// @author Onion (重构优化版)
// @match *://*.cn.bing.com/*
// @match *://*.bing.com/*
// @match *://*.baidu.com/*
// @icon https://gitee.com/onion-big/gitstore/raw/main/js/jpg/beautify.png
// @license MPL2.0
// @grant GM_notification
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
// ==================== 配置管理模块 ====================
class ConfigManager {
constructor() {
this.storageKey = 'bing_beautify_config';
this.cacheKey = 'bing_beautify_cache';
this.defaultConfig = {
blurLevel: 13,
opacity1: 83, // 渐变色透明度 (0-100)
opacity2: 75, // 图片透明度 (0-100)
backgroundType: 'gradient', // 'gradient' | 'image' | 'custom'
backgroundImage: this.getDefaultImages()[0],
customImageBase64: '',
searchboxStyle: 'transparent' // 'transparent' | 'colorful'
};
this.initConfig();
}
getDefaultImages() {
return [
"https://bing.biturl.top/?resolution=1920&format=image&index=0&mkt=zh-CN",
"https://bing.com/th?id=OHR.NationalDay2022_ZH-CN3861603311_1920x1080.jpg",
"https://bing.com/th?id=OHR.BridgeofSighs_ZH-CN5414607871_1920x1080.jpg",
"https://images4.alphacoders.com/171/171916.jpg",
"https://images5.alphacoders.com/613/613927.jpg",
"https://images2.alphacoders.com/606/606275.jpg",
"https://images2.alphacoders.com/742/742320.png",
"https://dogefs.s3.ladydaily.com/~/source/wallhaven/full/8o/wallhaven-8o2dpj.png?w=2560&fmt=webp"
];
}
initConfig() {
try {
const stored = localStorage.getItem(this.storageKey);
this.config = stored ? { ...this.defaultConfig, ...JSON.parse(stored) } : { ...this.defaultConfig };
this.saveConfig();
} catch (error) {
console.error('配置初始化失败:', error);
this.config = { ...this.defaultConfig };
this.saveConfig();
}
}
get(key) {
return this.config[key];
}
set(key, value) {
this.config[key] = value;
this.saveConfig();
}
update(updates) {
Object.assign(this.config, updates);
this.saveConfig();
}
saveConfig() {
try {
localStorage.setItem(this.storageKey, JSON.stringify(this.config));
} catch (error) {
console.error('配置保存失败:', error);
}
}
reset() {
this.config = { ...this.defaultConfig };
this.saveConfig();
}
// 透明度转换：0-100 转为 0-255 的十六进制
opacityToHex(opacity) {
const value = Math.round((opacity / 100) * 255);
return value.toString(16).padStart(2, '0');
}
// 十六进制转透明度：0-255 转为 0-100
hexToOpacity(hex) {
if (!hex) return 80;
const value = parseInt(hex, 16);
return Math.round((value / 255) * 100);
}
// 图片缓存管理
getCachedImage(url) {
try {
const cache = JSON.parse(localStorage.getItem(this.cacheKey) || '{}');
const cached = cache[url];
// 必应每日壁纸需要每日更新
if (url.includes('bing.biturl.top') && cached) {
const today = new Date().toDateString();
if (cached.date !== today) {
delete cache[url];
localStorage.setItem(this.cacheKey, JSON.stringify(cache));
return null;
}
}
return cached?.data || null;
} catch (error) {
console.error('获取缓存图片失败:', error);
return null;
}
}
setCachedImage(url, base64Data) {
try {
const cache = JSON.parse(localStorage.getItem(this.cacheKey) || '{}');
cache[url] = {
data: base64Data,
date: new Date().toDateString(),
timestamp: Date.now()
};
// 清理过期缓存（30天前）
const expireTime = Date.now() - (30 * 24 * 60 * 60 * 1000);
Object.keys(cache).forEach(key => {
if (cache[key].timestamp < expireTime) {
delete cache[key];
}
});
localStorage.setItem(this.cacheKey, JSON.stringify(cache));
} catch (error) {
console.error('缓存图片失败:', error);
}
}
// 将图片转换为base64存储
async convertImageToBase64(imageUrl) {
try {
// 先检查缓存
const cached = this.getCachedImage(imageUrl);
if (cached) {
console.log('使用缓存图片:', imageUrl);
return cached;
}
console.log('下载并缓存图片:', imageUrl);
const response = await fetch(imageUrl);
const blob = await response.blob();
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => {
const result = reader.result;
// 缓存图片
this.setCachedImage(imageUrl, result);
resolve(result);
};
reader.onerror = reject;
reader.readAsDataURL(blob);
});
} catch (error) {
console.error('图片转换base64失败:', error);
return null;
}
}
}
// ==================== 样式管理模块 ====================
class StyleManager {
constructor(config) {
this.config = config;
this.injectedStyles = new Set();
}
injectGlobalStyles() {
const css = `
@keyframes fadeIn {
0% { opacity: 0; transform: translateY(-10px); }
100% { opacity: 1; transform: translateY(0); }
}
/* 设置框样式 - 强制最高优先级 */
.beautify-settings {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: min(520px, 95vw) !important;
max-height: 85vh !important;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(20px) !important;
border-radius: 15px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
z-index: 999999999 !important;
padding: 0 !important;
margin: 0 !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
display: none !important;
animation: fadeIn 0.3s ease-out !important;
border: 2px solid rgba(76, 175, 80, 0.3) !important;
overflow: hidden !important;
pointer-events: auto !important;
}
.beautify-settings.show {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.beautify-settings-header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 15px 20px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
cursor: move !important;
background: rgba(76, 175, 80, 0.1) !important;
border-radius: 15px 15px 0 0 !important;
flex-shrink: 0 !important;
}
.beautify-settings-title {
font-size: 16px !important;
font-weight: 600 !important;
color: #333 !important;
margin: 0 !important;
white-space: nowrap !important;
}
.beautify-close-btn {
background: rgba(255, 0, 0, 0.1) !important;
border: none !important;
font-size: 20px !important;
cursor: pointer !important;
color: #666 !important;
padding: 5px !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
transition: all 0.2s ease !important;
flex-shrink: 0 !important;
}
.beautify-close-btn:hover {
background: rgba(255, 0, 0, 0.2) !important;
color: #ff0000 !important;
transform: scale(1.1) !important;
}
.beautify-settings-content {
padding: 20px !important;
max-height: calc(85vh - 120px) !important;
overflow-y: auto !important;
background: rgba(255, 255, 255, 0.95) !important;
border-radius: 0 0 15px 15px !important;
}
.beautify-form-group {
margin-bottom: 18px !important;
}
.beautify-form-group:last-child {
margin-bottom: 0 !important;
}
.beautify-label {
display: block !important;
margin-bottom: 8px !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #555 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.beautify-input, .beautify-select {
width: 100% !important;
padding: 10px 12px !important;
border: 2px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 8px !important;
font-size: 14px !important;
background: white !important;
transition: border-color 0.2s ease !important;
box-sizing: border-box !important;
}
.beautify-input:focus, .beautify-select:focus {
outline: none !important;
border-color: #4CAF50 !important;
}
/* 滑块样式 */
.beautify-slider-container {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.beautify-slider {
flex: 1 !important;
height: 6px !important;
background: #ddd !important;
border-radius: 3px !important;
outline: none !important;
border: none !important;
}
.beautify-slider::-webkit-slider-thumb {
appearance: none !important;
width: 18px !important;
height: 18px !important;
background: #4CAF50 !important;
border-radius: 50% !important;
cursor: pointer !important;
}
.beautify-slider::-moz-range-thumb {
width: 18px !important;
height: 18px !important;
background: #4CAF50 !important;
border-radius: 50% !important;
cursor: pointer !important;
border: none !important;
}
.beautify-value-display {
min-width: 45px !important;
text-align: right !important;
font-size: 12px !important;
color: #666 !important;
background: rgba(0, 0, 0, 0.05) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
}
.beautify-button-group {
display: flex !important;
gap: 10px !important;
margin-top: 20px !important;
padding-top: 15px !important;
border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.beautify-btn {
flex: 1 !important;
padding: 10px 16px !important;
border: none !important;
border-radius: 8px !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
.beautify-btn-primary {
background: #4CAF50 !important;
color: white !important;
}
.beautify-btn-primary:hover {
background: #45a049 !important;
transform: translateY(-1px) !important;
}
.beautify-btn-secondary {
background: #f5f5f5 !important;
color: #666 !important;
}
.beautify-btn-secondary:hover {
background: #e5e5e5 !important;
transform: translateY(-1px) !important;
}
/* 搜索框控制按钮 */
.beautify-control-buttons {
display: flex !important;
gap: 5px !important;
}
.beautify-control-btn {
padding: 8px 12px !important;
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-radius: 6px !important;
font-size: 12px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
color: #444 !important;
backdrop-filter: blur(10px) !important;
}
.beautify-control-btn:hover {
background: rgba(255, 255, 255, 1) !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.beautify-control-btn.active {
background: #4CAF50 !important;
color: white !important;
}
/* 透明化处理 */
.pagereco_CB, .pagereco_CBImageCard, .pagereco_CBTextCard,
#tabcontrol_8_156412_navr, #lMapContainer, .b_algoSlug .algoSlug_icon,
#b_PagAboveFooter, .tta_incell, .tta_outcell, #tta_output_ta {
background: transparent !important;
border: none !important;
}
/* Header 统一背景 */
#b_header {
border-bottom: none !important;
background: transparent !important;
}
.b_searchboxForm {
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(10px) !important;
border-radius: 25px !important;
}
/* 结果框样式 */
.b_algo, .b_ans {
border-radius: 10px !important;
backdrop-filter: blur(${this.config.get('blurLevel')}px) !important;
margin-bottom: 15px !important;
transition: all 0.3s ease !important;
}
.b_algo:hover, .b_ans:hover {
transform: translateY(-2px) !important;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
}
/* 文件上传样式 */
.beautify-file-upload {
position: relative !important;
display: inline-block !important;
width: 100% !important;
}
.beautify-file-input {
position: absolute !important;
opacity: 0 !important;
width: 100% !important;
height: 100% !important;
cursor: pointer !important;
}
.beautify-file-label {
display: block !important;
padding: 12px 15px !important;
border: 2px dashed rgba(0, 0, 0, 0.2) !important;
border-radius: 8px !important;
text-align: center !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
background: rgba(0, 0, 0, 0.02) !important;
font-size: 13px !important;
}
.beautify-file-label:hover {
border-color: #4CAF50 !important;
background: rgba(76, 175, 80, 0.05) !important;
}
/* 遮罩层 */
.beautify-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.3) !important;
z-index: 999999998 !important;
display: none !important;
}
.beautify-overlay.show {
display: block !important;
}
`;
this.injectCSS('global-styles', css);
}
injectCSS(id, css) {
if (this.injectedStyles.has(id)) return;
const style = document.createElement('style');
style.id = id;
style.textContent = css;
(document.head || document.documentElement).appendChild(style);
this.injectedStyles.add(id);
}
updateResultBoxStyles() {
const opacity1 = this.config.get('opacity1');
const opacity2 = this.config.get('opacity2');
const opacity = this.config.get('backgroundType') === 'image' ? opacity2 : opacity1;
const alpha = opacity / 100;
const elements = document.querySelectorAll('.b_algo, .b_ans');
elements.forEach(el => {
el.style.backgroundColor = `rgba(255, 255, 255, ${alpha})`;
el.style.backdropFilter = `blur(${this.config.get('blurLevel')}px)`;
});
}
updateSearchboxStyle() {
const searchboxForm = document.querySelector('.b_searchboxForm');
if (!searchboxForm) return;
const style = this.config.get('searchboxStyle');
const opacity2 = this.config.get('opacity2') / 100;
if (style === 'transparent') {
searchboxForm.style.background = `rgba(255, 255, 255, ${opacity2})`;
searchboxForm.style.backgroundImage = 'none';
} else if (style === 'colorful') {
searchboxForm.style.backgroundImage = 'linear-gradient(to right, rgb(255, 221, 238), skyblue)';
searchboxForm.style.background = 'none';
}
}
async updateHeaderBackground() {
// 统一header背景
const header = document.getElementById('b_header');
if (!header) return;
const backgroundType = this.config.get('backgroundType');
let backgroundImage = '';
switch (backgroundType) {
case 'gradient':
backgroundImage = 'linear-gradient(to right, #FFDDEE, skyblue)';
break;
case 'image':
const imageUrl = this.config.get('backgroundImage');
const cachedImage = await this.config.convertImageToBase64(imageUrl);
backgroundImage = `url(${cachedImage || imageUrl})`;
break;
case 'custom':
const base64Image = this.config.get('customImageBase64');
if (base64Image) {
backgroundImage = `url(${base64Image})`;
} else {
backgroundImage = 'linear-gradient(to right, #FFDDEE, skyblue)';
}
break;
}
header.style.background = backgroundImage;
header.style.backgroundSize = 'cover';
header.style.backgroundPosition = 'center';
header.style.backgroundAttachment = 'fixed';
}
}
// ==================== 背景管理模块 ====================
class BackgroundManager {
constructor(config) {
this.config = config;
}
async applyBackground() {
const container = document.getElementById('b_content') || document.documentElement;
const backgroundType = this.config.get('backgroundType');
// 清除之前的背景设置
container.style.backgroundImage = '';
container.style.backgroundColor = '';
document.documentElement.style.background = '';
switch (backgroundType) {
case 'gradient':
this.applyGradientBackground(container);
break;
case 'image':
await this.applyImageBackground(container);
break;
case 'custom':
this.applyCustomBackground(container);
break;
}
}
applyGradientBackground(container) {
container.style.backgroundImage = 'linear-gradient(to right, #FFDDEE, skyblue)';
container.style.backgroundAttachment = 'fixed';
}
async applyImageBackground(container) {
const imageUrl = this.config.get('backgroundImage');
// 尝试使用缓存的base64图片
const cachedImage = await this.config.convertImageToBase64(imageUrl);
if (cachedImage) {
container.style.background = `url(${cachedImage}) center/cover fixed`;
} else {
// 回退到直接URL
container.style.background = `url(${imageUrl}) center/cover fixed`;
}
}
applyCustomBackground(container) {
const base64Image = this.config.get('customImageBase64');
if (base64Image) {
container.style.background = `url(${base64Image}) center/cover fixed`;
} else {
this.applyGradientBackground(container); // 回退到渐变色
}
}
// 为百度设置特殊背景
applyBaiduBackground() {
const wrapper = document.getElementById('wrapper_wrapper');
if (wrapper) {
const imageUrl = this.config.get('backgroundImage');
wrapper.style.background = `url(${imageUrl}) center/cover fixed`;
}
}
}
// ==================== UI管理模块 ====================
class UIManager {
constructor(config, styleManager, backgroundManager) {
this.config = config;
this.styleManager = styleManager;
this.backgroundManager = backgroundManager;
this.settingsPanel = null;
this.overlay = null;
this.dragData = { isDragging: false, offset: { x: 0, y: 0 } };
}
createControlButtons() {
const scopebar = document.querySelector('.b_scopebar');
if (!scopebar || !scopebar.children[0]) return;
const controlContainer = document.createElement('div');
controlContainer.className = 'beautify-control-buttons';
const buttons = [
{ text: '透明', action: () => this.setSearchboxStyle('transparent') },
{ text: '炫彩', action: () => this.setSearchboxStyle('colorful') },
{ text: '渐变', action: () => this.setBackgroundType('gradient') },
{ text: '图片', action: () => this.setBackgroundType('image') }
];
buttons.forEach(btn => {
const button = document.createElement('button');
button.className = 'beautify-control-btn';
button.textContent = btn.text;
button.addEventListener('click', btn.action);
controlContainer.appendChild(button);
});
// 设置按钮
const settingsBtn = document.createElement('button');
settingsBtn.className = 'beautify-control-btn';
settingsBtn.textContent = '⚙️';
settingsBtn.style.fontSize = '16px';
settingsBtn.addEventListener('click', () => {
console.log('设置按钮被点击了');
this.showSettingsPanel();
});
const headerNav = document.getElementById('id_h');
if (headerNav) {
headerNav.appendChild(settingsBtn);
} else {
// 如果找不到id_h，就添加到控制按钮组里
controlContainer.appendChild(settingsBtn);
}
scopebar.children[0].appendChild(controlContainer);
}
async setSearchboxStyle(style) {
this.config.set('searchboxStyle', style);
this.styleManager.updateSearchboxStyle();
this.updateActiveButtons();
}
async setBackgroundType(type) {
this.config.set('backgroundType', type);
await this.backgroundManager.applyBackground();
await this.styleManager.updateHeaderBackground();
this.styleManager.updateResultBoxStyles();
this.updateActiveButtons();
}
updateActiveButtons() {
// 更新按钮激活状态
document.querySelectorAll('.beautify-control-btn').forEach(btn => {
btn.classList.remove('active');
});
const searchboxStyle = this.config.get('searchboxStyle');
const backgroundType = this.config.get('backgroundType');
document.querySelectorAll('.beautify-control-btn').forEach(btn => {
if ((btn.textContent === '透明' && searchboxStyle === 'transparent') ||
(btn.textContent === '炫彩' && searchboxStyle === 'colorful') ||
(btn.textContent === '渐变' && backgroundType === 'gradient') ||
(btn.textContent === '图片' && backgroundType === 'image')) {
btn.classList.add('active');
}
});
}
createOverlay() {
if (this.overlay) return;
this.overlay = document.createElement('div');
this.overlay.className = 'beautify-overlay';
this.overlay.addEventListener('click', () => this.hideSettingsPanel());
document.body.appendChild(this.overlay);
}
createSettingsPanel() {
console.log('创建设置面板');
if (this.settingsPanel) {
console.log('设置面板已存在');
return;
}
// 创建遮罩层
this.createOverlay();
const panel = document.createElement('div');
panel.className = 'beautify-settings';
panel.innerHTML = `
<div class="beautify-settings-header">
<h3 class="beautify-settings-title">🎨 美化设置</h3>
<button class="beautify-close-btn" type="button">×</button>
</div>
<div class="beautify-settings-content">
<div class="beautify-form-group">
<label class="beautify-label">模糊度 (0-100)</label>
<div class="beautify-slider-container">
<input type="range" class="beautify-input beautify-slider" id="blur-slider"
min="0" max="100" value="${this.config.get('blurLevel')}">
<span class="beautify-value-display" id="blur-value">${this.config.get('blurLevel')}px</span>
</div>
</div>
<div class="beautify-form-group">
<label class="beautify-label">渐变色透明度 (0-100)</label>
<div class="beautify-slider-container">
<input type="range" class="beautify-input beautify-slider" id="opacity1-slider"
min="0" max="100" value="${this.config.get('opacity1')}">
<span class="beautify-value-display" id="opacity1-value">${this.config.get('opacity1')}%</span>
</div>
</div>
<div class="beautify-form-group">
<label class="beautify-label">图片背景透明度 (0-100)</label>
<div class="beautify-slider-container">
<input type="range" class="beautify-input beautify-slider" id="opacity2-slider"
min="0" max="100" value="${this.config.get('opacity2')}">
<span class="beautify-value-display" id="opacity2-value">${this.config.get('opacity2')}%</span>
</div>
</div>
<div class="beautify-form-group">
<label class="beautify-label">背景类型</label>
<select class="beautify-select" id="background-type">
<option value="gradient" ${this.config.get('backgroundType') === 'gradient' ? 'selected' : ''}>渐变色</option>
<option value="image" ${this.config.get('backgroundType') === 'image' ? 'selected' : ''}>预设图片</option>
<option value="custom" ${this.config.get('backgroundType') === 'custom' ? 'selected' : ''}>自定义图片</option>
</select>
</div>
<div class="beautify-form-group">
<label class="beautify-label">预设图片</label>
<select class="beautify-select" id="background-image">
${this.createImageOptions()}
</select>
</div>
<div class="beautify-form-group">
<label class="beautify-label">上传自定义图片</label>
<div class="beautify-file-upload">
<input type="file" class="beautify-file-input" id="custom-image" accept="image/*">
<label for="custom-image" class="beautify-file-label">
📷 点击选择图片文件
</label>
</div>
</div>
<div class="beautify-button-group">
<button class="beautify-btn beautify-btn-secondary" id="reset-btn">🔄 重置</button>
<button class="beautify-btn beautify-btn-primary" id="save-btn">💾 保存</button>
</div>
</div>
`;
document.body.appendChild(panel);
this.settingsPanel = panel;
console.log('设置面板已添加到DOM');
this.setupPanelEvents();
}
createImageOptions() {
const images = this.config.getDefaultImages();
return images.map((url, index) => {
const selected = url === this.config.get('backgroundImage') ? 'selected' : '';
const label = index === 0 ? '必应每日壁纸' : `预设图片 ${index}`;
return `<option value="${url}" ${selected}>${label}</option>`;
}).join('');
}
setupPanelEvents() {
const panel = this.settingsPanel;
// 关闭按钮
panel.querySelector('.beautify-close-btn').addEventListener('click', () => {
this.hideSettingsPanel();
});
// 拖拽功能
const header = panel.querySelector('.beautify-settings-header');
this.setupDragEvents(header, panel);
// 模糊度滑块
const blurSlider = panel.querySelector('#blur-slider');
const blurValue = panel.querySelector('#blur-value');
blurSlider.addEventListener('input', (e) => {
const value = e.target.value;
blurValue.textContent = `${value}px`;
});
// 透明度1滑块
const opacity1Slider = panel.querySelector('#opacity1-slider');
const opacity1Value = panel.querySelector('#opacity1-value');
opacity1Slider.addEventListener('input', (e) => {
const value = e.target.value;
opacity1Value.textContent = `${value}%`;
});
// 透明度2滑块
const opacity2Slider = panel.querySelector('#opacity2-slider');
const opacity2Value = panel.querySelector('#opacity2-value');
opacity2Slider.addEventListener('input', (e) => {
const value = e.target.value;
opacity2Value.textContent = `${value}%`;
});
// 自定义图片上传
panel.querySelector('#custom-image').addEventListener('change', (e) => {
this.handleImageUpload(e.target.files[0]);
});
// 保存按钮
panel.querySelector('#save-btn').addEventListener('click', () => {
this.saveSettings();
});
// 重置按钮
panel.querySelector('#reset-btn').addEventListener('click', () => {
this.resetSettings();
});
}
setupDragEvents(handle, element) {
handle.addEventListener('mousedown', (e) => {
this.dragData.isDragging = true;
this.dragData.offset.x = e.clientX - element.offsetLeft;
this.dragData.offset.y = e.clientY - element.offsetTop;
handle.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (e) => {
if (!this.dragData.isDragging) return;
const x = e.clientX - this.dragData.offset.x;
const y = e.clientY - this.dragData.offset.y;
element.style.left = `${x}px`;
element.style.top = `${y}px`;
element.style.transform = 'none';
});
document.addEventListener('mouseup', () => {
this.dragData.isDragging = false;
handle.style.cursor = 'move';
});
}
async handleImageUpload(file) {
if (!file) return;
try {
const base64 = await this.fileToBase64(file);
this.config.set('customImageBase64', base64);
GM_notification({ text: '图片上传成功！', timeout: 2000 });
} catch (error) {
console.error('图片上传失败:', error);
GM_notification({ text: '图片上传失败，请重试', timeout: 3000 });
}
}
fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
async saveSettings() {
const panel = this.settingsPanel;
const updates = {
blurLevel: parseInt(panel.querySelector('#blur-slider').value),
opacity1: parseInt(panel.querySelector('#opacity1-slider').value),
opacity2: parseInt(panel.querySelector('#opacity2-slider').value),
backgroundType: panel.querySelector('#background-type').value,
backgroundImage: panel.querySelector('#background-image').value
};
this.config.update(updates);
await this.backgroundManager.applyBackground();
await this.styleManager.updateHeaderBackground();
this.styleManager.updateResultBoxStyles();
this.styleManager.updateSearchboxStyle();
this.updateActiveButtons();
GM_notification({ text: '设置已保存！', timeout: 2000 });
this.hideSettingsPanel();
}
async resetSettings() {
this.config.reset();
await this.backgroundManager.applyBackground();
await this.styleManager.updateHeaderBackground();
this.styleManager.updateResultBoxStyles();
this.styleManager.updateSearchboxStyle();
this.updateActiveButtons();
GM_notification({ text: '设置已重置为默认值！', timeout: 2000 });
this.hideSettingsPanel();
}
showSettingsPanel() {
console.log('显示设置面板');
if (!this.settingsPanel) {
this.createSettingsPanel();
}
// 强制显示
this.overlay.classList.add('show');
this.settingsPanel.classList.add('show');
this.settingsPanel.style.display = 'block';
this.settingsPanel.style.visibility = 'visible';
this.settingsPanel.style.opacity = '1';
this.settingsPanel.style.zIndex = '999999999';
console.log('设置面板显示状态:', this.settingsPanel.style.display);
}
hideSettingsPanel() {
if (this.settingsPanel) {
this.settingsPanel.classList.remove('show');
this.settingsPanel.style.display = 'none';
}
if (this.overlay) {
this.overlay.classList.remove('show');
}
}
}
// ==================== 增强功能模块 ====================
class EnhancementManager {
constructor(config) {
this.config = config;
}
enhanceSearchBox() {
const searchBox = document.querySelector('.b_searchbox');
if (!searchBox) return;
// 搜索框获得焦点时扩展宽度
searchBox.addEventListener('focus', () => {
searchBox.style.transition = 'all 0.3s ease';
searchBox.style.width = '600px';
});
// 点击页面其他地方时恢复宽度
document.addEventListener('click', (e) => {
if (!e.target.closest('.b_searchboxForm')) {
searchBox.style.width = '';
}
});
}
enhanceResults() {
// 结果框悬停效果已在CSS中处理
this.fixResultOverflow();
this.cleanupFooter();
}
fixResultOverflow() {
// 修复相关搜索框宽度
const relatedBox = document.querySelector('.b_rrsr .b_vlist2col');
if (relatedBox?.children[0]?.children[1]) {
Array.from(relatedBox.children[0].children[1].children)
.forEach(item => item.style.width = '45%');
}
// 修复其他溢出问题
const brsv3 = document.getElementById('brsv3');
if (brsv3?.children[1]) {
Array.from(brsv3.children[1].children)
.forEach(item => item.style.width = '45%');
}
}
cleanupFooter() {
const footer = document.getElementById('b_footer');
if (footer) {
footer.style.background = 'rgba(0, 0, 0, 0.8)';
footer.style.backdropFilter = 'blur(10px)';
}
const mfaSrch = document.getElementById('mfa_srch');
if (mfaSrch) {
mfaSrch.style.backdropFilter = 'blur(10px)';
mfaSrch.style.background = 'transparent';
}
}
setupKeyboardShortcuts() {
document.addEventListener('keydown', (e) => {
// Ctrl + / 打开设置
if (e.ctrlKey && e.code === 'Slash') {
e.preventDefault();
const settingsBtn = document.querySelector('.beautify-control-btn[textContent="⚙️"]');
if (settingsBtn) settingsBtn.click();
}
});
}
cleanupOtherElements() {
// 清理其他元素的背景
const selectors = [
'.qna_algo', '.slide', '.nws_cwrp', '.mc_vhvc_th', '.na_ccw'
];
selectors.forEach(selector => {
document.querySelectorAll(selector).forEach(el => {
el.style.background = 'transparent';
if (el.children[0]) {
el.children[0].style.background = 'transparent';
}
});
});
}
}
// ==================== 主应用类 ====================
class BingBeautifier {
constructor() {
this.config = new ConfigManager();
this.styleManager = new StyleManager(this.config);
this.backgroundManager = new BackgroundManager(this.config);
this.uiManager = new UIManager(this.config, this.styleManager, this.backgroundManager);
this.enhancementManager = new EnhancementManager(this.config);
}
init() {
console.log('初始化美化脚本');
// 根据不同域名执行不同逻辑
if (this.isBingSearch()) {
this.initBing();
} else if (this.isBaidu()) {
this.initBaidu();
}
}
isBingSearch() {
return window.location.href.includes('bing.com/search');
}
isBaidu() {
return window.location.href.includes('baidu.com');
}
async initBing() {
console.log('初始化必应美化');
// 立即注入基础样式
this.styleManager.injectGlobalStyles();
// 使用async/await优化异步操作
const initializeUI = async () => {
// 应用背景
await this.backgroundManager.applyBackground();
// 更新header背景
await this.styleManager.updateHeaderBackground();
// 更新样式
this.styleManager.updateResultBoxStyles();
this.styleManager.updateSearchboxStyle();
// 增强功能
this.enhancementManager.enhanceSearchBox();
this.enhancementManager.enhanceResults();
this.enhancementManager.setupKeyboardShortcuts();
this.enhancementManager.cleanupOtherElements();
};
// 检查DOM是否准备好
const checkAndInit = async () => {
const scopebar = document.querySelector('.b_scopebar');
if (scopebar) {
// 创建UI控件
this.uiManager.createControlButtons();
this.uiManager.updateActiveButtons();
await initializeUI();
console.log('必应搜索美化已应用');
} else {
// 如果DOM还没准备好，稍后再试
setTimeout(checkAndInit, 100);
}
};
// 立即执行基础初始化
await initializeUI();
// 检查并创建UI控件
checkAndInit();
}
initBaidu() {
// 简单的百度页面美化
this.backgroundManager.applyBaiduBackground();
console.log('百度页面美化已应用');
}
}
// ==================== 初始化 ====================
function main() {
try {
const beautifier = new BingBeautifier();
beautifier.init();
} catch (error) {
console.error('美化脚本初始化失败:', error);
}
}
// 等待DOM加载完成
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', main);
} else {
main();
}
// 错误处理
window.addEventListener('error', (e) => {
console.error('脚本运行时错误:', e.error);
}, true);
})();