Re:ゼロから始めるChrome拡張


リゼロ……観なおしたんです。

…………よかった。

## はじめに



タイトルだけ読むと、 `Chrome拡張` の入門記事みたいになっていますが、趣旨が結構違うのでご注意ください！


以前、『Qiitaの「いいね」を「●●」に変える』記事が流行ったんです。
こういうやつです。

 :link: [Qiitaの「いいね」を「いいぞ」に変更する](https://qiita.com/kubosho_/items/9751e18e743360b522ad)

 :link: [Qiitaの「いいね」を「すごーい！」に変える](https://qiita.com/xsota/items/3f534d6ef71a4424fbc2)

 :link: [Qiitaの「いいね」を「鬼がかってますね」に変える](https://qiita.com/kurararara/items/17a85c3a743c098416be)

:link: [Qiitaの「いいね」を「マジ卍」に変える](https://qiita.com/comy/items/bf71c5d5a36692c1fb0c#_reference-7e11c2dbbe722717c51f)



当時、リゼロを観ていたから、「鬼がかってますね」バージョンを作ったんですね。
でも、Qiitaの『レイアウト変更』『SSL化』にともなって、使えなくなっていました。

それを使えるようにしました！　1から……、いえ、0から！！
（全然、0から作っていません。ネタです）

![鬼がかってますね](https://user-images.githubusercontent.com/19407009/57503203-251d2b00-732a-11e9-90a7-8f3ea6c876f1.gif)

## 大雑把にChrome拡張の作り方



### manifest.json

Chromeは拡張機能を利用するとき `manifest.json` を参照します。
つまり、このファイルがないと動かないわけです。

```json: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文字目が採用されるからです。（雑ですみません）
公開用にアイコンを用意する場合などは、普通に名前を付けましょう。
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135956/a14dbf42-70cf-59d7-4ae2-395d4348749a.png)
（ブラウザの右上に出てくる、このアイコンのことですね。『鬼』って出ているのが、今回の拡張機能です）



#### description

拡張機能の説明です。
**任意** 項目ですね。



#### version

拡張機能のバージョンです。
公開する際は、厳密にバージョンをチェックされるみたいなので、気をつけてください。



#### content_scripts

与えられたパターンに URL がマッチしているページであれば、ブラウザがコンテンツスクリプトをロードします。
ロードするスクリプトなどがなければ、 **任意** 項目です。



##### matches

URLパターンを配列で指定します。



##### css

ロードする `css` を配列でしています。



##### js

ロードする `js` を配列でしています。



##### その他（ `content_scripts` 内の）

[このあたり](<https://developer.chrome.com/extensions/content_scripts#declaratively>) をどうぞ。



#### その他（ `manifest.json` 内の）

[このあたり](<https://developer.chrome.com/extensions/getstarted>) をどうぞ



### テンプレートとかスクリプトとかスタイルとか

`manifest.json` が作成できれば、指定した `html` ファイルや、 `js` ファイル、 `css` ファイルなどを用意すれば、ブラウザがそれぞれのファイルをロードしてくれます。



## この拡張機能について

先程の章で紹介した `manifest.json` が、この拡張機能の `manifest.json` です。
それを見ればわかるように、`css/rmt.css` と、 `js/rmt.js` を実装しています。
それぞれ紹介します！

（ ~~ちなみに、 `rmt.js` などの **rmt** は「リアル・マネー・トレード」ではなく、「レムりん・マジ・天使」の略~~ ）

### css

```css:css/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

```javascript:js/rmt.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. ローカルに落とす

:octocat: [Re:Qiitaのいいねを鬼がかってますね](https://github.com/kurarararaa/Re-Zero-Starting-Qiita-RMT)

ここにソースコードあるので、 `clone` するなり、ダウンロードするなりして、ローカルに置きましょう。



### 2. ローカルの拡張機能をChromeに読み込ませる

[拡張機能](<chrome://extensions/>) にアクセスして、次の手順でローカルの拡張機能を読み込みます。

1. 右上の『デベロッパーモード』トグルをONに
2. 左上の『パッケージ化されていない拡張機能を読み込む』をクリック
3. ローカルに落としてきた拡張機能のフォルダパスを選択する（ `manifest.json` があるフォルダ）



### 3. Qiitaを開き直す

**『鬼がかってますね！』**

![鬼がかってますね](https://user-images.githubusercontent.com/19407009/57503203-251d2b00-732a-11e9-90a7-8f3ea6c876f1.gif)
チップも。


![鬼がかってますね](https://user-images.githubusercontent.com/19407009/57503210-2a7a7580-732a-11e9-8719-216be0852b2e.png)
ボタンも。



※念の為、スーパーリロードしてもいいかも



## おわりに

こんなネタ記事を最後まで読んでいただき、ありがとうございます。
きっと最後まで読んでくれた皆様はリゼロ好きってことですね！

「さぁ、みんなも勇気を出して、一緒に！」