世界を闇に変えましょう #JavaScript

はじめに

皆様の日常に闇って足りてますか？
もちろん足りてませんよね。
では、闇を増やしていきましょう。

とりあえず黒を闇にする

あなたの目の前にあるのはなんでしょうか？
そうですね、ブラウザですよね。
まずはブラウザに表示される「黒」という文字を闇にしましょう。
黒という文字が書いてあるページ¹を開きおもむろにF12を押してdevtoolsを立ち上げてください。
その後下のコードをコンソールに貼りつけて、Enterを押すと、黒という文字がすべて闇になります。

(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replaceAll('黒','闇');})();

document.body.innerHTMLでページのHTMLを取得し、そのHTMLの中でreplaceAll()で黒という文字を闇に入れ替えます。
アロー関数で上の操作をする関数を作り、()();で括って即時実行しています。

ワンクリックで闇にする

毎回devtoolsを開いて闇にするのは面倒ですよね。
ブックマークに登録してブックマークレットとしてワンクリックで闇にしましょう。

javascript:(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replaceAll('黒','闇');})()

先頭にjavascript:と付け加えた上のコードをお気に入りに登録すれば、いつでもどこでも黒を闇に変えられます。
名前は「闇にする」などお好きなものをどうぞ。

他の色も闇にする

でも、黒だけでは出現回数が少ないから物足りないですよね。
他の色も闇にしましょう。

javascript:(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replace(/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/g,'闇');})()

replaceAll()からreplace()に変え、変更する予定の文字を/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/gと正規表現で指定します。
最後にgをつけることで、1つだけではなく、ページ内のすべての色の文字を置換できます。

ゼロクリックで黒にする

毎回クリックするのも面倒ですよね。
WebExtensionを作成して、自動で闇になるようにしましょう。

manifest.json

{
    "name": "闇にする",
    "description": "すべての色を闇にする",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
      {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
      }
    ]
}

content.js

window.addEventListener("load",(eve)=>{
  const d = document;
  d.body.innerHTML=d.body.innerHTML.replace(/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/g,'闇');
})

上の2つのファイルをまとめて1つのフォルダに入れて、拡張機能としてブラウザに取り込めば完成です。
Chromeの場合は、chrome://extensionsを開き、デベロッパーモードをオンにして、まとめたフォルダをドラッグ・アンド・ドロップすれば読み込めます。

拡張機能ではwindow.adeEventListenerでロードされたときに実行するようにしています。

なんでもかんでも闇にする

もはや、色だけでは物足りなくなってきましたよね。
漢字すべてを闇にしましょう。
先程のcontent.jsを下のコードに差し替えて、再インストールしてください。

content.js

window.addEventListener("load",(eve)=>{
  const d = document;
  d.body.innerHTML=d.body.innerHTML.replace(/[一-龠]/g,'闇');
})

一-龠とすることで、Unicodeでの最初の漢字である一(\u4E00)と最後の漢字である龠(\u9FA0)の間にある文字が対象となり、すべての漢字が闇になります。

いかがでしたか

すべての漢字が闇に変わりましたでしょうか？
あまりにも最悪な体験だったので自分はすぐに拡張を削除しました。
闇という単語がゲシュタルト崩壊してきたのでもう二度と闇が足りないなんて思わなくなると思います。やったね！
それではまた。

参考文献

https://qiita.com/keitean/items/2b345f206215499873c8
https://wikiwiki.jp/boudai/%E8%89%B2%E3%81%BE%E3%81%A8%E3%82%81/%E6%BC%A2%E5%AD%97%E4%B8%80%E6%96%87%E5%AD%97%E3%81%AE%E8%89%B2%E4%B8%80%E8%A6%A7
https://developer.chrome.com/docs/extensions/mv3/intro/
https://stabucky.com/wp/archives/7594

このページでも大丈夫です。 ↩