扫一扫
喵，在使用豆包时，总是有时的代码又长又臭，想翻之前的记录又容易翻过去
so
开发了个小插件，可以快捷切换消息和对话
流程
如果没有油猴可以去安装下：油猴官网 https://www.tampermonkey.net/
1.点击油猴的添加脚本
2.删除模板粘贴我的代码
3.Ctrl+S保存，然后重新打开豆包网页版就可以使用啦
☆*: .｡. o(≧▽≦)o .｡.:*☆
源代码：
// ==UserScript==
// @name 豆包对话导航4.6
// @namespace http://tampermonkey.net/
// @version 2026-01-05
// @description 在豆包网页版中快速跳转到上一个或下一个对话
// @author You
// @match https://www.doubao.com/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
/**
* 豆包对话导航脚本
* 提供键盘快捷键和UI按钮，用于在豆包网页版中快速跳转到上一个或下一个对话
*/
(function () {
'use strict';
// 对话列表选择器
const CONVERSATION_LIST_SELECTOR = '[data-testid="sidebar-section-item"] + div';
const CONVERSATION_ITEM_SELECTOR = '[data-testid="chat_list_thread_item"]';
const ACTIVE_CONVERSATION_SELECTOR = '[data-testid="chat_list_thread_item"][aria-current="page"]';
const CONVERSATION_LIST_WRAPPER_SELECTOR = '.flow-scrollbar';
const CONVERSATION_LIST_TESTID_SELECTOR = '[data-testid="sidebar-section-item"]';
// 消息选择器（用于对话内消息导航）
const MESSAGE_BLOCK_SELECTOR = '.message-block-container-PggqdK';
const MESSAGE_TESTID_SELECTOR = '[data-testid="message-block-container"]';
const MESSAGE_ID_ATTRIBUTE = 'data-message-id';
/**
* 获取当前激活的对话项
* @returns {HTMLElement|null} 当前激活的对话项
*/
function getActiveConversation() {
// 尝试使用aria-current="page"属性查找激活的对话
let activeConversation = document.querySelector(ACTIVE_CONVERSATION_SELECTOR);
// 如果没有找到，尝试通过特殊的背景色或其他视觉特征查找
if (!activeConversation) {
const conversations = getAllConversations();
if (conversations.length > 0) {
// 遍历所有对话，查找具有特殊样式的对话项
conversations.forEach(conversation => {
if (conversation.classList.contains('e2e-test-active')) {
activeConversation = conversation;
}
});
}
}
return activeConversation;
}
/**
* 获取所有对话项
* @returns {NodeList|null} 所有对话项的集合
*/
function getAllConversations() {
return document.querySelectorAll(CONVERSATION_ITEM_SELECTOR);
}
/**
* 跳转到指定的对话项
* @param {HTMLElement} conversationItem 对话项元素
*/
function jumpToConversation(conversationItem) {
if (!conversationItem) {
console.error('豆包对话导航 - 对话项元素不存在，无法跳转');
return;
}
console.log('豆包对话导航 - 尝试跳转到对话项:', conversationItem);
try {
// 先滚动到对话项使其可见
conversationItem.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
// 延迟更长时间确保元素可见和交互可用
setTimeout(() => {
try {
// 先检查元素是否可见
const rect = conversationItem.getBoundingClientRect();
const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
console.log('豆包对话导航 - 对话项可见性:', isVisible, rect);
// 确保元素在视口中
if (!isVisible) {
console.log('豆包对话导航 - 对话项不可见，再次滚动到可见区域');
conversationItem.scrollIntoView({
behavior: 'instant',
block: 'center'
});
}
// 尝试多种点击方式
console.log('豆包对话导航 - 尝试直接点击对话项');
if (conversationItem.click) {
// 先获取点击位置
const clickX = rect.left + rect.width / 2;
const clickY = rect.top + rect.height / 2;
// 直接点击
conversationItem.click();
console.log('豆包对话导航 - 直接点击成功');
}
// 尝试点击对话项的子元素（如果有的话）
else if (conversationItem.firstElementChild) {
console.log('豆包对话导航 - 尝试点击对话项的子元素');
conversationItem.firstElementChild.click();
} else {
console.log('豆包对话导航 - 直接点击不可用，尝试使用dispatchEvent');
// 如果直接点击失败，尝试使用dispatchEvent触发点击事件
const clickEvent = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2,
screenX: window.screenX + rect.left + rect.width / 2,
screenY: window.screenY + rect.top + rect.height / 2,
button: 0,
buttons: 1,
mozInputSource: 1,
webkitForce: 1,
pointerId: 1,
pointerType: 'mouse'
});
const result = conversationItem.dispatchEvent(clickEvent);
console.log('豆包对话导航 - dispatchEvent点击结果:', result);
}
// 额外尝试触发mouseover和mousedown事件，模拟真实点击过程
setTimeout(() => {
console.log('豆包对话导航 - 尝试模拟完整的鼠标事件序列');
const mouseoverEvent = new MouseEvent('mouseover', {
bubbles: true,
cancelable: true,
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2
});
const mousedownEvent = new MouseEvent('mousedown', {
bubbles: true,
cancelable: true,
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2,
button: 0,
buttons: 1
});
const mouseupEvent = new MouseEvent('mouseup', {
bubbles: true,
cancelable: true,
clientX: rect.left + rect.width / 2,
clientY: rect.top + rect.height / 2,
button: 0,
buttons: 0
});
conversationItem.dispatchEvent(mouseoverEvent);
conversationItem.dispatchEvent(mousedownEvent);
conversationItem.dispatchEvent(mouseupEvent);
}, 50);
} catch (clickError) {
console.error('豆包对话导航 - 点击对话项时出错:', clickError);
// 最后的尝试：如果是链接元素，直接跳转
if (conversationItem.tagName === 'A' && conversationItem.href) {
console.log('豆包对话导航 - 尝试直接跳转到链接:', conversationItem.href);
window.location.href = conversationItem.href;
}
}
}, 300); // 增加延迟时间
} catch (error) {
console.error('豆包对话导航 - 跳转对话时出错:', error);
}
}
/**
* 跳转到上一个对话
*/
function jumpToPreviousConversation() {
const active = getActiveConversation();
const allConversations = getAllConversations();
if (!active || !allConversations.length) return;
const conversations = Array.from(allConversations);
const activeIndex = conversations.indexOf(active);
if (activeIndex > 0) {
jumpToConversation(conversations[activeIndex - 1]);
}
}
/**
* 跳转到下一个对话
*/
function jumpToNextConversation() {
const active = getActiveConversation();
const allConversations = getAllConversations();
if (!active || !allConversations.length) return;
const conversations = Array.from(allConversations);
const activeIndex = conversations.indexOf(active);
if (activeIndex < conversations.length - 1) {
jumpToConversation(conversations[activeIndex + 1]);
}
}
/**
* 获取当前对话中的所有消息块
* @returns {NodeList|null} 所有消息块的集合
*/
function getAllMessages() {
let messages = document.querySelectorAll(MESSAGE_BLOCK_SELECTOR);
// 如果使用class选择器没有找到，尝试使用data-testid选择器
if (!messages.length) {
messages = document.querySelectorAll(MESSAGE_TESTID_SELECTOR);
}
return messages;
}
/**
* 获取当前可见的消息（最接近视口中心的消息）
* @returns {HTMLElement|null} 当前可见的消息元素
*/
function getCurrentVisibleMessage() {
const messages = getAllMessages();
if (!messages.length) return null;
// 获取视口中心位置
const viewportCenter = window.innerHeight / 2;
let currentMessage = null;
let minDistance = Infinity;
// 遍历所有消息，找到最接近视口中心的消息
messages.forEach(message => {
const rect = message.getBoundingClientRect();
const messageCenter = rect.top + rect.height / 2;
const distance = Math.abs(messageCenter - viewportCenter);
// 如果消息完全在视口外，跳过
if (rect.bottom < 0 || rect.top > window.innerHeight) {
return;
}
// 更新最接近中心的消息
if (distance < minDistance) {
minDistance = distance;
currentMessage = message;
}
});
return currentMessage;
}
/**
* 跳转到上一条消息
*/
function jumpToPreviousMessage() {
const messages = Array.from(getAllMessages());
if (!messages.length) return;
const currentMessage = getCurrentVisibleMessage();
if (!currentMessage) return;
const currentIndex = messages.indexOf(currentMessage);
if (currentIndex > 0) {
// 平滑滚动到上一条消息，使其居中显示
messages[currentIndex - 1].scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
}
/**
* 跳转到下一条消息
*/
function jumpToNextMessage() {
const messages = Array.from(getAllMessages());
if (!messages.length) return;
const currentMessage = getCurrentVisibleMessage();
if (!currentMessage) return;
const currentIndex = messages.indexOf(currentMessage);
if (currentIndex < messages.length - 1) {
// 平滑滚动到下一条消息，使其居中显示
messages[currentIndex + 1].scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
}
/**
* 创建导航UI按钮
*/
function createNavigationButtons() {
console.log('豆包对话导航 - 开始创建导航UI按钮');
// 检查是否已存在按钮
let container = document.getElementById('doubao-nav-buttons');
if (container) {
console.log('豆包对话导航 - 导航UI按钮已存在，不再创建');
return;
}
// 确保document.body已经存在
if (!document.body) {
console.error('豆包对话导航 - document.body不存在，无法添加按钮，将重试');
// 稍后重试，增加重试次数
setTimeout(createNavigationButtons, 500);
return;
}
// 创建按钮容器
container = document.createElement('div');
container.id = 'doubao-nav-buttons';
container.style.cssText = `
position: fixed;
top: 50%;
right: 20px;
transform: translateY(-50%);
z-index: 99999; /* 增加z-index确保在最上层 */
display: flex;
flex-direction: column;
gap: 10px;
background-color: white;
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 增强阴影 */
border: 2px solid #52c41a; /* 增加边框，提高可见性 */
visibility: visible !important;
opacity: 1 !important;
`;
// 创建上一个对话按钮
const prevConversationButton = document.createElement('button');
prevConversationButton.textContent = '← 上一个对话';
prevConversationButton.onclick = jumpToPreviousConversation;
prevConversationButton.style.cssText = `
padding: 8px 12px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
width: 120px;
`;
prevConversationButton.onmouseenter = () => prevConversationButton.style.backgroundColor = '#40a9ff';
prevConversationButton.onmouseleave = () => prevConversationButton.style.backgroundColor = '#1890ff';
// 创建下一个对话按钮
const nextConversationButton = document.createElement('button');
nextConversationButton.textContent = '下一个对话 →';
nextConversationButton.onclick = jumpToNextConversation;
nextConversationButton.style.cssText = `
padding: 8px 12px;
background-color: #1890ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
width: 120px;
`;
nextConversationButton.onmouseenter = () => nextConversationButton.style.backgroundColor = '#40a9ff';
nextConversationButton.onmouseleave = () => nextConversationButton.style.backgroundColor = '#1890ff';
// 创建消息导航分隔线
const separator = document.createElement('div');
separator.style.cssText = `
height: 1px;
background-color: rgba(0, 0, 0, 0.2);
margin: 5px 0;
`;
// 创建上一条消息按钮
const prevMessageButton = document.createElement('button');
prevMessageButton.textContent = '↑ 上一条消息';
prevMessageButton.onclick = jumpToPreviousMessage;
prevMessageButton.style.cssText = `
padding: 8px 12px;
background-color: #52c41a;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
width: 120px;
`;
prevMessageButton.onmouseenter = () => prevMessageButton.style.backgroundColor = '#73d13d';
prevMessageButton.onmouseleave = () => prevMessageButton.style.backgroundColor = '#52c41a';
// 创建下一条消息按钮
const nextMessageButton = document.createElement('button');
nextMessageButton.textContent = '↓ 下一条消息';
nextMessageButton.onclick = jumpToNextMessage;
nextMessageButton.style.cssText = `
padding: 8px 12px;
background-color: #52c41a;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
width: 120px;
`;
nextMessageButton.onmouseenter = () => nextMessageButton.style.backgroundColor = '#73d13d';
nextMessageButton.onmouseleave = () => nextMessageButton.style.backgroundColor = '#52c41a';
// 创建宽度调整分隔线
const widthSeparator = document.createElement('div');
widthSeparator.style.cssText = `
height: 1px;
background-color: rgba(0, 0, 0, 0.2);
margin: 5px 0;
`;
// 创建增大宽度按钮
const increaseWidthButton = document.createElement('button');
increaseWidthButton.textContent = '宽';
increaseWidthButton.onclick = increaseContentWidth;
increaseWidthButton.style.cssText = `
padding: 8px 12px;
background-color: #faad14;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
width: 120px;
`;
increaseWidthButton.onmouseenter = () => increaseWidthButton.style.backgroundColor = '#ffc53d';
increaseWidthButton.onmouseleave = () => increaseWidthButton.style.backgroundColor = '#faad14';
// 创建减小宽度按钮
const decreaseWidthButton = document.createElement('button');
decreaseWidthButton.textContent = '窄';
decreaseWidthButton.onclick = decreaseContentWidth;
decreaseWidthButton.style.cssText = `
padding: 8px 12px;
background-color: #faad14;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
width: 120px;
`;
decreaseWidthButton.onmouseenter = () => decreaseWidthButton.style.backgroundColor = '#ffc53d';
decreaseWidthButton.onmouseleave = () => decreaseWidthButton.style.backgroundColor = '#faad14';
// 添加按钮到容器
console.log('豆包对话导航 - 按钮创建完成，添加到容器');
container.appendChild(prevConversationButton);
container.appendChild(nextConversationButton);
container.appendChild(separator);
container.appendChild(prevMessageButton);
container.appendChild(nextMessageButton);
container.appendChild(widthSeparator);
container.appendChild(increaseWidthButton);
container.appendChild(decreaseWidthButton);
// 添加到页面
try {
document.body.appendChild(container);
console.log('豆包对话导航 - 导航UI按钮已成功添加到页面');
// 验证按钮是否在DOM中
const addedContainer = document.getElementById('doubao-nav-buttons');
if (addedContainer) {
console.log('豆包对话导航 - 导航UI按钮已在DOM中找到');
} else {
console.error('豆包对话导航 - 导航UI按钮添加失败，DOM中未找到');
}
} catch (error) {
console.error('豆包对话导航 - 添加按钮到页面时出错:', error);
}
}
/**
* 初始化导航功能
*/
function initNavigation() {
// 监听键盘事件
document.addEventListener('keydown', (event) => {
// Alt+左箭头 跳转到上一个对话
if (event.altKey && event.key === 'ArrowLeft') {
event.preventDefault();
jumpToPreviousConversation();
}
// Alt+右箭头 跳转到下一个对话
else if (event.altKey && event.key === 'ArrowRight') {
event.preventDefault();
jumpToNextConversation();
}
// Alt+PgUp 跳转到上一条消息
else if (event.altKey && event.key === 'PageUp') {
event.preventDefault();
jumpToPreviousMessage();
}
// Alt+PgDn 跳转到下一条消息
else if (event.altKey && event.key === 'PageDown') {
event.preventDefault();
jumpToNextMessage();
}
});
// 创建导航按钮
createNavigationButtons();
console.log('豆包对话导航已初始化');
}
/**
* 检查页面是否加载完成并初始化
*/
function checkPageReady() {
// 尝试多种方式检查对话列表是否存在
const conversationList = document.querySelector(CONVERSATION_LIST_SELECTOR) ||
document.querySelector(CONVERSATION_LIST_WRAPPER_SELECTOR) ||
document.querySelector('[data-testid="chat_list_thread_item"]');
// 同时检查消息块是否存在
const messageBlock = document.querySelector(MESSAGE_BLOCK_SELECTOR) ||
document.querySelector(MESSAGE_TESTID_SELECTOR);
console.log('豆包对话导航 - 页面加载检查:', {
conversationListExists: !!conversationList,
messageBlockExists: !!messageBlock,
readyState: document.readyState
});
// 修改网页样式中的--center-content-max-width为1500px
// 使用CSS样式表确保优先级
const styleSheet = document.createElement('style');
styleSheet.textContent = `
:root {
--center-content-max-width: 1500px !important;
}
`;
document.head.appendChild(styleSheet);
console.log('豆包对话导航 - 已将--center-content-max-width设置为1500px（使用样式表）');
// 同时直接设置DOM样式作为备份
document.documentElement.style.setProperty('--center-content-max-width', '1500px', 'important');
console.log('豆包对话导航 - 已将--center-content-max-width设置为1500px（直接设置）');
// 设置定时器，在页面加载完成后再次检查并更新CSS变量，防止被其他脚本覆盖
setTimeout(() => {
const currentValue = getComputedStyle(document.documentElement).getPropertyValue('--center-content-max-width');
console.log('豆包对话导航 - 当前--center-content-max-width值:', currentValue);
if (currentValue !== '1500px') {
document.documentElement.style.setProperty('--center-content-max-width', '1500px', 'important');
console.log('豆包对话导航 - 再次将--center-content-max-width设置为1500px（1秒后）');
}
}, 1000);
// 3秒后再次检查
setTimeout(() => {
const currentValue = getComputedStyle(document.documentElement).getPropertyValue('--center-content-max-width');
console.log('豆包对话导航 - 当前--center-content-max-width值:', currentValue);
if (currentValue !== '1500px') {
document.documentElement.style.setProperty('--center-content-max-width', '1500px', 'important');
console.log('豆包对话导航 - 再次将--center-content-max-width设置为1500px（3秒后）');
}
// 查找并分析使用--center-content-max-width变量的CSS规则
analyzeCssVariableUsage('--center-content-max-width');
}, 3000);
// 初始化导航功能
initNavigation();
// 定期检查按钮是否存在，确保按钮在页面动态加载时也能显示
const buttonCheckInterval = setInterval(() => {
const container = document.getElementById('doubao-nav-buttons');
if (!container) {
console.log('豆包对话导航 - 定期检查：按钮不存在，重新创建');
createNavigationButtons();
} else {
// 检查按钮是否可见
const style = window.getComputedStyle(container);
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
console.log('豆包对话导航 - 定期检查：按钮被隐藏，修复可见性');
container.style.display = 'flex';
container.style.visibility = 'visible';
container.style.opacity = '1';
}
// 最多检查10次
clearInterval(buttonCheckInterval);
}
}, 1000);
}
/**
* 分析CSS变量的使用情况
* @param {string} variableName - CSS变量名
*/
function analyzeCssVariableUsage(variableName) {
console.log(`豆包对话导航 - 开始分析CSS变量 ${variableName} 的使用情况`);
// 查找所有样式表
const styleSheets = Array.from(document.styleSheets);
const usageRules = [];
// 遍历所有样式表和规则
styleSheets.forEach((sheet, sheetIndex) => {
try {
const rules = Array.from(sheet.cssRules || sheet.rules || []);
rules.forEach((rule, ruleIndex) => {
if (rule.cssText && rule.cssText.includes(variableName)) {
usageRules.push({
sheetIndex,
ruleIndex,
selector: rule.selectorText || 'unknown',
cssText: rule.cssText,
type: rule.type
});
}
});
} catch (error) {
// 忽略跨域样式表的错误
console.log(`豆包对话导航 - 样式表 ${sheetIndex} 无法访问（可能是跨域）`);
}
});
console.log(`豆包对话导航 - 找到 ${usageRules.length} 个使用 ${variableName} 的CSS规则:`);
usageRules.forEach((rule, index) => {
console.log(`豆包对话导航 - 规则 ${index + 1}: ${rule.selector}`);
console.log(`豆包对话导航 - CSS: ${rule.cssText}`);
});
// 尝试修改使用这个变量的核心容器元素
modifyCenterContentWidth();
}
/**
* 修改中心内容区域的宽度
* @param {number} width - 目标宽度（像素）
*/
function modifyCenterContentWidth(width = 1500) {
console.log(`豆包对话导航 - 开始修改中心内容区域的宽度为 ${width}px`);
// 查找可能的中心内容容器元素 - 增加更多可能的选择器
const possibleSelectors = [
'.center-content-container',
'.main-content',
'[class*="center"][class*="content"]',
'[class*="main"][class*="content"]',
'.chat-content',
'.conversation-container',
'.content-wrapper',
'.content-container',
'[id*="content"]',
'[class*="chat"]',
'.message-list-container',
'.chat-container',
// 查找使用--center-content-max-width变量的元素
'[style*="--center-content-max-width"]'
];
let modifiedElementsCount = 0;
possibleSelectors.forEach(selector => {
const elements = document.querySelectorAll(selector);
if (elements.length > 0) {
console.log(`豆包对话导航 - 找到中心内容容器元素 (${selector}): ${elements.length} 个`);
elements.forEach((element, index) => {
// 获取元素的当前样式信息
const currentStyle = window.getComputedStyle(element);
const currentMaxWidth = currentStyle.maxWidth;
const currentWidth = currentStyle.width;
const elementClass = element.className;
const elementId = element.id;
console.log(`豆包对话导航 - 元素详情: class="${elementClass}", id="${elementId}", 当前max-width: ${currentMaxWidth}, 当前width: ${currentWidth}`);
// 直接设置max-width样式
element.style.maxWidth = `${width}px !important`;
// 设置width样式
element.style.width = '100% !important';
// 设置flex属性（如果是flex项）
element.style.flex = `1 1 ${width}px !important`;
// 设置min-width以确保内容不收缩
element.style.minWidth = '0 !important';
modifiedElementsCount++;
console.log(`豆包对话导航 - 已修改元素 ${index + 1} 的样式: max-width=${width}px, width=100%, flex=1 1 ${width}px`);
});
}
});
console.log(`豆包对话导航 - 共修改了 ${modifiedElementsCount} 个元素的样式`);
// 特殊处理：查找所有可能包含消息内容的容器
console.log('豆包对话导航 - 开始查找消息内容容器');
const messageContainers = document.querySelectorAll(MESSAGE_BLOCK_SELECTOR + ', ' + MESSAGE_TESTID_SELECTOR);
if (messageContainers.length > 0) {
console.log(`豆包对话导航 - 找到 ${messageContainers.length} 个消息容器`);
// 查找消息容器的父容器链
const parentContainers = new Set();
messageContainers.forEach(container => {
let parent = container.parentElement;
let depth = 0;
// 向上查找5层父容器
while (parent && depth < 5) {
parentContainers.add(parent);
parent = parent.parentElement;
depth++;
}
});
console.log(`豆包对话导航 - 找到 ${parentContainers.size} 个消息容器的父容器`);
// 修改这些父容器的样式
parentContainers.forEach((container, index) => {
const currentStyle = window.getComputedStyle(container);
const currentMaxWidth = currentStyle.maxWidth;
const elementClass = container.className;
const elementId = container.id;
console.log(`豆包对话导航 - 父容器详情: class="${elementClass}", id="${elementId}", 当前max-width: ${currentMaxWidth}`);
container.style.maxWidth = `${width}px !important`;
container.style.width = '100% !important';
container.style.flex = `1 1 ${width}px !important`;
console.log(`豆包对话导航 - 已修改父容器 ${index + 1} 的样式`);
});
}
// 特殊处理：查找页面中最大的flex容器
console.log('豆包对话导航 - 开始查找最大的flex容器');
const flexContainers = document.querySelectorAll('[class*="flex"], [style*="display:flex"], [style*="display: flex"]');
console.log(`豆包对话导航 - 找到 ${flexContainers.length} 个flex容器`);
let maxFlexContainer = null;
let maxFlexContainerWidth = 0;
flexContainers.forEach((container, index) => {
const rect = container.getBoundingClientRect();
const elementClass = container.className;
const elementId = container.id;
console.log(`豆包对话导航 - Flex容器 ${index + 1}: class="${elementClass}", id="${elementId}", 宽度: ${rect.width}px`);
if (rect.width > maxFlexContainerWidth) {
maxFlexContainerWidth = rect.width;
maxFlexContainer = container;
}
});
if (maxFlexContainer) {
const elementClass = maxFlexContainer.className;
const elementId = maxFlexContainer.id;
console.log(`豆包对话导航 - 最大的flex容器: class="${elementClass}", id="${elementId}", 宽度: ${maxFlexContainerWidth}px`);
// 修改最大的flex容器的样式
maxFlexContainer.style.maxWidth = `${width}px !important`;
maxFlexContainer.style.width = '100% !important';
maxFlexContainer.style.flex = `1 1 ${width}px !important`;
console.log(`豆包对话导航 - 已修改最大flex容器的样式`);
}
}
/**
* 获取当前内容区域的最大宽度
* @returns {number} 当前最大宽度（像素）
*/
function getCurrentContentWidth() {
// 尝试获取CSS变量的值
const cssVarValue = getComputedStyle(document.documentElement).getPropertyValue('--center-content-max-width');
if (cssVarValue) {
const match = cssVarValue.match(/(\d+)px/);
if (match && match[1]) {
return parseInt(match[1], 10);
}
}
// 如果CSS变量不可用，尝试获取主要内容容器的宽度
const contentContainers = document.querySelectorAll('.center-content-container, .main-content, [class*="center"][class*="content"]');
for (const container of contentContainers) {
const currentStyle = window.getComputedStyle(container);
const currentMaxWidth = currentStyle.maxWidth;
const match = currentMaxWidth.match(/(\d+)px/);
if (match && match[1]) {
return parseInt(match[1], 10);
}
}
// 默认返回1500px
return 1500;
}
/**
* 增大内容宽度
*/
function increaseContentWidth() {
const currentWidth = getCurrentContentWidth();
const newWidth = currentWidth + 200;
console.log(`豆包对话导航 - 增大内容宽度: ${currentWidth}px → ${newWidth}px`);
// 更新CSS变量
document.documentElement.style.setProperty('--center-content-max-width', `${newWidth}px`, 'important');
// 应用新宽度
modifyCenterContentWidth(newWidth);
}
/**
* 减小内容宽度
*/
function decreaseContentWidth() {
const currentWidth = getCurrentContentWidth();
const newWidth = Math.max(800, currentWidth - 200); // 最小宽度限制为800px
console.log(`豆包对话导航 - 减小内容宽度: ${currentWidth}px → ${newWidth}px`);
// 更新CSS变量
document.documentElement.style.setProperty('--center-content-max-width', `${newWidth}px`, 'important');
// 应用新宽度
modifyCenterContentWidth(newWidth);
}
// 定期检查按钮是否存在，确保按钮在页面动态加载时也能显示
const buttonCheckInterval = setInterval(() => {
const container = document.getElementById('doubao-nav-buttons');
if (!container) {
console.log('豆包对话导航 - 定期检查：按钮不存在，重新创建');
createNavigationButtons();
} else {
// 检查按钮是否可见
const style = window.getComputedStyle(container);
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
console.log('豆包对话导航 - 定期检查：按钮被隐藏，修复可见性');
container.style.display = 'flex';
container.style.visibility = 'visible';
container.style.opacity = '1';
}
// 最多检查10次
clearInterval(buttonCheckInterval);
}
}, 1000);
// 当DOM加载完成后开始检查页面
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', checkPageReady);
} else {
checkPageReady();
}
// 当页面完全加载后再次应用样式修改
window.addEventListener('load', () => {
console.log('豆包对话导航 - 页面完全加载完成，再次应用样式修改');
modifyCenterContentWidth();
});
// 增加一个定期调用样式修改函数的定时器，确保在页面动态加载内容时也能应用样式
// 每5秒调用一次，共调用10次
let styleUpdateCount = 0;
const maxStyleUpdates = 10;
const styleUpdateInterval = setInterval(() => {
if (styleUpdateCount < maxStyleUpdates) {
console.log(`豆包对话导航 - 定期更新样式 (${styleUpdateCount + 1}/${maxStyleUpdates})`);
// 重新设置CSS变量
document.documentElement.style.setProperty('--center-content-max-width', '1500px', 'important');
// 重新修改中心内容区域的宽度
modifyCenterContentWidth();
styleUpdateCount++;
} else {
clearInterval(styleUpdateInterval);
console.log('豆包对话导航 - 定期样式更新完成');
}
}, 5000);
})();有新增功能会继续发布噢，有什么问题可以评论，感谢您的观看
有6.8版本啦！可以试试看https://blog.csdn.net/WF_YL/article/details/156639350?spm=1001.2014.3001.5502
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
