Chrome拡張機能でルーチンワークを自動化しよう  -実装編-

Chrome拡張機能でルーチンワークを自動化しよう  -実装編-

みなさま、こんにちは。
開発部 マネージャーの松本です。

前回に引き続き、Chrome拡張機能でルーチンワークを自動化の話をしていきましょう。
今回は具体的な実装方法についてお話させていただきます。
それでは、最低限の作業でChrome拡張機能を作り、基本を押えましょう。
何事も基本が肝心です。

はじめに

最初に準備するものについてですが
1.Chromeがインストールされているパソコン
2.お好みのテキストエディタ
以上になります。
基本的にパソコンでChromeが使える状態であれば問題ありません。

作業開始

それではさっそく作業を開始しましょう。
今回の作業は3段階あります。
以下にならって順にやっていきましょう。

1.manifest.jsonというファイルを作り、内容を記述しましょう

上記をコピペして、manifest.jsonという名前で保存してもらえばOKです。
これが最低限の記述例になります。また記述方法にはお作法があります。
例えば、”matches”と書かれている内容をご説明すると、Chromeで開いているURLと一致する場合のみスクリプトを実行するという条件を記述する箇所になります。
今回の記入例の場合、すべてのURLの場合にcontent.jsを実行するという意味になります。
また、記述出来る内容をすべてご紹介するとここでは話が進まなくなりますので
詳しく知りたい方は「manifest.json」で検索するといいでしょう。

2.content.jsというファイルを作り、自動化したい処理を記入しましょう

ここで記述する処理がchromeで行う作業を自動化するスクリプトを記述する箇所になります。
今回は例として下記の様な処理を記述してみましょう。

3.任意の場所に拡張機能の名前を付けたフォルダを作り1と2で作成したファイルをこのフォルダに入れましょう

1と2で作成したmanifest.jsonとcontent.jsを拡張機能の名前を付けたフォルダに入れば作業は完了です

試しに動かしてみよう

Chromeでアドレスバーを使ってchrome://extensionsに移動し、先ほど作ったフォルダをドラッグアンドドロップしましょう。
これでChromeで先ほど作った拡張機能を実際に使うことが出来ます。
ためしに、Chromeで適当なページに移動すると先ほどcontent.jsに記述しておいたアラートが表示されるはずです。
これでは役に立つ拡張機能ではないので、Chromeからchrome://extensionsに移動して拡張機能を削除してください。

最低限の作業はこれだけ

以上でChrome拡張機能を作成することが出来ました。
今回ご紹介した方法が、最低限の作業でChrome拡張機能を作成する方法です。
この方法を使えば、Chromeで新たにWebページを表示する場合に、自作したJavaScriptを実行することが出来ます。
またmanifest.jsonを編集することで特定のWebページにだけにJavaScriptを実行を制限することが出来ます。
これで簡単なJavaScriptで作業を自動化することが出来ます。

これを応用すると

例の様な最低限の方法からさらに応用することでいろんなことが出来るようになります。
例えば、タブごとに開いたWebページの情報を収集蓄積することで、タブごとの処理を変更したり、蓄積したデータを任意のファイルで出力することが出来ます。
興味がある人は、「background.js」で検索してみて下さい。
色々と情報があると思いますし、ここまでこの記事を読んだあなたにはきっと理解できることが多いはずです。

最後に

いかがでしたでしょうか?
いとも簡単にChrome拡張機能が作れることに驚かれる方も少なくないと思います。
しかし、まだまだChrome拡張機能で出来ることは多いです。
今回ご紹介したChrome拡張機能を使った自動化はほんの小さな一歩です。
けれども、あなたのアイデアと行動で作業を自動化し、貴重な時間を浪費しない一歩になれば幸いです。
それでは次回記事でお会いしましょう!それでは!


Previous: Firebaseを使ってみたい その2 Next: Flexboxはじめの一歩

© 2017 ALL CONNECT Inc. All Rights Reserved.