# chrome拡張でウェブページの背景を黒くする
## はじめに
この記事は、[茨大 Advent Calendar 2020](https://adventar.org/calendars/5043) 8日目の記事です。
茨城大学で情報工学専攻2年やってます。
暗い部屋で作業すると背景白のページがきついです。
chrome拡張で黒くしましょう。
全8工程で、工程6のfaviconだけちょっと面倒です。
他はほぼコピペ作業。
### １．作業ディレクトリ（作業ルート）を作成する。
名前は任意。2バイト文字とかやめた方が無難。
=> root
### ２．Chrome拡張として認識させる。
=> root/manifest.json
```json=
{
"name": "change color",
"version": "0.1",
"description": "change background color in certain page.",
"manifest_version": 2
}
```
### ３．ユーザに見せる画面を作る。
=> root/popup.html
```html=
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
}
</style>
</head>
<body>
<button id="changeColor"></button>
<script src="popup.js"></script>
</body>
</html>
```
なんかボタンがありそう。。。
### ４．ボタンを動かすファイルを作る。
=> root/popup.js
```javascript=
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
```
### ５．Chrome拡張として暗躍するファイルを作る。
=> root/background.js を作成。
```javascript=
chrome.runtime.onInstalled.addListener(function(){
chrome.storage.sync.set({color: '#000000'}, function(){
console.log("The color is black.");
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: "hackmd.io"},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
```
### ６．拡張用アイコンを準備する。
分かる人は自作して下さい。とりあえず、簡易作成例として以下。
https://favicon.io/
ここで TEXT ＝＞ ICO を選んで、適当に作って、Download。
今回はzip内のfavicon-16x16.png だけ使います。
root/favicon-16x16.png
### ６．１．状況整理 もう新しいものはいりません。
現在
```
root
├── background.js
├── favicon-16x16.png
├── manifest.json
├── popup.html
└── popup.js
```
### ７．増えたファイルなどなどをmanifest.jsonに追記する。
工程２に追記してます。よくわからない方は全部コピペし直すのが吉。
root/manifest.json
```json=
{
"name": "change color",
"version": "0.1",
"description": "change background color in certain page.",
"manifest_version": 2,
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "favicon-16x16.png"
}
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "favicon-16x16.png"
}
}
```
### ８．chromeで使う。
８．１．chromeのアドレスバーに以下をコピペし、拡張のメニューを出す。
`chrome://extensions`
８．２．右上のディベロッパーモードをオン。
８．３．以下赤丸から作ったファイル群の入っているrootディレクトリを読み込ませる。
８．４．このページ内で拡張機能の黒いボタンを押す。
以上です。
## おわりに
background.jsをいじれば色や対象サイトを変えられます。
問題があったらこのサイトを参考にしてるので、そちらを当たって下さい。
<a href="https://developer.chrome.com/extensions/getstarted">Getting Started Tutorial - Google Chrome</a>
オプションページ等、ここより詳細です。
最低限なので、今回のようにセキュリティに関わらない機能で使ってください。
Sign in with Wallet
Connect another wallet