はじめに
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は１行。
history.back();
いや、ほんとはアラートのポップアップ作ったり色々気を利かせた処理書きたいんだけど一旦ね。
次に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：拡張機能の名前と、説明文です。
こんな感じで名前と説明文が表示されます。
アイコンとかを出したければ、件のディレクトリに画像ファイルを格納し、iconsプロパティで呼び出すようにします。
サイズは16,32,48,128の4種類。SVGとWebPはサポートされてないので、まぁpngが無難でしょう。
tekito_directory
├── main.js
├── manifest.json
└── icon.png
{
"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:コンテンツスクリプトを用いる場合のオプションです。今回でいえば、Uber Eatsのページにアクセスしたときに動かしたい処理なので、こちらを使っています。
matches:どのcontextで？？を文字列の配列で定義します。ワイルドカードも使えるぞ。
js:どのjsファイルを動かすかをmatches同様、文字列の配列で表現します。今回はhistory.back()1行のmain.js。
今回はあまりにも内容が薄いのでこれで終わり。
拡張機能の有効化（PCもスマホも）
拡張機能の管理画面を開きます。このとき、デベロッパーモードを有効にします。
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で実現できそうなので、もうちょい頑張ってみます。
参考リンク