Chrome拡張機能を作ってみた

務めている会社でChatworkのタスク機能でのタスク管理制度が 開始されたので、タスクを一覧にしてダウンロードできるような機能が欲しくなりChrome拡張機能を作成しました。

sidebar

ダウンロード

Chatworkだけで動くような拡張機能

Chromeの拡張機能は manifest.json で挙動を定義します。

今回の拡張機能は、Chatworkだけで動かすものなので、.content_scripts には下記のように記述しました。

{
  "content_scripts": [
    {
      "matches": [
        "https://www.chatwork.com/**"
      ],
      "js": [
        "bower_components/jquery/dist/jquery.min.js",
        "scripts/contentscript.js"
      ]
    }
  ]
}

bower で jQuery を読み込めるようにしてあります。

Chatworkは、今のところフロントエンドでjQueryを使用しているのですが、 content_scripts から読みこまれたJavaScriptはブラウザで動いているJavaScriptの実行空間とは独立しているので、拡張機能内でも読み込む必要があります。

ダウンロード処理の実装

大まかに下記のように実装しました。

  1. 画面からタスクの取得
  2. バイナリを作成
  3. ダウンロード用のaタグを作成しクリック
function download() {
  // ファイルの内容
  var content = '';
  // タスクのクラスを指定して、画面内のタスクを対象にする
  $('.chatInfoTaskContentArea')
    .each(function () {
      // タスクをループで回して、追記していく
      content += '==========================\r\n' // \r\n はWindows対応のため
        + $(this).text() // タスクの内容を習得
          .replace(/\n/gi, '\r\n') + '\r\n\r\n';
    });

  // バイナリ作成
  // application/x-msdownloadとすることで、ダウンロード用のファイルにする
  var blob = new Blob([content], { 'type': 'application/x-msdownload' });

  // 作成したバイナリをダウンロードするaタグを作って、すぐに押す
  $('<a download="タスク一覧.txt">')
    .attr('href', window.URL.createObjectURL(blob))
    .get(0)
    .click();
}

結果のファイルはこんな感じに出力されます。

==========================
あれをあれする。


==========================
あれをあれする。
あれをこんなかんじにする。


==========================
これをああする。


まとめ

もともと個人で使うためのものだったので開発者ツールを開いて、上記のスクリプトを実行していたので、なんだかんだ1分くらいの作業になってしまったのですが、Chrome拡張機能をつくってみると1秒で完了する作業になりました。

Webアプリでの繰り返し作業は、かなりストレスなので作業が固定化されている場合に拡張機能をつくって業務効率化するアプローチはかなりいい感じだとおもいました。