其乐 Keylol >> 社区 › 平台周边 › 平台工具› [Steam商城]
宽版显示
收藏主题
复制链接
回复
7
查看
1175
收藏
5
返回列表 发新帖
470326

71

赠楼

1%

赠楼率

734

蒸汽

270

主题

9265

帖子

8584

积分
发表于 2025-3-19 16:36:05 · 河北 | 显示全部楼层 |阅读模式
本文为 其乐用户(UID:470326) 发布的原创文章，转摘前请联系该用户获得许可
本帖最后由 470326 于 2025-3-19 17:04 编辑

经3楼大佬提醒，uBlock Origin，AdBlock，AdGuard都有这种功能

这个就当是练习使用deepseek吧，大家看看就好

不会排版，大家将就着看吧

别问我为啥起这个名字，因为这个名字是deepseek给起的


事情的起因：
商店页面的系统需求没有了
https://keylol.com/t993820-1-1
(出处: 其乐 Keylol)

然后我遍历了Augmented Steam和SteamDB的设置，发现steam商店页里很多我不想看的东西都无法隐藏
比如
> 示例元素

还有一些获得的奖项之类的，对我来说都是没什么用的信息
想要把他们隐藏掉只能依靠油猴脚本了
我完全不懂这方面，因此只能依靠AI了

脚本目标：在steam的商店页面创建一个按钮，使其可以自定义添加想要隐藏的div标签的id

