こんにちは！ エンジニアインターンの狩野悟です。Chrome Extensionを用いて業務効率化を行った経験を今回は紹介したいと思います。
社内での業務上の課題として、毎日ダウンロードしなければならないレポート類が多く、そのダウンロードに工数がかかってしまうというものがありました。
この課題を解決する手段としてChrome Extensionを用いました。これらの課題をChrome Extensionを用いて解決するメリットとして大まかに下記二つが挙げられます。
1つ目に関しては、Chrome Extensionを用いることでレポートダウンロードなどを行うためのサーバーを用意する必要がなくなりサーバーを用意する負担の削減、サーバー運用コストの削減という二つの面でメリットがあります。
2つ目に関しては、複数サイトからのレポート自動ダウンロードを実行するためには、それぞれのサイトのid, passwordを管理する必要がありますが、Chrome Extensionを用いることで、それらの管理をローカルマシーン内で完結させることができます。
Chrome Extensionとは、Chrome上で使うことのできる拡張機能です。これを用いることで、Chrome上でJavascriptの実行を行いwebサイトの情報の制御やchrome Extensionの各種APIを利用が可能になります。
Chrome Extensionでは、popup, content_scripts, service_workerという3つのJavascriptを実行させる方法があります。
popupとはユーザーからの入力を受け取ることなどができるユーザーインターフェイスです。今回の場合は、レポートの対象期間などの入力をここから受け取って処理を行なっています。
content_scriptsとはブラウザ上でJavascriptを実行できる環境で、開いているページの制御などを行うことができます。
service_workerとはブラウザ上とは別にバックグラウンドでスクリプトを実行する環境です。ただし、service_workerではDom操作を行うことやXHRを使うことができないなどの制約があります。
これら3つの環境は相互に通信することが可能で、popupで受け取った情報をcontent_scriptsに送信しそこで処理を行うなどといったことができます。
ここではChrome Extensionについてこれ以上の説明は省略するので、詳しく知りたい方はこちらを参照してください。
今回の課題において、レポートのダウンロードのためにはサイトへのログインが必要であり、reCAPTCHAなどが使われているサイトへのスクリプトを用いたログインは困難なので、スクリプトを用いたログインができる場合とできない場合でレポートダウンロードの実装方法を二つに分けました。
自動ログインができない場合は、ログインをChrome Extensionの利用者に任せて、その後スクリプトを実行することでレポートのダウンロードをするという方法を採用しました。ログイン後に受け取ったCookieをcontent_scriptsでそのまま利用することができるので、サイトへのリクエストを自由に行うことができます。
この場合の実装の概要は以下のようになります。
上記の実装では、一つのサイトで複数のレポートダウンロードのための操作が必要な場合、その工数を削減することができます。
自動ログインができる場合は、それぞれのサイトのid, passwordをlocal_storageで保存し、その情報を利用してサイトへのログイン、レポートのダウンロードを一括して行うことができます。しかし、この解決策には下記二つの問題点がありました。
1つ目の問題点は、サイトへのリクエストをservice_workerを用いて行うことで解決しました。Chrome Extensionでは、manifest.json内のhost_permissionにリクエスト先のホスト名を入れることで、service_workerでクロスオリジン間の通信が可能になります。
2つ目の問題点は、Extension側でid, passwordの暗号化を行うことで解決しました。id, passwordの暗号化後に、Chrome ExtensionのstorageAPIを用いてid, passwordのブラウザへの保存を行うことでid, passwordの保護を行いました。ただし、今回のケースでは、Chrome Webストアへの公開方法が限定公開だったためこの方法を用いることができましたが、Chrome Webストアへの公開を行い、不特定多数の人がExtensionを使う場合、ソースコードから暗号化のロジックを知ることができるため、安全なid, passwordの管理方法ではなくなってしまうことに注意してください。
この場合の実装の概要は以下のようになります。
service_workerで受け取ったレポートのデータをcontent_scriptsへと送信して、content_scriptsでデータのダウンロードをすることでブラウザでデータをダウンロードする挙動を再現することができます。
今回は、Chrome Extensionを用いて業務効率化を行った経験について紹介しました。この記事が業務効率化ツール作成のアイデアの一助になれば幸いです。
※2023年6月9日時点
