【chrome拡張機能】Chrome拡張機能を使って二度とUber Eatsにアクセスできないようにした【小ネタ】

## はじめに
**Uber Eats**が便利すぎて辞められないのです。金食い虫なのよあいつマジで。
Uber Eats辞めるだけで相当な節約になるのは分かっているのに辞められない。UBER沼です。

自制心が弱すぎて自制できないのであれば、強制的にUber Eatsにアクセスできないようにしてやろうということで、ものの試しにchromeの拡張機能を自作してやろうと思いついた次第です。
とりあえずUber Eatsにアクセスできないようにしただけのスクリプトでなんだか寂しいので、もう少しまともなものを作りたいね。

## 下準備
まず驚いたのは、拡張機能を自作するのに**特別なアプリなどは一切不要**ということ。
コードを書くエディタがあればOKです。あとはchrome。

## 作り方と必要なもの
基本的にはJavaScriptが動きます。なのでJSファイルは必須。
あとは、`manifest.json`というファイルが必要になります。**以上です。**

適当なディレクトリを作って、jsファイルとmanifest.jsonをそのディレクトリに格納します。

```
tekito_directory
├── main.js
└── manifest.json
```


今回はお試しでUber EatsのURLを踏んだら（アラートとかは特に表示せず）ヒストリーバックするだけの処理にしてみたので、``main.js``は１行。
```javascript:main.js
history.back();
```
いや、ほんとはアラートのポップアップ作ったり色々気を利かせた処理書きたいんだけど一旦ね。

次に``manifest.json``。こいつがいないと拡張機能が作れないぞ。
```json:manifest.json
{
    "manifest_version": 3,
    "name": "Enforce Deny Access UBEREATS",
    "description": "enforce 'DENY' access UBEREATS.",
    "version": "1.3",
    "content_scripts": [
        {
            "matches": [ "https://www.ubereats.com/*" ],
            "js": [ "main.js" ]
        }
    ]
}
```
``manifest_version``：これから新しく作る場合は思考停止で「3」を入力。現在の拡張機能マニフェストのversionは3です。
``name / description``：拡張機能の名前と、説明文です。
![作った拡張機能](https://i.gyazo.com/dbdd71dbacc94314ae16fa9b1bc2df71.png "作った拡張機能")
こんな感じで名前と説明文が表示されます。
アイコンとかを出したければ、件のディレクトリに画像ファイルを格納し、``icons``プロパティで呼び出すようにします。
サイズは16,32,48,128の4種類。SVGとWebPはサポートされてないので、まぁpngが無難でしょう。
```
tekito_directory
├── main.js
├── manifest.json
└── icon.png
```
```json:manifest.json
{
    "manifest_version": 3,
    "name": "Enforce Deny Access UBEREATS",
    "icons": {
        "128": "icon.png"
    },
    "description": "enforce 'DENY' access UBEREATS.",
    "version": "1.3",
    "content_scripts": [
        {
            "matches": [ "https://www.ubereats.com/*" ],
            "js": [ "main.js" ]
        }
    ]
}
```
``version``:この拡張機能のバージョンです。``"version": "3.1.2.4567"``こんな感じの数値で。
``"version": "1.01"``とかにすると``1.1``にされます。先頭の0は無きものとして扱われるっぽい。
また、``1.0 beta``みたいな文字列を含めたい場合は、プロパティ名を``version_name``に変えると許容されます。

``content_scripts``:[コンテンツスクリプト](https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/Content_scripts)を用いる場合のオプションです。今回でいえば、Uber Eatsのページにアクセスしたときに動かしたい処理なので、こちらを使っています。
``matches``:どのcontextで？？を文字列の配列で定義します。ワイルドカードも使えるぞ。
``js``:どのjsファイルを動かすかをmatches同様、文字列の配列で表現します。今回は``history.back()``1行の``main.js``。

今回はあまりにも内容が薄いのでこれで終わり。

## 拡張機能の有効化（PCもスマホも）
![拡張機能](https://i.gyazo.com/ddffe28ff1b7be0b366e91b0409264db.png "拡張機能")
拡張機能の管理画面を開きます。このとき、デベロッパーモードを有効にします。

### PC版
「パッケージ化されていない拡張機能を読み込む」から、スクリプトを書いたディレクトリを選択するだけ。簡単。
一度読み込みをすれば、処理を変更したり``manifest.json``を書き換えたりした際も、「更新」ボタンで一撃です。
**manifest.json のversionを更新前より上位にしないとエラーになるので注意。**

### スマホ版
ちょっとめんどくさい。そしてたぶん、iPhoneは無理です。~~私はandroid信者なのでiPhoneなんて知らん。~~
スマホ版のchromeでは、そもそも拡張機能が使えません。実装も予定されてません。~~クソがよ~~
ということで、chromeベースでなおかつ拡張機能も使える[kiwi browser]()をインストールします。
iPhoneではOnionが使えるのかも。**iPhoneは知りませんごめんなさい。**

kiwi browserを起動するとオプションから拡張機能が選べるので、PC同様デベロッパーモードをonにしておきます。ここまで下準備。

次に、今回作った拡張機能を適用する作業です。
PC版の管理画面から「拡張機能をパッケージ化」を選びます。そうすると、「拡張機能のルートディレクトリ」と「秘密鍵のファイル（省略可能）」2つの入力欄が表示されますので、ルートディレクトリには作ったスクリプトのディレクトリを。秘密鍵は今回は使っていませんので割愛。使ってみてから書きます。

最低でも「ルートディレクトリ」の方を入力しパッケージ化を実行すると、作ったスクリプトのディレクトリと同じ階層に``XXX.crx`` ``XXX.pem``(XXXはスクリプトのディレクトリ名）2つのファイルが生成されますので、crxの方をgoogleドライブだったりどこかしらのストレージに保存しておきます。

crxファイルを保存できたら、kiwi browserで **+(from .zip/.crx/.users.js）**ボタンを押下し、先程ストレージに保存したcrxファイルを選択すればOK。

**Uber Eatsにアクセスした瞬間ヒストリーバックされて二度と注文できなくなりました。** やったぜ。

## 最後に
今回はお試しで、コンテンツスクリプトでUber EatsのURLに対してのみヒストリーバックを行う処理を作りました。
これだと、Uber Eats以外のサイトでも同じ処理を行いたい、あるいはUber Eatsでの処理を解除したいなんて場合に都度manifest.jsonを書き換えて拡張機能自体を更新せねばならず使い勝手が悪いと感じています。

なので、次回（いつだろう？）はAPIの機能を使って、ヒストリーバックを行いたいサイトのURLを自分で入力することで設定し、それらのサイトに対して処理を行うといったスクリプトを書いてみたいと思っています。それっぽい機能がAPIで実現できそうなので、もうちょい頑張ってみます。

## 参考リンク
https://developer.chrome.com/docs/extensions/

https://qiita.com/RyBB/items/32b2a7b879f21b3edefc

https://qiita.com/mdstoy/items/9866544e37987337dc79