【Chrome拡張】グロ画像を見たくない！【検索してはいけない言葉】

検索してはいけない言葉を調べたい！
でもグロ画像は見たくない！って思う方へ。

そんなときは画像にぼかしをかけましょう。

ステップ1

ScriptAutoRunnerをChrome拡張機能に追加してください。
これは任意のJavaScriptを自動で実行するChrome拡張機能です。

ステップ2

以下のコードをScriptAutoRunnerに追加してください。

spoiler.jsの読み込み

// https://github.com/joshbuddy/spoiler-alert/blob/master/spoiler.min.js
(function(){if(typeof Object.assign!="function"){(function(){Object.assign=function(target){"use strict";if(target===undefined||target===null){throw new TypeError("Cannot convert undefined or null to object")}var output=Object(target);for(var index=1;index<arguments.length;index++){var source=arguments[index];if(source!==undefined&&source!==null){for(var nextKey in source){if(source.hasOwnProperty(nextKey)){output[nextKey]=source[nextKey]}}}}return output}})()}window.spoilerAlert=function(selector,opts){var elements=document.querySelectorAll(selector);var defaults={max:4,partial:2,hintText:"Click to reveal completely"};opts=Object.assign(defaults,opts||{});var maxBlur=opts.max;var partialBlur=opts.partial;var hintText=opts.hintText;var processElement=function(index){var el=elements[index];el["data-spoiler-state"]="shrouded";el.style.webkitTransition="-webkit-filter 250ms";el.style.transition="filter 250ms";var applyBlur=function(radius){el.style.filter="blur("+radius+"px)";el.style.webkitFilter="blur("+radius+"px)"};applyBlur(maxBlur);el.addEventListener("mouseover",function(e){el.style.pointer="Cursor";el.title=hintText;if(el["data-spoiler-state"]==="shrouded")applyBlur(partialBlur)});el.addEventListener("mouseout",function(e){el.title=hintText;if(el["data-spoiler-state"]==="shrouded")applyBlur(maxBlur)});el.addEventListener("click",function(e){switch(el["data-spoiler-state"]){case"shrouded":el["data-spoiler-state"]="revealed";el.title="";el.style.cursor="auto";applyBlur(0);break;default:el["data-spoiler-state"]="shrouded";el.title=hintText;el.style.cursor="pointer";applyBlur(maxBlur)}})};for(var i=0;i!==elements.length;i++)processElement(i)}})();

画像をぼかす

spoilerAlert("img, video", {
    max: 30, // ぼかしレベル
    partial: 30, // マウスオーバー時のぼかしレベル
});

ステップ3

はい、するとページを開いたときに画像にぼかしが入ります。
やったー！

画像をクリックすると解除されます。

ScriptAutoRunnerの処理が終わるまで目をつぶっていてください。

spoilerAlert関数の第1引数で指定したタグ以外で画像を表示された場合は泣きましょう。

参考