如何使用用户定义的过滤器或其他方法控制通过 CSS 模块或样式化组件自动生成的动态 class 名称
How to control dynamic class names which are auto-generated via CSS modules or styled-components with user-defined filters or other methods
如今许多网站通过 CSS 模块或样式组件自动生成动态 class 名称。这种做法具有禁用许多用户定义的过滤器 and/or 脚本的不幸甚至可能是故意的恶意效果;例如Reddit 覆盖所有形式的客户端外观更改;由于显然没有持久的全局标识符,用户可以调用它来禁止显示业力,因此甚至像业力这样的简单事情也被强加给用户:
An example screenshot of Reddit code illustrating the dynamic class names at hand
我认为这是专制的、不恰当的,并且会造成糟糕的用户体验。我认为网站实施这种控制是不合理的。用户究竟可以做些什么来控制这些看似不可操纵的动态 class 名称?例如,有没有办法对 CSS 模块或样式组件使用的构建过程进行逆向工程,以便将正确的标识符注入用户定义的过滤器 and/or 脚本?或者有更好的方法吗?
注意:我已经在 Webmaster、UX 和 SuperUser 上询问过这个问题,但没有收到像样的回复。这是路的尽头吗?或者是否有 Whosebug 大师提供可行的解决方案?
要在 Reddit 的评论页面上隐藏业力跨度,今天,您可以运行以下JavaScript:
Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)).forEach(i => i.style.display = 'none');
已测试 here。
但是,它只隐藏渲染评论的业力,而不是尚未加载的评论。
要以编程方式打开页面上的所有 "moreComments" 链接,您需要 运行:
Array.from(document.querySelectorAll('div')).filter(i => /moreComments-/.test(i.id)).forEach(i => i.querySelector('p').click())
根据页面上隐藏的评论数量,您需要等待一段时间,直到所有请求都得到解决并呈现所有评论。
此时 运行第一行将隐藏页面上的所有业力跨度。
明天这可能行不通,因为 Reddit 拥有该代码,并且有权利、能力和资源根据他们认为合适的方式更改其内部结构、布局或设计,一天任意多次,因此像我和你这样的程序员想改变他们服务的渲染输出的任何微不足道的尝试都是徒劳的。
编辑: 自从我回答了您的问题后,我想就如何使用 Whosebug 提供一些有用的见解。我希望你 find it 有所帮助,或者至少是有趣的。
如今许多网站通过 CSS 模块或样式组件自动生成动态 class 名称。这种做法具有禁用许多用户定义的过滤器 and/or 脚本的不幸甚至可能是故意的恶意效果;例如Reddit 覆盖所有形式的客户端外观更改;由于显然没有持久的全局标识符,用户可以调用它来禁止显示业力,因此甚至像业力这样的简单事情也被强加给用户:
An example screenshot of Reddit code illustrating the dynamic class names at hand
我认为这是专制的、不恰当的,并且会造成糟糕的用户体验。我认为网站实施这种控制是不合理的。用户究竟可以做些什么来控制这些看似不可操纵的动态 class 名称?例如,有没有办法对 CSS 模块或样式组件使用的构建过程进行逆向工程,以便将正确的标识符注入用户定义的过滤器 and/or 脚本?或者有更好的方法吗?
注意:我已经在 Webmaster、UX 和 SuperUser 上询问过这个问题,但没有收到像样的回复。这是路的尽头吗?或者是否有 Whosebug 大师提供可行的解决方案?
要在 Reddit 的评论页面上隐藏业力跨度,今天,您可以运行以下JavaScript:
Array.from(document.querySelectorAll('span')).filter(i => /(\d+)\spoint/.test(i.innerHTML)).forEach(i => i.style.display = 'none');
已测试 here。
但是,它只隐藏渲染评论的业力,而不是尚未加载的评论。
要以编程方式打开页面上的所有 "moreComments" 链接,您需要 运行:
Array.from(document.querySelectorAll('div')).filter(i => /moreComments-/.test(i.id)).forEach(i => i.querySelector('p').click())
根据页面上隐藏的评论数量,您需要等待一段时间,直到所有请求都得到解决并呈现所有评论。
此时 运行第一行将隐藏页面上的所有业力跨度。
明天这可能行不通,因为 Reddit 拥有该代码,并且有权利、能力和资源根据他们认为合适的方式更改其内部结构、布局或设计,一天任意多次,因此像我和你这样的程序员想改变他们服务的渲染输出的任何微不足道的尝试都是徒劳的。
编辑: 自从我回答了您的问题后,我想就如何使用 Whosebug 提供一些有用的见解。我希望你 find it 有所帮助,或者至少是有趣的。