Ryu's blog

ゆるくアウトプットしていきたい

Google Calendarのタブに切り替わるChromeExtensionを作った

この記事は信州大学工学部 W1棟6F Advent Calendar 2018 - Adventarの24日目の記事として投稿します。

今回は自分が前に作成したChrome拡張機能の話をしたいと思います。

はじめに

 自分はいつもブラウザはChromeを使っています。そのChromeの拡張機能としていろんな機能を追加することができるんですが、その機能を自分で作ってみた話です。作った拡張機能のコードを下記に載せておきます。

github.com

 作った機能はショートカット機能です。Ctrl+Shift+cと押すとGoogleCalendarのページのタブに移動する(GoogleCalendarのタブがなければタブが生成される)というシンプルな機能です。なぜその機能を作ろうかと思ったのかなのですが、いつも自分はスケジュール管理やTodo管理でGoogleCalendarを毎日使用しています。なのでいつもChromeでピンタブとしてGoogleCalendarを開いているのですが、タブを何個も開いていたりウインドウが何個もあるとタブを探すのが面倒でショートカットで飛べるようにしたいなと思っていました。欲しい機能はとても単純なものなので、それなら自分で作ってしまおうと思って作りました。

一般公開してます

 Chromeウェブストアでダウンロードできるようにしましたので、良ければ使ってみてください!

chrome.google.com

Chrome拡張機能開発について

 Chromeの拡張機能開発についてですが、思ったより簡単に開発が可能です。この機能もChrome拡張機能の作り方を公式ページで見ながら作成しましたが数時間で出来ました。基本的にはChromeのDeveloperページを見ていただければ機能の作成方法はわかると思います。

What are extensions? - Google Chrome

 ChrmoeExtensionの開発にはHTML、Javascript、CSSを使用します。基本的にはbackground scriptやcontent script、option page、popup用のUIなど必要なものを作成します。他にもmanifest.jsonというChromeExtensionに関する情報を持ったJSONファイルを作成する必要があります。これらを作成し、Chromeにこれらのファイルをアップロードすればローカルで動作を確認したり、機能を追加することが出来ます。そのためには、Chromeのデベロッパーオプションを使用する必要があります。以下の操作をすることで開発した拡張機能をローカルで動作確認等が行なえます。

  1. chrome://extensionsページを開く。
  2. ページ右上のDeveloper modeをオンにします。
  3. Load unpackedをクリックし、開発した拡張機能をアップロードします。
    f:id:ryu236:20181223225343p:plain
    ChromeExtensionの開発

 アップロードをすればもう機能を扱うことができるので、動作の確認が出来ます。

Chromeウェブストアでの公開

 今回開発した拡張機能は自分のためだけに作成したものなので公開する予定はなかったのですが、ブログの記事として投稿しようと思ったので、それなら公開もしてみようということでウェブストアに公開しました。公開するには機能を開発するだけでなく、スクリーンショットやプロモーションタイル画像などを用意する必要があります。それらをアップロードして公開が出来ます。あと、Chromeウェブストアに公開するときに一度だけ$5ドル払う必要があります。一度払ってしまえばその後に請求はないみたいです。あと今回は全部無料で公開していますが、課金モデルの拡張機能も作れるので何か課金モデルの拡張機能を作るのも良いと思います。

Distributing Products Built for Chrome - Google Chrome

まとめ

 簡単なChrome拡張機能を開発しましたが、自分は日々この機能を使って過ごしています。みなさんもPCを触るときはほとんどの時間をブラウザで過ごすと思うので、そのブラウザをより使いやすく自分用にカスタマイズするのは操作が快適になります。何か欲しい機能などがあり、ウェブストアに良い機能がない場合は自分みたいに作ってしまっても良いかなと思います。難しくないので! これからも何か欲しい機能があればChromeExtensionを作成していきたいなと思います。