以下是deepseek写的，我一个符号都没有改动过
> 源码
  1. <blockquote>// ==UserScript==
  2. // @name         Steam元素隐藏管理器
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  在Steam页面添加可自定义隐藏元素的控制面板
  6. // @author       YourName
  7. // @match        https://store.steampowered.com/app/*
  8. // @icon         https://store.steampowered.com/favicon.ico
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // ==/UserScript==


  14. (function() {
  15.     'use strict';
  16.    
  17.     // 配置项
  18.     const CONFIG = {
  19.         storageKey: 'steamHiddenElements',
  20.         buttonPosition: 'afterbegin', // 在页面顶栏插入按钮
  21.         panelStyle: `
  22.             position: fixed;
  23.             top: 20%;
  24.             right: 20px;
  25.             background: #1b2838;
  26.             padding: 15px;
  27.             z-index: 9999;
  28.             border-radius: 4px;
  29.             box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  30.             color: #c6d4df;
  31.             min-width: 280px;
  32.         `
  33.     };


  36.     // 初始化存储
  37.     let hiddenIds = GM_getValue(CONFIG.storageKey, []);
  38.     if (!Array.isArray(hiddenIds)) hiddenIds = [];


  41.     // 创建控制面板
  42.     function createControlPanel() {
  43.         // 主容器
  44.         const panel = document.createElement('div');
  45.         panel.style.cssText = CONFIG.panelStyle;
  46.         panel.innerHTML = `
  47.             <div style="margin-bottom:15px">
  48.                 <input type="text" id="customElementId"
  49.                     placeholder="输入要隐藏的元素ID"
  50.                     style="padding:5px;width:180px;background:#2a475e;border:1px solid #417a9b;color:white;">
  51.                 <button style="margin-left:5px;padding:5px 10px;background:#417a9b;border:none;color:white;cursor:pointer">添加</button>
  52.             </div>
  53.             <div id="currentList" style="max-height:200px;overflow-y:auto;"></div>
  54.             <div style="margin-top:10px;font-size:0.9em;color:#66c0f4">
  55.                 当前已隐藏 <span id="counter">0</span> 个元素
  56.             </div>
  57.         `;


  60.         // 添加按钮事件
  61.         panel.querySelector('button').addEventListener('click', addNewElement);
  62.         panel.querySelector('input').addEventListener('keypress', e => {
  63.             if (e.key === 'Enter') addNewElement();
  64.         });


  67.         // 初始隐藏面板
  68.         panel.style.display = 'none';
  69.         document.body.appendChild(panel);
  70.         return panel;
  71.     }


  74.     // 创建触发按钮
  75.     function createTriggerButton(panel) {
  76.         const btn = document.createElement('div');
  77.         btn.innerHTML = '🎚️ 元素隐藏管理器';
  78.         btn.style.cssText = `
  79.             position: fixed;
  80.             top: 60px;
  81.             right: 20px;
  82.             background: #1b2838;
  83.             padding: 8px 15px;
  84.             border-radius: 4px;
  85.             cursor: pointer;
  86.             color: #66c0f4;
  87.             font-family: Arial;
  88.             z-index: 10000;
  89.             box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  90.             transition: 0.3s;
  91.         `;
  92.         btn.addEventListener('click', () => {
  93.             panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
  94.             updateListDisplay();
  95.         });
  96.         document.body.appendChild(btn);
  97.     }


  100.     // 更新元素列表显示
  101.     function updateListDisplay() {
  102.         const listContainer = document.getElementById('currentList');
  103.         listContainer.innerHTML = hiddenIds.map(id => `
  104.             <div style="padding:5px;margin:3px 0;background:#2a475e;display:flex;justify-content:space-between">
  105.                 <span>${id}</span>
  106.                 <button data-id="${id}"
  107.                     style="background:none;border:1px solid #c6d4df;color:#c6d4df;cursor:pointer">×</button>
  108.             </div>
  109.         `).join('');


  112.         // 添加删除事件
  113.         listContainer.querySelectorAll('button').forEach(btn => {
  114.             btn.addEventListener('click', () => {
  115.                 hiddenIds = hiddenIds.filter(id => id !== btn.dataset.id);
  116.                 GM_setValue(CONFIG.storageKey, hiddenIds);
  117.                 updateListDisplay();
  118.                 applyHideRules();
  119.             });
  120.         });


  123.         document.getElementById('counter').textContent = hiddenIds.length;
  124.     }


  127.     // 添加新元素
  128.     function addNewElement() {
  129.         const input = document.getElementById('customElementId');
  130.         const newId = input.value.trim();
  131.         
  132.         if (newId && !hiddenIds.includes(newId)) {
  133.             hiddenIds.push(newId);
  134.             GM_setValue(CONFIG.storageKey, hiddenIds);
  135.             input.value = '';
  136.             applyHideRules();
  137.             updateListDisplay();
  138.         }
  139.     }


  142.     // 应用隐藏规则
  143.     function applyHideRules() {
  144.         hiddenIds.forEach(id => {
  145.             const elements = document.querySelectorAll(`#${CSS.escape(id)}`);
  146.             elements.forEach(el => el.style.display = 'none');
  147.         });
  148.     }


  151.     // 主初始化
  152.     const panel = createControlPanel();
  153.     createTriggerButton(panel);
  154.    
  155.     // 使用增强版Observer
  156.     const observer = new MutationObserver(mutations => {
  157.         applyHideRules();
  158.     });
  159.    
  160.     observer.observe(document.documentElement, {
  161.         childList: true,
  162.         subtree: true
  163.     });


  166.     // 初始执行
  167.     applyHideRules();
  168.     updateListDisplay();


  171.     // 自动清理
  172.     setTimeout(() => observer.disconnect(), 30000); // 30秒后停止观察
  173. })();
复制代码


> 介绍
功能亮点：
  • 可视化操作界面：

    • 悬浮控制按钮 (🎚️ 元素隐藏管理器)
    • 弹出式控制面板
    • 实时计数器显示已隐藏元素数量

  • 核心功能：

    • 输入框支持直接输入元素ID
    • Enter键快速提交
    • 已添加元素列表展示
    • 一键删除功能
    • 设置永久保存 (使用GM_setValue)

  • 智能隐藏系统：

    • 即时应用新规则
    • 自动处理动态加载内容
    • 支持特殊字符ID (使用CSS.escape)

  • UI设计：

    • 完美适配Steam深色主题
    • 平滑过渡动画
    • 自适应滚动列表
    • 符合Steam的视觉风格


