世界を闇に変えましょう

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

## とりあえず黒を闇にする
あなたの目の前にあるのはなんでしょうか？
そうですね、ブラウザですよね。
まずはブラウザに表示される「黒」という文字を闇にしましょう。
黒という文字が書いてあるページ[^1]を開きおもむろに`F12`を押して`devtools`を立ち上げてください。
[^1]: このページでも大丈夫です。

その後下のコードをコンソールに貼りつけて、`Enter`を押すと、黒という文字がすべて闇になります。

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

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

![黒1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104058/e57f5740-9cd9-42da-dbe0-934b148aca18.png)

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


```javascript
javascript:(()=>{const d=document;d.body.innerHTML=d.body.innerHTML.replaceAll('黒','闇');})()
```
先頭に`javascript:`と付け加えた上のコードをお気に入りに登録すれば、いつでもどこでも黒を闇に変えられます。
名前は「闇にする」などお好きなものをどうぞ。

![ブックマークレット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104058/8787de97-770f-29e3-929f-a72fa1b1b393.png)


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

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

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

![虹1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104058/866a918f-e9af-f9a1-8426-b67db809a23c.png)


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

```json:manifest.json
{
    "name": "闇にする",
    "description": "すべての色を闇にする",
    "version": "1.0",
    "manifest_version": 3,
    "content_scripts": [
      {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
      }
    ]
}
```
```javascript:content.js
window.addEventListener("load",(eve)=>{
  const d = document;
  d.body.innerHTML=d.body.innerHTML.replace(/[赤青黄緑白黒紫橙水桃茶金銀藍紺朱緋紅空墨灰]/g,'闇');
})
```
上の2つのファイルをまとめて1つのフォルダに入れて、拡張機能としてブラウザに取り込めば完成です。
Chromeの場合は、`chrome://extensions`を開き、デベロッパーモードをオンにして、まとめたフォルダをドラッグ・アンド・ドロップすれば読み込めます。

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

![拡張機能.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104058/894d4b78-d79c-94fb-2934-6661b76ee0fb.png)

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

```javascript:content.js
window.addEventListener("load",(eve)=>{
  const d = document;
  d.body.innerHTML=d.body.innerHTML.replace(/[一-龠]/g,'闇');
})
```
`一-龠`とすることで、Unicodeでの最初の漢字である一(`\u4E00`)と最後の漢字である龠(`\u9FA0`)の間にある文字が対象となり、すべての漢字が闇になります。

![全1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104058/dae4d18c-f465-920a-259b-004a0fe771d9.png)
![全2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104058/a24d8f57-7957-b0b8-03ec-4611ad256105.png)


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

## 参考文献
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