10分でできるChrome拡張入門

前書き

みなさん、Chrome Extension使ってますか？
タイムトラッキングやURLのQR表示など様々な便利ツールがそろってますよね。

今回はそんなchrome拡張を自作してみようという趣旨です。
凝ったものを作ろうとすると知らなければいけないことが大量にあるのですが、入門ということで単一の機能を持ったものをローカルで実行できるところまでをご案内しますです。

作るもの

twitter、使ってますか？
ちなみに私はバリバリ使ってます。
呟く頻度はそこまでではないですが暇さえあればTLを眺めてしまい、貴重な時間が消え去ってから現実に気づく毎日です。

このままではよくないのでtwitterを5分以上開いていたらアラートを出してくれるchrome拡張を作ることにします。（スマホで見れば解決とかそんなことは言ってはいけない）

本編

下準備

まずは下準備をします。
中身はともあれ動くサンプルを用意しましょう。

必要なファイルは以下の2つ。

• extension-sample
  • manifest.json
  • content.js

それぞれ内容は以下の通りです。

manifest.json

{
    "name": "Sample",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Sample Chrome Extension",
    "content_scripts": [{
        "matches": ["https://twitter.com/*"],
        "js": [
            "content.js"
        ]
    }]
}

content.js

window.alert('You Opened Twitter！');

シンプル！
manifest.jsonというのがchrome拡張をchrome拡張たらしめている重要なファイルです。
ここにどのような拡張機能なのかという定義を書きます。
今回の内容はmanifestに定義できるものの一部になってます。
詳しくはこちら

name, version, manifest_version, descriptionはまぁその名の通りですね。
肝はcontent_scriptsです。
matchesに定義したURLとブラウザが開いたURLが一致した場合にjsで定義したJavaScriptファイルが実行されます。

とりあえずcontent.jsではalertを出すだけにしておきます。

ローカルのChromeに取り込んでみよう

下準備ができたので実際にChromeで動かしてみましょう。
うまくいけばtwitterのページを開いた時にalertが出るはずです。

手順1 拡張機能許可設定

デフォルトのChromeでは公式のChrome ウェブストアを介したChrome拡張しか実行できないようになっています。
そのため、まずはchromeにローカルの拡張機能を許可するよう設定を行います。

ブラウザのツールバーから拡張機能管理画面を開きます。

↓こんなやつ

あるいはここをクリック。

続いて画面右上にあるデベロッパーモードをONに。

↓

これで準備完了です。

手順2 拡張機能追加

同じく拡張機能管理画面にある「パッケージ化されていない拡張機能を読み込む」ボタンをクリック。
追加する拡張機能のディレクトリを聞かれるので先ほど作ったextension-sampleディレクトリを選択。

すると、拡張機能一覧に以下のようなものが追加されているはず。（IDはランダム）

手順3 動作確認

追加されていればすでに拡張が機能しているはずなのでTwitterにアクセスしてみましょう。

アラートが出ていれば成功！
確認できたら毎回アラート出るのもうざいので拡張機能管理画面からOFFにしておきましょう。

本機能開発

さて、動作確認ができましたが開くたびにアラートが出るのではうざったいしOKを押してしまえばずっとTwitterをひらけてしまうので意味がありません。
当初の目的通り5分たったらアラートが出るように機能を追加しましょう。

content.js

this.intervalId = setInterval(() => {
    window.alert('そろそろTwitter閉じて作業しましょう');
}, 300000)

まぁシンプル。
setIntervalで5分にあたる300000msecを指定します。
テストで10000msecで10秒とかも試してみるといいかもしれません。

さて、書き換えたら再度chromeに取り込みましょう。
ファイルを書き換えたら勝手に反映されるようなことはないのでちゃんと手作業で再読み込みさせる必要があります。
拡張機能管理画面のSampleのカードにリロードボタンがあるはずなのでこれをクリック。

これで同じディレクトリを再読み込みしてくれるので再度Twitterを開いて動作確認してみましょう。

完璧！

蛇足

今のままではアラートをOKで消してもまた5分後にアラートが出ます。
目的を考えれば正しい姿ですが、もしサンプルとしてではなく恒常的に使いたいという方がいらっしゃったら以下のようにすればアラートが出る回数を1度だけにできます。

content.js

this.intervalId = setInterval(() => {
    window.alert('そろそろTwitter閉じて作業しましょう');
    clearInterval(this.intervalId)
}, 300000)

まとめ

いかがでしたでしょうか。
この仕組みならJavaScriptさえかけたら結構いろんなことができそうですよね。

実際にはhtmlやcssを読み込ませてDOMを弄ったり、詳細なオプション画面を出せたりとできることの幅はかなり広いです。
もし気になる方は他のサイトなども参考にしてもっと複雑なものにも挑戦してみてください。

今回の拡張で言えば、アラートを出すサイトを指定できたり、アラートまでの時間を指定できたらもっと便利になりそうですね。