Search Align Fucker (simple impl) - Search Results Centering Script

A simple implementation of moving search result to page center or anywhere for both Google and Bing. support new bing chat also . (the resize bar is hiddenn on left)

< Feedback on Search Align Fucker (simple impl) - Search Results Centering Script

Review: Good - script works

§
Posted: 2024-11-28
Edited: 2024-11-28

(async function () {
// CSS 样式生成函数
let css = (selector) => {
let css = "";
css += "#resizerbar:hover {"
css += "box-shadow: 0 0 1px;"
css += "}"
css += "#resizerbar {"
css += "position: fixed; left: var(--content-shift-size);"
css += "width: 10px; height: 100vh;"
css += "cursor: col-resize; z-index: 125;"
css += "}"
css += selector + " {"
css += "padding-left: var(--content-shift-size);"
css += "max-width: 100%; /* 设置更宽的结果容器 */"
css += "margin: auto; /* 居中对齐 */"
css += "}"
// 合并的无边框样式
css += `
#b_content aside {
display: none; /* 隐藏侧边栏 */
}
#b_content #b_results {
width: 75vw; /* 搜索结果宽度更大 */
display: flex;
flex-direction: column;
align-items: center;
max-width: 1200px; /* 设置最大宽度 */
}
#b_content #b_pole {
width: 75vw; /* 主内容区域宽度 */
max-width: 1200px;
margin: 0 auto; /* 居中对齐 */
}
body #b_content {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 30px 0 0 0; /* 无额外边框 */
padding: 0; /* 无额外内边距 */
}
#b_content #b_results > li:not(#mfa_root) {
width: 100%; /* 搜索结果宽度占满容器 */
}
`;
return css;
};

// 获取或生成动态宽度值
let getSize = (key, defVal) => GM.getValue(key + "_search_page_shift_size", defVal || "30rem"); // 默认更小边距
let currentPage = location.hostname.includes("google"); // 当前页面是否为 Google
currentPage = {
key: currentPage ? "google" : "bing",
size: await (currentPage ? getSize("google", "20rem") : getSize("bing", "25rem")), // 设置默认宽度
cssSelector: currentPage
? "#hdtb-msb,#result-stats,#rcnt,#tsf,.aAbqZ"
: "#b_header,#b_content,#b_sydConvCont", // 选择器
};

// 如果宽度是数字,补充 px 单位
if (!isNaN(currentPage.size)) {
currentPage.size += "px";
}

// 生成完整 CSS 样式
let generatedCSS = "body{--content-shift-size:" + currentPage.size + "}" + css(currentPage.cssSelector);
if (currentPage.key === "bing") {
generatedCSS += "#b_content {margin-left: 160px;}";
}

// 插入样式到页面
let styleElement = document.createElement("style");
styleElement.innerText = generatedCSS;
document.head.appendChild(styleElement);

// 页面加载后添加拖动条
window.onload = () => {
const resizerBar = document.createElement("span");
resizerBar.id = "resizerbar";

resizerBar.onmouseup = () => {
resizerBar.isDragging = false;
};
resizerBar.onmousedown = () => {
resizerBar.isDragging = true;
};

document.body.onmousemove = (event) => {
if (resizerBar.isDragging) {
let shift = event.pageX + "px";
resizerBar.style.left = shift;
GM.setValue(currentPage.key + "_search_page_shift_size", shift);
document.body.style.setProperty("--content-shift-size", shift);
}
};

document.body.insertBefore(resizerBar, document.body.firstChild);
};
})();

更宽更好看

Post reply

Sign in to post a reply.