分享一个自制的暴力猴UI
本帖最后由 九月麦田 于 2025-4-27 23:41 编辑以下简介来自AI：
什么是暴力猴？暴力猴（Violentmonkey） 是一个浏览器扩展，简单来说就是：让你在浏览器里运行自定义的脚本，改造网页功能或外观的小工具。
用很简洁的话总结：
[*]脚本管理器：可以安装、管理各种用户脚本。
[*]修改网页：比如自动签到、广告屏蔽、优化网站体验、批量下载资源等等。
[*]开源自由：暴力猴是开源的，相比同类，更轻便干净。
[*]支持平台：可以用在 Chrome、Firefox、Edge、Opera 等浏览器。
目前只有浅色模式
这是修改后的UI截图：
注意，在右上角的设置要改成下图所示，否则可能造成布局混乱
最后如何实现，很简单，找到暴力猴设置界面的自定义样式，把最后的代码复制保存即可
代码：
* {
text-decoration: none !important;
}
:root {
--fg: #333;
--bg: transparent;
}
body {
background: rgba(240, 242, 245, 0.9);
font-weight: 500;
}
.tab-settings input {
width: 4.0em;
}
.btn-group sub {
margin-top: 0;
position: inherit;
}
.tab {
background: transparent;
margin-left: 14rem;
padding: 3.5rem 2rem 0px;
}
.setting-check > :nth-child(2) {
flex: 1 1 min-content;
font-size: 13px;
}
.tab.tab-installed {
padding: 10px 70px;
}
.tab.tab-installed header {
border-radius: 8px !important;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.10), inset 0px 0px 90px 10px rgba(255, 255, 255, 0.9);
background-color: rgba(240, 242, 245, 0.5);
backdrop-filter: blur(15px) saturate(180%);
border: 1px solid #fff;
}
code, kbd {
background: none;
}
.aside-content {
align-items: flex-end;
border: none;
display: flex;
flex-direction: column;
height: 100%;
padding: 4rem 1rem 1rem;
width: 14rem;
background: transparent;
color: #333;
}
hr {
display: none;
}
.editor-search span > input {
width: 99%;
}
.btn-group {
border-right: none;
}
.subtle {
color: #1F1A0D;
font-size: 13px;
}
button:focus, input:focus, select:focus, textarea:focus {
border-color: #ccc;
}
.vl-dropdown-menu {
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 8px;
box-shadow: 0 1px 40px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(50px);
padding: 20px;
color: #333;
}
.btn-ghost:focus, .btn-ghost:hover {
background: transparent;
border-radius: 8px;
border-color: transparent;
}
#setting-text {
border-radius: 8px;
}
.scripts {
align-content: flex-start;
display: grid;
padding: 20px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.scripts .script {
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 12px;
display: grid;
grid-template-columns: 0px auto;
margin: 0px;
position: relative;
transition: transform 0.25s;
width: auto;
min-width: 230px;
height: 140px;
overflow: hidden;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.10), inset 0px 0px 90px 20px rgba(255, 255, 255, 0.9);
background-color: rgba(245, 247, 250, 0.9);
}
.scripts .script {
align-items: center;
background: #fff;
border-radius: 8px;
height: 2.5rem;
margin: -1px 0 0 -1px;
padding: 0 16px 0 8px;
width: var(--w);
}
.script-icon {
display: none;
}
.ellipsis > .script-name {
font-size: 14px;
color: #fff;
background: #628889;
padding: 4px 10px;
border-radius: 8px;
box-shadow: 0 1px 16px rgba(0, 0, 0, 0.15);
margin: 2px 5px;
max-width: 230px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.script-info-1.ellipsis {
width: 18em;
}
.script-author > .ellipsis {
display: inline-block;
max-width: 15ch;
}
.script-name {
display: block;
}
.script-author {
overflow: hidden;
}
.menu-item > .script-name.ellipsis {
max-width: 210px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 2rem;
margin: auto 0;
}
.script-info {
font-size: 12px;
color: #666;
margin-top: 50px;
}
.script-message {
white-space: nowrap;
font-size: 11px;
padding: 0px 10px;
color: #666;
}
.aside-content img {
margin-right: -6px;
}
.scripts:not() .size {
bottom: 10px;
position: initial;
right: 40px;
}
.scripts:not() .size {
bottom: 10px;
position: initial;
right: 40px;
padding-left: 4px;
}
.version.ellipsis {
background: #ffb098;
border-radius: 6px;
padding: 0 6px;
color: #fff;
}
.updated.hidden-sm.ml-1c {
padding-left: 4px;
}
.script-info-1 {
margin: 5px 0;
}
.ellipsis {
overflow: initial;
}
.icon {
height: 0.85rem;
width: 0.85rem;
}
.aside-menu-item:last-child {
font-size: 0.9em;
}
section {
padding: 20px;
background: rgba(0, 0, 0, 0.05);
border-radius: 12px;
margin: 3rem 0;
}
section > h3 {
background: none;
border-top: none;
margin-bottom: 0rem !important;
font-weight: 700;
}
button, input, select, textarea {
border-radius: 6px;
font-size: 13px;
margin: 0 4px;
}
input, select, textarea {
background: rgba(255, 255, 255, 0.5);
color: #333;
border: 1px solid #ccc;
padding: 2px 4px !important;
}
button {
font-size: 12px;
line-height: 1.5;
padding: 3px 7px;
vertical-align: bottom;
background: #333;
color: #fff;
border: none;
margin-top: 8px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
span > button {
margin-top: 0px;
}
.toggle-button {
background: #8A8A8A;
color: #fff;
margin-top: 0px;
}
.toggle-button.active {
background: #0196FF;
color: #fff;
}
.CodeMirror {
background: rgba(255, 255, 255, 0.5);
font-weight: 400 !important;
}
.CodeMirror-gutters {
background-color: transparent;
border-right: none;
}
.cm-s-eclipse .CodeMirror-activeline-background {
background: rgba(0, 0, 0, 0.05) !important;
border-radius: 6px;
}
.edit-nav-item.active {
background: transparent;
box-shadow: none;
}
.editor-search,
.edit-header {
border-bottom: 1px solid #ddd;
background: transparent;
}
.sep, .sep::after {
display: none;
}
.edit .shelf {
border-bottom: none;
}
.edit .frozen-note {
background: #ff8080;
color: #fff;
}
.failure-reason {
padding: 0px 30px 0.5rem !important;
}
.mr-1 {
margin-top: -8px;
}
.tab-settings .icon {
fill: #000;
margin-top: 8px;
}
.removed .script-info {
order: 0;
}
.script-buttons {
display: block;
height: 30px;
}
.filter-search .icon {
right: 1rem;
}
.hint > a {
color: red;
}
.flex.center-items {
background: none;
box-shadow: none;
}
.mb-1c > .flex.flex-wrap.center-items > button {
margin-top: 0px;
}
textarea:not():not(.h100) {
padding: 10px 5px;
font-family: PingFang SC;
}
input {
padding: none;
}
.menu, .menu:not(.expand) + footer {
border-top: none;
margin: -4px 4px;
}
.menu-item {
min-height: 2.8rem;
font-size: 14px;
background: transparent;
}
.submenu-commands > .menu-item {
min-height: 2rem;
font-weight: 400;
font-size: 13px;
}
.menu-item:hover + .submenu-buttons .submenu-button:not(:focus) {
background: transparent;
}
.extras-menu > :focus,
.menu-area:focus, .menu-area:hover {
background: rgba(0, 0, 0, 0.05);
color: #333;
border-radius: 8px;
}
.menu-buttons {
padding: 13px 12px;
margin: 0px;
color: #333;
}
.menu-group {
color: #000;
font-weight: 700;
font-size: 14px;
}
.flex-1 {
font-weight: 700;
}
.logo {
margin: 10px 4px;
}
.menu-find {
display: none;
}
.submenu {
border-top: none;
background: transparent;
}
.menu-buttons .icon {
height: 14px;
width: 14px;
}
.extras-menu > :first-child {
padding-top: 0.3rem;
}
.extras-menu > :last-child {
padding-bottom: 0.3rem;
}
.extras-menu {
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border-radius: 8px;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
font-size: 13px;
padding: 8px 4px;
}
.submenu-button {
color: #333;
background: transparent;
}
.submenu-button:focus {
color: green;
background: transparent;
}
.submenu-buttons {
top: 6px;
}
.page-popup:not(.noninjectable):not(.blacklisted) .settings {
font-size: 13px;
}
.message {
display: none;
}
.settings {
overflow-y: visible;
}
.export .tpl textarea {
height: 26px;
margin-top: 7px;
line-height: 22px;
}
.tab-settings .icon {
fill: #000;
}
.failure-reason {
padding: 1rem 30px 0.5rem;
}
可惜我用的是tampermonkey ，感谢楼主，辛苦了。
Win 11 专业版 🎵 25H2 26200.5570 Dev 预览通道
Edge浏览器 🎶 Microsoft Edge 版本 136.0.3240.37 beta (64 位)
有没有油猴的呀 感谢楼主 可以制作个性化界面了 支持楼主 这个利害，谢谢分享~！ 点赞原创 subaobao_ok 发表于 2025-4-28 00:22
可惜我用的是tampermonkey ，感谢楼主，辛苦了。
感觉暴力猴比篡改猴更好用 学习，还没弄明白和油猴啥区别 感谢大佬分享 感谢楼主分享！ 关键是脚本好找吗？篡改猴的添加脚本页面基本都打不开了 支持楼主{:5_280:} 可惜我用的是tampermonkey ，感谢楼主，辛苦了。 谢谢分享。 真不错 感谢。。 可惜我用的是tampermonkey ，感谢楼主，辛苦了。 谢谢分享 多谢，支持一下！