Zenn
🔰

Backlog 担当課題の一覧表示＆通知される Chrome 拡張の開発

2021/02/23に公開
Chrome拡張
Backlog
idea

Backlog の確認のためいちいちウェブページを開くのはだるい＆メールを見ない人間なので、複数のワークスペースで自分のバックログの一覧を見られる・担当課題ができたら通知がくる Chrome 拡張を作成しました → yk-lab/backlog-notification

yk-lab/backlog-notification - GitHub

使い方

ダウンロードとインストール

まずはダウンロードとビルドをして、インストールします（ストア未公開です）。
※npm コマンドが使用可能な環境で実行してください

クローンとビルド
$ git clone git@github.com:yk-lab/backlog-notification.git
$ cd backlog-notification
$ npm install
$ npm run build

Chrome 拡張のインストール手順:

  1. chrome://extensions を開く
  2. 右上、「デベロッパーモード」を有効にする
  3. 「パッケージ化されていない拡張機能を読み込む」をクリック
  4. 「backlog-notification/build」フォルダを選択

設定

本拡張のオプションページを開いてください。
下のような画面が出てきますので、ドメインとAPIキーを入力して保存してください。
（APIキーの取得方法: APIの設定 – Backlog ヘルプセンター）

機能紹介

担当課題一覧

拡張機能のアイコンをクリックすると担当課題の一覧が表示されます。

担当課題通知（ベータ機能）

担当の課題が設定されたら通知します（一定時間おきに取得し通知）。

工夫したところ

リスト表示部のDOM生成

HTML にちゃんと template というタグがあることを今更ながら知りました（Vue.js とかの拡張ではなかったなんて）。
今回はその template タグを使いつつ、課題一覧の DOM 生成を行うようにしました。

複数スペース対応

そもそもいろいろなところを開くのが鬱陶しいので始めたため、ここは拘りました。
json-editor/json-editor: JSON Schema Based Editor を使用して複数のスペースの設定用フォームをサクッと導入しました。

最後に

複数のバックログのスペースがある際に担当になっている分だけでもすぐに確認できるようにしておきたく、Chrome 拡張機能は作ったことがなかったため作成しました。
もしもっと便利な拡張機能をご存知でしたら、教えていただけると嬉しいです。
GitHub での issue や Pull Request、Twitter の DM でのバグ報告，アイディア提供などなどお待ちしております。
コードのリファクタリングも大歓迎です！

参考

Chrome API ドキュメント

import/require・Webpack

JSLint（JSHint）

DOM生成

デザイン

json-editor

その他

Discussion