前提知識
chrome拡張機能：chromeをカスタマイズできるものがある
javascript:拡張子js webページ操作に強いプログラミング言語
#やること
初めてchromeの拡張機能を作る人向け
例として、Qittaの派手な緑色をグレーに変更するためにクロームの拡張機能を作る
今回は自分で使うだけで公開設定はしない
本当に最低限の設定
これでQiita使っているのがぱっと見バレないね!!
流れ
- 自分のPCにファイルを作る
- ファイルにはhttps://qitta.com/がつくときにはcontent.jsを実行する用に設定するmanifest.json
- 実行したい文を書いたcontent.js
- chromeで読み込む
ファイル構成
src
|- manifest.json
|- content.js
| ファイル名 | 解説 |
|---|---|
| manifest.json | chromeの拡張機能の設定ファイル |
| content.js | 実行されるjsファイル |
ファイル説明 manifest.json
{
"manifest_version": 2,
"name": "qitta_color",
"version": "1.0.0",
"content_scripts": [{
"matches": ["https://qiita.com/*"],
"js": [
"content.js"
]
}]
}
このファイルはchromeで読み込む際にgoogleが指定しているファイル。ファイル名を書き換えてはいけない。またjsonファイルにコメントアウトはできないので注意()
| 言葉 | 意味 | どうすればいいか |
|---|---|---|
| manifest_version | このファイルのバージョン | 今の所 2でいいらしい |
| name | 拡張機能の名前 | 好きに決めていい |
| version | 拡張機能のバージョン | アップデートときに増やす、最初は1とかでいい |
| content_script | URLの指定とどのファイルを実行するか | ワイルドカード使ってURLを指定、jsの方は自分で作ったファイル名(今回はcontent.js) |
ファイル説明 content.js
window.onload = function() {
document.getElementsByClassName('st-Header').item(0).style.backgroundColor = '#808080';
};
実行したいjavascriptのファイル
追記2022.8
(qiitaの仕様変更でこれでは色が変わらなくなった)
(要素は自動で取得できると良いが、今回は本質ではないので省略)
すごいざっくり説明するからあんまり参考しないほうがいい
| 言葉 | 意味 |
|---|---|
| window.onload | ページが読み込まれたときに実行 |
| docoment.getE.....('st-Header') | st-Hederとclass宣言されているものを取得 |
| item(0) | 取得したのの最初を参照 |
| style | スタイル |
| backgroundcolor | 背景色 ここをcolorとかにすると文字色が変わる |
| #808080 | グレーのカラーコード |
今回はクラス設定されていると色変更なのでこう
Iｄ設定されている時は
document.getElementById('st-Header').style.backgroundColor = '#808080';
javascriptは chromeで 右クリック 検証 console で行うことができる
HTMLとCSSの構成も見ることができる
詳しくは「chrome 検証」でgoogle検索
読み込み方
URLにこれを入れるか 設定から拡張機能のところに行く(httpsをつけるといかないので注意)
chrome://extensions/
パッケージ化されていない拡張機能を読み込むを押して
srcという名前のフォルダを開けば追加される。
こんな感じ
Qittaにアクセスする 無事グレーになっている
他のところをもっと変えたかったらjsのファイルに追加していくのがよい、今回はわかりやすさ重視でこれだけにした
参考
https://qiita.com/mdstoy/items/9866544e37987337dc79
https://qiita.com/RyBB/items/32b2a7b879f21b3edefc
もっと細かく作り込みたいならこの辺りを見るのがよいと思います。参考になりました