こんにちは。管理人のgokkenです!

以前まで、チャットツールとしてslackを使っていたのですが、会社はchatworkを利用しています。

そこで、chromeの拡張機能がhtmlとcss、そしてjsで作れると言うのを聞いて、「なんか作りたい!」と思い、作ってみました。

注意

チャットワークのHTML構造に依存するので、情報が古くなって動かなくなることがあります。ご了承ください。

制作物

  • 期限の日付の後に(○日後)のように、タスクまでの残り日にち(土日祝日を除く)を表示させる。

  • タスクの期限が過ぎていた場合、期限切れを表示させる。

リンク先はこちら

まず確認

実際に動くかどうかを確認してみます。

chromeの拡張機能には必ず、manifest.jsonが必要となります。

今回作ったものを以下にあげます。

manifest_versionは最新にしておきましょう。現在の最新versionは2です。

その他説明していきます!

name,version,description

nameはこのchrome拡張機能の名前で、versionは現在の拡張機能のversion、descriptionは拡張機能の説明となります。

content_scripts

content scripts

content scriptとは、Webページのコンテキストで実行されるJavaScriptファイルで、標準のDOMを読み込み検索をし、マイクロフォーマートデータを処理するものです。

そして、このcontent_scripts内のmatchesは、アクセスを許可するURLが記述してあり、jsは読み込むデータを記述してあります。

では、実際にalertで確認してみます。

このmain.jsに

を記述します。

そして、

ウィンドウ->拡張機能で

ディベロッパーモードにチェックを入れ、パッケージ化されていない拡張機能を読み込むをクリックして、作成したフォルダを選択します。

そしてchatwork内に入ってalertが表示されたら、OKです。

タスクの期限を表示する

本題のタスクの期限を表示させていきます。

chatworkはhtmlの構造は属性で与えられているため、取得は簡単です。

しかし、取得するタイミングが難しく、とるタイミングを間違えるとうまく取得ができません。

そこで、MutationObserverを用いて、DOMを取得しています。

これで、うまく呼び出しが可能となります。

今回の処理は再利用されないので、即時関数で包んで、スコープの外側へ影響を与えてしまうことを防ぎます。
そして、

これで、画面を表示している間、DOMを監視させます。

今回は、日付の計算にmoment.jskoyomi.jsを使っています。

moment.jsを用いて、日付をkoyomi.jsが取り込みやすいデータに変換をし、営業日の日にちによってタスクの期限の表示を制御しています。

表示結果は上の図のようになります。

ちゃんと動いていますね!

まとめ

今回は、chromeの拡張機能を用いてchatwork内のタスクをいじりました。

DOM内の監視や、即時関数など勉強になりました。

一度みなさんも作ってみてください!

参照URL

Chrome拡張を作ってweb版チャットワークを改造してみた | WEB EGG

Javascriptで即時関数を使う理由

chrome content scripts