插入自定义 CSS 样式到任意网址
// ==UserScript==
// @name CSS 样式注入
// @namespace https://diaoqi.gitee.io/blog/
// @version 0.5
// @description 插入自定义 CSS 样式到任意网址
// @author 掉漆
// @license MIT
// @match *
// @include *
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addStyle
// @grant GM_registerMenuCommand
// @grant GM_setClipboard
// ==/UserScript==
(function () {
'use strict';
// 代码来源于Youth霖，原地址：https://gist.github.com/youthlin/c4c08ffe4273ca7ebbf759289cef9964
// 本代码简化源代码部分功能、优化部分展示逻辑、以及添加部分功能。
const SETTING_KEY = 'cssMap'
const RAND = (Math.random() * 100000).toFixed(0)
// 实现类似jQuery中的on方法
const on = function (eventName, selector, handler) {
// http://youmightnotneedjquery.com/
document.addEventListener(eventName, function (e) {
for (let target = e.target; target && target !== this; target = target.parentNode) {
if (target.matches !== undefined && target.matches(selector)) {
handler.call(target, e);
break;
}
if (target.tagName === 'HTML') {
break;
}
}
}, false);
}
function start() {
const cssMap = cssValue()
const html = document.getElementsByTagName('html')[0]
const inject = `<div id="inject-watermark-${RAND}" class="inject-watermark"></div><style>
#inject-watermark-${RAND} {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 1;pointer-events: none;}
#inject-css-${RAND} {display: none;position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 999;background-color: rgba(0,0,0,.8);justify-content: center;align-items: center;font-size: 16px;}
#inject-css-setting {max-height: 90%;overflow: auto;color: #000;}
#inject-css-setting button {border: 1px solid #ccc;background-color: #fff;cursor: pointer;padding: 4px;}
#inject-css-setting table {border-collapse: collapse;background-color: #fff;}
#inject-css-setting th, #inject-css-setting td {border: 1px solid #ccc;padding: .5em;max-width: 50vw;overflow: auto;}
#inject-css-setting tr.active {font-weight: bold;}
#inject-css-setting td.active:after {content: ' ⭐️';}
#inject-css-setting tr:nth-child(even) {background-color: #f2f2f2;}
#inject-css-setting tr:hover {background-color: #ddd;}
</style><div id="inject-css-${RAND}"></div>`
html.insertAdjacentHTML('beforeend', inject)
const wrapper = document.getElementById(`inject-css-${RAND}`)
// 点击设置按钮事件
GM_registerMenuCommand('设置CSS规则', function (e) {
wrapper.style.display = 'flex'
}, 's')
// 渲染当前规则
render(cssMap, wrapper)
// 编辑规则详情
on('click', '.inject-css-edit', function (e) {
// GM.setClipboard(e.target.dataset.key, "text");
document.querySelector('#inject-css-url').value = e.target.dataset.key
document.querySelector('#inject-css-value').value = e.target.dataset.value
})
// 删除规则
on('click', '.inject-css-delete', function (e) {
const res = confirm(`确认删除${e.target.dataset.key}吗？`);
if (res === true) {
const deleteKey = e.target.dataset.key
cssMap.delete(deleteKey)
save(cssMap)
render(cssMap, wrapper)
}
})
// 添加规则
on('click', '.inject-css-add', function (e) {
e.preventDefault()
const k = document.querySelector('#inject-css-url').value.trim()
const v = document.querySelector('#inject-css-value').value.trim()
if (k !== '' && v !== '') {
try {
new RegExp(k)
} catch (e) {
alert('`' + k + '`: 不是有效的正则表达式. error=' + e)
return
}
cssMap.set(k, v)
save(cssMap)
render(cssMap, wrapper)
}
})
// 关闭按钮
on('click', '.inject-css-hide', function () {
wrapper.style.display = 'none'
})
// 键盘退出按钮
on('keyup', 'html', function (e) {
if (e.code === 'Escape') {
wrapper.style.display = 'none'
}
})
// 默认隐藏界面
document.querySelector('.inject-css-hide').click()
}
// 获取保存的规则信息
function cssValue() {
const settingValue = GM_getValue(SETTING_KEY, '{}');
let cssMap = JSON.parse(settingValue) // url regex -> css value
cssMap = new Map(Object.entries(cssMap)) // to Map
return cssMap
}
// 保存规则
function save(cssMap) {
const s = JSON.stringify(Object.fromEntries(cssMap));// Map 需要先转为 Object 才能序列化为 JSON
GM_setValue(SETTING_KEY, s)
}
// 渲染当前CSS规则 渲染配置的表格
function render(cssMap, wrapper) {
const url = window.location.href
let injectCss = ``
let tableBody = ''
// 遍历所有规则，渲染整个表格。若找到当前页规则，保存在injectCss中，最后统一渲染。
for (const entry of cssMap) {
try {
let active = ''
if (new RegExp(entry[0]).test(url)) {
injectCss += entry[1] + "\n"
active = 'active'
}
tableBody += `<tr class="${active}">
<td class="${active}"><code>${entry[0]}</code></td>
<td><pre style="margin-bottom:0;overflow: auto;height:70px;border:1px solid #aaa;font-size:12px">${entry[1]}</pre></td>
<td>
<button data-key="${entry[0]}" data-value="${entry[1]}" class="inject-css-edit">编辑</button>
<button data-key="${entry[0]}" class="inject-css-delete">删除</button>
</td></tr>`
} catch (e) {
cssMap.delete(entry[0])
}
}
wrapper.innerHTML = `<style>${injectCss}</style><div id="inject-css-setting"><button class="inject-css-hide">关闭(Esc)</button>
<table><tbody><tr><th>URL 正则</th><th>注入 CSS</th><th>操作</th></tr>
${tableBody}
<tr><td><label><input type="text" id="inject-css-url" placeholder="点号斜线记得转义"></label></td>
<td><textarea id="inject-css-value" cols="100" rows="3" placeholder="html { background-color: #ccc; }"></textarea></td>
<td><button class="inject-css-add">添加</button></td></tr>
</tbody></table></div>`
}
// 延时执行当前脚本
setTimeout(start, 2000)
})();