通过按Ctrl+Z键依次切换：开启隐藏图片、开启缩小图片、开启隐藏图片但保持布局、关闭
// ==UserScript==
// @name CTRL+Z 隐藏图片
// @name:zh CTRL+Z 隐藏图片
// @name:en CTRL+Z Hide Images
// @name:ja CTRL+Z 画像を非表示
// @namespace http://tampermonkey.net/
// @version 1.0.2
// @description 通过按Ctrl+Z键依次切换：开启隐藏图片、开启缩小图片、开启隐藏图片但保持布局、关闭
// @description:zh 通过按Ctrl+Z键依次切换：开启隐藏图片、开启缩小图片、开启隐藏图片但保持布局、关闭
// @description:en Press Ctrl + Z to toggle between hiding images, scaling images, hiding images while maintaining layout, and closing the effects.
// @description:ja Ctrl + Z を押して画像の非表示、画像の縮小、画像の非表示（レイアウトを維持）、効果を閉じるを切り替えます。
// @author aotmd
// @match *://*/*
// @noframes
// @license MIT
// @run-at document-body
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
( function() {
let SETTING = {
/*可以自定义快捷键,单个字母(ctrl+[key]生效);Customize shortcut keys, single letter (ctrl + [key] is effective);ショートカットキーをカスタマイズして、単一の文字（ctrl + [key]）が有効です*/
key:"Z",
/*也对background-image设置的图片进行隐藏;Also hides images set with background-image.;background-image で設定された画像も非表示にします。*/
background_image: false,
/*background-image的宽高大于此值时才生效;The effect only applies when the width and height of the background-image are greater than this value.;background-imageの幅と高さがこの値より大きい場合にのみ効果が適用されます。*/
width: 100,
height: 100,
}
let url = window.location.origin;
const head = document.getElementsByTagName( "head" )[ 0 ];
let List = GM_getValue( "List" ) ? GM_getValue( "List" ) : {};
let flag = List[ url ] ? List[ url ] : {};
const hideNode = createStyleNode( "hideNode", "img{display:none!important;}.hide-background-image{background-image:none!important;}" );
const scaleNode = createStyleNode( "scaleNode", "img{transform: scale(0.5);}.hide-background-image{background-size: 50% 50% !important;background-position: center;}" );
const opacityNode = createStyleNode( "opacityNode", "img{transform: scale(0.5);opacity: 0!important; transition: opacity 0.3s ease-in-out;}.hide-background-image{background-size: 0 0 !important;background-position: center;transition: background-size 0.3s ease-in-out;}" );
head.appendChild( hideNode );
head.appendChild( scaleNode );
head.appendChild( opacityNode );
applyStyles();
function applyStyles() {
if ( flag ) {
// 设置隐藏图片样式;Set hidden image style;隠れた画像スタイルを設定します。
hideNode.type = flag.hide ? "text/css" : "text";
// 设置缩小图片样式;Set reduced image style;縮小された画像スタイルを設定します。
scaleNode.type = flag.scale ? "text/css" : "text";
// 设置透明隐藏图片样式;Set transparent hidden image style;透明な非表示画像スタイルを設定します。
opacityNode.type = flag.opacity ? "text/css" : "text";
}
}
function createStyleNode( id, css ) {
const styleNode = document.createElement( "style" );
styleNode.id = id;
styleNode.innerHTML = css;
styleNode.type = "text";
return styleNode;
}
if(SETTING.key.charCodeAt(0)>97){
SETTING.key=String.fromCharCode(SETTING.key.charCodeAt(0)-32);
}
if(SETTING.key.charCodeAt(0)<65 ||SETTING.key.charCodeAt(0)>97){
console.error("快捷键设置错误，请设置为单个字母。;The shortcut key setting is incorrect. Please set it to a single letter. ;ショートカットキーの設定が間違っています。1文字に設定してください。");
return;
}
document.addEventListener( "keydown", function( e ) {
if ( e.ctrlKey && e.keyCode == SETTING.key.charCodeAt(0) ) {
if ( flag.hide ) { //第二次按,生效scale;Second press, scale effect;2回目の押し, スケール効果
flag = {}
flag.scale = true;
} else if ( flag.scale ) { //第三次按,生效透明;Third press, transparent effect;3回目の押し, 透明な効果
flag = {}
flag.opacity = true;
} else if ( flag.opacity ) { //第四次按,取消全部;Fourth press, cancel all;4回目の押し, すべてキャンセル
flag = {}
} else { //第一次按生效hide;First press, hide effect;最初の押し, 非表示効果
flag = {}
flag.hide = true;
}
applyStyles();
//重新读取同步数据;Reload synchronous data;同期データを再読み込み
List = GM_getValue( "List" ) ? GM_getValue( "List" ) : {};
if(Object.keys(flag).length === 0){
delete List[ url ]
}else{
List[ url ] = flag;
}
GM_setValue( "List", List );
}
} );
if ( SETTING.background_image ) {
window.addEventListener( 'load', function() {
// 加载完成后执行的代码;Code to run after loading;読み込み後に実行するコード
// 选择所有元素;Select all elements;すべての要素を選択
var elements = document.querySelectorAll( '*' );
// 遍历所有元素;Iterate over all elements;すべての要素を繰り返し処理
elements.forEach( function( element ) {
// 获取元素的 computedStyle;Get the computed style of the element;要素の計算済みスタイルを取得
var style = window.getComputedStyle( element );
// 检查是否有 background-image 属性;Check if the element has a background-image property;要素が background-image プロパティを持っているかどうかを確認
if ( style.getPropertyValue( 'background-image' ) !== 'none' &&
style.getPropertyValue( 'background-image' ).includes( 'url' ) &&
parseInt( style.width ) > SETTING.width &&
parseInt( style.height ) > SETTING.height ) {
// 添加一个新的类来隐藏元素;Add a new class to hide the element;要素を非表示にする新しいクラスを追加
element.classList.add( 'hide-background-image' );
}
} );
}, false );
}
} )();