使用指南：
  • 添加新元素：

    • 点击悬浮按钮打开面板
    • 在输入框输入要隐藏的div的ID
    • 点击"添加"按钮或按Enter键

  • 管理已隐藏元素：

    • 列表中显示所有已保存的ID
    • 点击右侧的×按钮删除条目
    • 删除后元素会自动重新显示

  • 状态反馈：

    • 顶部计数器实时更新
    • 成功添加时清空输入框
    • 面板关闭时自动保存设置



deepseek给的扩展建议，有懂的大佬也可以自行修改
> 扩展建议
如果需要更强大的功能，可以添加：
  1. <blockquote>// 在CONFIG中添加
  2. advancedFeatures: {
  3.     classSelector: true,      // 支持class选择器
  4.     attributeFilter: true,    // 支持属性选择器
  5.     customCSS: true           // 允许输入自定义CSS
  6. }


  9. // 修改输入框提示文字
  10. placeholder: "输入选择器 (如：#id, .class, div[attribute])"


  13. // 修改应用规则逻辑
  14. function applyHideRules() {
  15.     hiddenSelectors.forEach(selector => {
  16.         document.querySelectorAll(selector).forEach(el => {
  17.             el.style.display = 'none';
  18.         });
  19.     });
  20. }
复制代码
[size=16.002px]这个增强版脚本不仅实现了基本需求，还提供了：
  • 持久化存储
  • 可视化操作
  • 实时反馈
  • 自动更新机制
  • 风格化UI
  • 错误安全处理

[size=16.002px]所有操作都会自动保存，即使刷新页面或重新打开浏览器，之前的设置仍然有效。


效果图：


如何获取VID标签：
以Chrome浏览器为例，在Steam商店页面，鼠标放在想要隐藏的元素位置，单击右键，点击检查



双击引号内的名字，粘贴到元素隐藏管理器内点添加或回车即可

理论上来讲，可以自行添加 @match 来支持任意网站，只是按钮样式不会变，有能力的可以自行修改

安装方法：
1.点我安装（需要工具）
2.自行复制代码，打开油猴，点加号，删除里面全部内容后粘贴，保存

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？注册

×
回复

使用道具 举报

浏览本版块需要：
1. 初阶会员或更高等级；
2. （点击此处）绑定Steam账号
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

欢迎发帖参与讨论 o(*≧▽≦)ツ，请注意
1. 寻求帮助或答案的帖子请发到问题互助版块，悬赏有助于问题解决的速度。发错可能失去在该板块发布主题的权限（了解更多）
2. 表达观点可以，也请务必注意语气和用词，以免影响他人浏览，特别是针对其他会员的内容。如觉得违规可使用举报功能 交由管理人员处理，请勿引用对方的内容。
3. 开箱晒物，交易中心，游戏互鉴和福利放送版块请注意额外的置顶版规。
4. 除了提问帖和交易帖以外，不确认发在哪个版块的帖子可以先发在谈天说地。
　　作为民间站点，自 2004 年起为广大中文 Steam 用户提供技术支持与讨论空间。历经二十余载风雨，如今已发展为国内最大的正版玩家据点。

列表模式 ·
微信公众号
· 微博 · Bilibili频道 · Steam 群组 · 贴吧 · QQ群 
Keylol 其乐 ©2004-2025 Chinese Steam User Fan Site.
Designed by Lee in Balestier, Powered by Discuz!
推荐使用 Chrome 或 Microsoft Edge 来浏览本站
广告投放|手机版|广州数趣信息科技有限公司 版权所有|其乐 Keylol ( 粤ICP备17068105号 )
GMT+8, 2025-4-15 11:32
快速回复 返回顶部 返回列表