１時間でChrome拡張作ってみた！

なぜか急にChrome拡張というものを作ってみたくなったので、作ってみました！:sunglasses:


## 作ったもの

Instagramってログインしてないと、全部の写真見えないんです...。

![instagram-movie-01-before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/f2c83b9a-3eb0-e2b3-4017-40603f051442.gif)


アカウント作ってログインすればいいって話なんですけど、見るためだけにアカウント作るのがなんかあれだったので、ログインを促すポップアップが表示されないようにしました！

ソースコードはGithubリポジトリを参照してください ↓
https://github.com/Michin0suke/instagram-extension-pack



## 1. マニフェストファイルをつくる！

所要時間：15分

Chrome拡張にはマニフェストファイル（`manifest.json`）というのが必須らしいです。[この記事](https://qiita.com/mdstoy/items/9866544e37987337dc79)を参考にさせていただきました！

```json
{
  "manifest_version": 2,
  "name": "Instagram without login",
  "version": "1.0.0",
  "description": "Chrome extension to remove login prompts on Instagram sites",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
	},
  "content_scripts": [
    {
        "matches": [ "https://www.instagram.com/*" ],
        "js": [ "script.js" ]
    }
],
}
```

こんな感じで完成！

`description`は英語書けないので、Google翻訳にやってもらいました笑

無理に英語を使わなくても、日本語でも大丈夫です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/091e6ad1-a0cf-c57f-9769-b7fac27cfd51.png" alt="Google翻訳" height=280px/>




## 2. アイコンを用意！

所要時間：15分

Illustratorでテキトーに作りました笑

![icon128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/8843171a-b09b-0014-5308-dc146c88d9ac.png)


なんかアンチインスタグラムみたいなアイコンになっちゃったけど配信はしないのでOK！

マニフェストに指定した通り、16px\*16px、19px\*19px、48px\*48px、128px\*128pxを用意しました。



## 3. スクリプト書くよ！

所要時間：20分

`script.js`に以下を書き込みます。

```javascript
document.querySelector('.ctQZg').remove()
const interval = setInterval(() => {
  if (document.querySelector('.RnEpo.Yx5HN')) {
    document.querySelector('.RnEpo.Yx5HN').remove();
    setTimeout(() => document.body.style.overflow = 'visible', 50);
    clearInterval(interval);
  }
}, 100);
```

今回のスクリプトは数行なので簡単！

JavaScriptの簡単な説明をすると、0.1秒毎にログインポップアップが表示されているか確認して、表示されていれば消して、`body`に付与されるスクロール禁止も外すというものです。ポップアップを消したあとは、`clearInterval()`で繰り返し実行を止めてます。

> 追加で、ログインボタンとか下に表示されるバナーも非表示にしました！
> **before**
> <img width="400" alt="スクリーンショット 2020-01-23 14.06.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/faef1525-3a77-d39d-0277-e3166a92ef5b.png">
> **after**
> <img width="400" alt="スクリーンショット 2020-01-23 14.06.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/f3dc031d-5eca-18ca-dbd7-50a4eeec8ab6.png">




## 4. Chromeで実際に使ってみる！

所要時間：10分

『パッケージ化されていない拡張機能を読み込む』でもいいんですが、毎回警告が表示されるらしいので、[chrome://extensions/](chrome://extensions/)から『拡張機能をパッケージ化』してみます。

> 下の画像だとダウンロード直下にソースファイルを含むディレクトリを置いていますが、この記事の最後にある**ファイル構成**のように２重のディレクトリ構成にしておいたほうが、`.pem`や`.crx`が管理しやすくて良さそうです。

<img width="400" alt="拡張機能をパッケージ化" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/d241edb4-9963-ec99-fbbc-8ee6b126ee7c.png">

ポチポチして鍵を作って、生成された`.crx`ファイルをChromeにドラッグ&ドロップ！

### Before

![instagram-movie-01-before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/f2c83b9a-3eb0-e2b3-4017-40603f051442.gif)

### After

![instagram-movie-01-after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/d811174a-2827-3178-b084-5af3a5ec5656.gif)


ポップアップは一瞬表示されるけど、すぐ無くなって快適！:tada::tada:

これでインスタのアカウントなくてもインスタグラムを楽しめます！

（なぜそこまでしてアカウントを作ろうとしないのか）



## ファイル構成

```
instagram-extension-pack
├── instagram-extension
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon19.png
│   ├── icon48.png
│   ├── manifest.json
│   └── script.js
├── instagram-extension.crx
└── instagram-extension.pem
```



## 感想

思ったより簡単に作れた！:grinning: