リゼロ……観なおしたんです。
…………よかった。
はじめに
タイトルだけ読むと、 Chrome拡張 の入門記事みたいになっていますが、趣旨が結構違うのでご注意ください！
以前、『Qiitaの「いいね」を「●●」に変える』記事が流行ったんです。
こういうやつです。
当時、リゼロを観ていたから、「鬼がかってますね」バージョンを作ったんですね。
でも、Qiitaの『レイアウト変更』『SSL化』にともなって、使えなくなっていました。
それを使えるようにしました！ 1から……、いえ、0から！！
（全然、0から作っていません。ネタです）
大雑把にChrome拡張の作り方
manifest.json
Chromeは拡張機能を利用するとき manifest.json を参照します。
つまり、このファイルがないと動かないわけです。
{
"manifest_version": 2,
"name": "鬼 Re:Qiitaのいいねを鬼がかってますね",
"description": "Qiitaの「いいね」を「鬼がかってますね」に変えるChrome拡張………………デスッ！！",
"version": "1.0.0",
"content_scripts": [
{
"matches": [ "https://qiita.com/*" ],
"css": [ "css/rmt.css" ],
"js": ["js/rmt.js"]
}
]
}
manifest_version
2 です！
拡張機能のバージョンではないので、 それ以外の選択肢はありません！
（今後、変わる可能性はありますよー）
name
拡張機能の名前です。
鬼 Re:Qiitaのいいねを鬼がかってますね という中途半端な名前なのは、アイコンが指定されていない時に、 name の1文字目が採用されるからです。（雑ですみません）
公開用にアイコンを用意する場合などは、普通に名前を付けましょう。
（ブラウザの右上に出てくる、このアイコンのことですね。『鬼』って出ているのが、今回の拡張機能です）
description
拡張機能の説明です。
任意 項目ですね。
version
拡張機能のバージョンです。
公開する際は、厳密にバージョンをチェックされるみたいなので、気をつけてください。
content_scripts
与えられたパターンに URL がマッチしているページであれば、ブラウザがコンテンツスクリプトをロードします。
ロードするスクリプトなどがなければ、 任意 項目です。
matches
URLパターンを配列で指定します。
css
ロードする css を配列でしています。
js
ロードする js を配列でしています。
その他（ content_scripts 内の）
このあたり をどうぞ。
その他（ manifest.json 内の）
このあたり をどうぞ
テンプレートとかスクリプトとかスタイルとか
manifest.json が作成できれば、指定した html ファイルや、 js ファイル、 css ファイルなどを用意すれば、ブラウザがそれぞれのファイルをロードしてくれます。
この拡張機能について
先程の章で紹介した manifest.json が、この拡張機能の manifest.json です。
それを見ればわかるように、css/rmt.css と、 js/rmt.js を実装しています。
それぞれ紹介します！
（ ちなみに、 ）rmt.js などの rmt は「リアル・マネー・トレード」ではなく、「レムりん・マジ・天使」の略
css
/* いいね => 鬼がかってますね */
.LikeButton > .p-button::after {
content: "鬼がかってますね";
}
.LikeButton > .p-button > span:not(.fa) {
display: none;
}
/* ストック => 言質とりました */
.it-Footer_stock > button::after {
content: "言質とりました";
font-size: 1.4rem;
}
.it-Footer_stock > button > .it-Footer_stockLabel {
display: none;
}
/* なぜかホバー時の透過スタイルがないので、追加 */
.it-Footer_stock > button:hover {
opacity: .8;
}
『いいね』については前回の拡張機能と同じスタイルが適用されます。
『ストック』は class 属性などが変わったので、それに合わせてスタイルを用意しました。
これはQiitaの『ストック』ボタンの仕様かもですが、ホバー時にボタンを透過するスタイルがなかったです。
他のボタンと違うのが（個人的に）気持ち悪かったので、拡張機能には付けて置きました。
js
window.onload = () => {
// いいね => 鬼がかってますね
const like = document.getElementsByClassName('it-Actions_item-like');
if (like.length) like[0].lastElementChild.dataset.tip = '鬼がかってますね';
// ストック => 言質とりました
const stock = document.getElementsByClassName('it-Actions_item-stock');
if (stock.length) stock[0].lastElementChild.dataset.tip = '言質とりました';
}
旧レイアウトにはなかった、画面左側の『いいね』アイコンと、『ストック』アイコンに対する拡張です。
アイコンに文字は表示されていませんが、ホバー時にチップが表示されるようになっているので、そこを変更しています。
使い方
1. ローカルに落とす
ここにソースコードあるので、 clone するなり、ダウンロードするなりして、ローカルに置きましょう。
2. ローカルの拡張機能をChromeに読み込ませる
拡張機能 にアクセスして、次の手順でローカルの拡張機能を読み込みます。
- 右上の『デベロッパーモード』トグルをONに
- 左上の『パッケージ化されていない拡張機能を読み込む』をクリック
- ローカルに落としてきた拡張機能のフォルダパスを選択する（
manifest.jsonがあるフォルダ）
3. Qiitaを開き直す
『鬼がかってますね！』
チップも。
ボタンも。
※念の為、スーパーリロードしてもいいかも
おわりに
こんなネタ記事を最後まで読んでいただき、ありがとうございます。
きっと最後まで読んでくれた皆様はリゼロ好きってことですね！
「さぁ、みんなも勇気を出して、一緒に！」