最近用ds官网比较多，屏幕小+强迫症，乱写了一个油猴美化丑化官网聊天。
电脑屏幕越大，界面越宽，我自己是调整页面缩放到 90% 80% 75% 。
主要功能：
- 宽屏显示
- 紧凑界面
- 删除我不想要的元素
- 自动点击“继续生成”按钮
原：
改：
油猴脚本：
// ==UserScript==
// @name !09 DeepSeek
// @match https://chat.deepseek.com/*
// ==/UserScript==
const style = `
#root > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3), /* 删除折叠按钮 */
#root > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) /* 删除新对话按钮 */
{display: none !important;}
#root > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4) > div > div:nth-child(2) /* “个人信息”样式 */
{margin: 0 12px !important;}
#root > div > div:nth-child(2) > div:nth-child(1), /* 边栏宽度与圆角 */
#root > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1)
{width: 220px !important; border-radius: 0px !important;}
#root > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1), /* 边栏顶部底部样式 */
#root > div > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(4)
{height: 60px !important; padding: 0px 14px 0px 10px !important; justify-content: center !important;}
/* 左 右 分 界 线 */
❌#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(1) /* 删除标题栏 */
{display: none !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(3),
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(4) > div:nth-child(2) /* 删除底部“AI生成”提示 */
{display: none !important;}
:root /* 消息体、输入框、置底按钮宽度拉满 */
{--message-list-max-width: 1600px !important; --message-list-padding-horizontal: 48px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(4) /* 输入框父元素别padding */
{padding: 0px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(4) > div:nth-child(1) /* 输入框延长并加底 */
{width: 102% !important; margin-bottom: 10px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(1) /* 聊天区域整体紧凑 */
{padding: 16px 0px 0px;}
#root > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div > div /* 补偿首页搜索框 */
{padding: 16px 19px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(3) /* 输入框上方两个按钮 */
{margin-bottom: 10px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div > div:nth-child(1) > div:nth-child(n) /* 列表紧凑 */
{padding-bottom: 10px;}
#root > div > div:nth-child(2) > div:nth-child(2) > div > div:nth-child(2) > div:nth-child(2) > div > div /* 补偿置底按钮 */
{padding-bottom: 0px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div > div > div:nth-child(1) /* 补偿首页搜索框 */
{padding-bottom: 0px !important;}
#root > div > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div > div > div:nth-child(2) /* 补偿首页搜索框 */
{padding-bottom: 0px !important;}
`;document.head.appendChild(Object.assign(document.createElement('style'),{innerHTML:style}));
// 持续监听“继续生成”按钮并自动点击
const buttonSelector = 'div.ds-flex > div.ds-button.ds-button--secondary.ds-button--bordered.ds-button--rect.ds-button--m';
const observer = new MutationObserver((mutationsList, observer) => {
const button = document.querySelector(buttonSelector);
if (button) button.click();
});
const config = { childList: true, subtree: true };
observer.observe(document.body, config);
问题：
- 怎么选择元素：前端小伙伴搞的官网所有的类名基本都是随机字符，不知道大佬们有没有什么好办法选择元素~~~
- 可维护性：我就没用类名来选择元素，特意加了注释避免官网改UI不知道后续怎么维护（后续我也不维护
）。。。 - 代码：本人纯前端小白，JS不会，CSS乱写的，能用就行。
- 注释：至少知道改了啥，不需要的代码直接删了。
