Greasy Fork is available in English.
右下角添加两个按钮，一个运行JS代码，一个添加CSS样式
// ==UserScript==
// @name [开发向]方便的运行JS和添加CSS
// @namespace JS_CSS
// @version 1
// @description 右下角添加两个按钮，一个运行JS代码，一个添加CSS样式
// @author LWF
// @license MIT
// @grant none
// @match *://*/*
// @run-at document-start
// ==/UserScript==
(function() {
'use strict';
const style = document.createElement("style");
style.innerHTML = `
#js-runner-btn, #css-runner-btn {
position: fixed;
bottom: 20px;
width: 56px;
height: 56px;
color: white;
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
z-index: 1001;
transition: box-shadow 0.3s;
}
#js-runner-btn {
right: 20px;
background-color: #00897B;
}
#js-runner-btn:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
#css-runner-btn {
right: 90px;
background-color: #6E57B0;
}
#css-runner-btn:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}
/* 遮罩层样式 */
#runner-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色 */
z-index: 1000;
}
#js-runner-dialog, #css-runner-dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
background: white;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
z-index: 1002; /* 高于遮罩层 */
}
#js-runner-header, #css-runner-header {
padding: 12px;
color: white;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-size: 18px;
font-weight: bold;
text-align: center;
position: relative;
}
#js-runner-header {
background-color: #00897B;
}
#css-runner-header {
background-color: #6E57B0;
}
/* 增大关闭按钮尺寸 */
#js-runner-close, #css-runner-close {
position: absolute;
top: 8px;
right: 12px;
font-size: 24px; /* 增大关闭按钮的字体大小 */
cursor: pointer;
}
#js-runner-body, #css-runner-body {
padding: 16px;
}
#js-runner-input, #css-runner-input {
width: 100%;
height: 100px;
padding: 8px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
resize: vertical;
box-sizing: border-box;
}
#js-runner-footer, #css-runner-footer {
padding: 12px;
text-align: right;
}
#js-runner-run-btn, #css-runner-run-btn {
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
#js-runner-run-btn {
background-color: #00897B;
}
#js-runner-run-btn:hover {
background-color: #00695C;
}
#css-runner-run-btn {
background-color: #6E57B0;
}
#css-runner-run-btn:hover {
background-color: #4B3B8D;
}
`;
document.head.appendChild(style);
// 创建遮罩层
const overlay = document.createElement("div");
overlay.id = "runner-overlay";
document.body.appendChild(overlay);
// 创建 JS 按钮
const jsButton = document.createElement("div");
jsButton.id = "js-runner-btn";
jsButton.textContent = "⚙";
document.body.appendChild(jsButton);
// 创建 CSS 按钮
const cssButton = document.createElement("div");
cssButton.id = "css-runner-btn";
cssButton.textContent = "🎨";
document.body.appendChild(cssButton);
// 创建 JS 弹出框
const jsDialog = document.createElement("div");
jsDialog.id = "js-runner-dialog";
jsDialog.innerHTML = `
<div id="js-runner-header">
运行 JavaScript 代码
<span id="js-runner-close">×</span>
</div>
<div id="js-runner-body">
<textarea id="js-runner-input" placeholder="在此输入 JavaScript 代码"></textarea>
</div>
<div id="js-runner-footer">
<button id="js-runner-run-btn">运行</button>
</div>
`;
document.body.appendChild(jsDialog);
// 创建 CSS 弹出框
const cssDialog = document.createElement("div");
cssDialog.id = "css-runner-dialog";
cssDialog.innerHTML = `
<div id="css-runner-header">
添加 CSS 样式
<span id="css-runner-close">×</span>
</div>
<div id="css-runner-body">
<textarea id="css-runner-input" placeholder="在此输入 CSS 样式"></textarea>
</div>
<div id="css-runner-footer">
<button id="css-runner-run-btn">添加</button>
</div>
`;
document.body.appendChild(cssDialog);
// 显示 JS 对话框和遮罩层
jsButton.addEventListener("click", () => {
overlay.style.display = "block";
jsDialog.style.display = "block";
});
// 显示 CSS 对话框和遮罩层
cssButton.addEventListener("click", () => {
overlay.style.display = "block";
cssDialog.style.display = "block";
});
// 运行 JS 代码并关闭对话框和遮罩层
document.getElementById("js-runner-run-btn").addEventListener("click", () => {
const code = document.getElementById("js-runner-input").value;
try {
eval(code);
} catch (error) {
alert("执行出错：" + error.message);
}
jsDialog.style.display = "none";
overlay.style.display = "none";
document.getElementById("js-runner-input").value = ""; // 清空输入框
});
// 添加 CSS 样式并关闭对话框和遮罩层
document.getElementById("css-runner-run-btn").addEventListener("click", () => {
const cssCode = document.getElementById("css-runner-input").value;
const cssStyle = document.createElement("style");
cssStyle.innerHTML = cssCode;
document.head.appendChild(cssStyle);
cssDialog.style.display = "none";
overlay.style.display = "none";
document.getElementById("css-runner-input").value = ""; // 清空输入框
});
// 关闭 JS 对话框和遮罩层
document.getElementById("js-runner-close").addEventListener("click", () => {
jsDialog.style.display = "none";
overlay.style.display = "none";
});
// 关闭 CSS 对话框和遮罩层
document.getElementById("css-runner-close").addEventListener("click", () => {
cssDialog.style.display = "none";
overlay.style.display = "none";
});
})();