JavaScript プログラミング

RedmineチケットをTaskWorldタスクに変換するChrome extension作った(2)

投稿日:




前回
ブックマークレットを作ってみたものの、クロスドメインエラーが出て動かなかった

クライアント側だけで解決する方法が思いつかなかったので、Chrome extensionを作りました。

スポンサーリンク

Chrome extensionとは?

Chromeの機能を拡張するためのプラグインです。
Chrome ウェブストアでいろいろ公開されています。

上記でダウンロードするほかに、自分で作ったソースを読み込んで使うこともできます。

開発準備

言語

  • HTML
  • CSS
  • JavaScript

ライブラリ

開発対象

Redmineの画面上でボタンを押すと、TaskWorldにタスクを自動追加するpage_actionを作ります。
ちなみに、似たような機能でbrowser_actionというのもありますが、

page_action:特定のページで動作するもの
browser_action:すべてのページで動作するもの

ということのようです。
page_actionの場合、対象のページ以外はextension ボタンが非活性になります。

処理概要

オプションページ
  1. ユーザーが入力したTaskWorldのEmailとPasswordを引数にauth APIを実行する
  2. 取得したaccess_tokenをlocalStorageに保存する
チケット登録(extensionボタン押下)
  1. Redmineから情報を収集する
  2. オプションページで登録したaccess_tokenをlocalStorageから取得する
  3. task.create APIを実行し、TaskWorldにタスクを作成する
  4. APIの実行結果からtask_idを取得する
  5. 取得したtask_idを引数にtask.update APIを実行し、作成したタスクに情報を追加する

構成

こんな感じ。
※.gitignoreはgitの除外設定ファイルなので不要
※.vscodeはVS Codeの設定ファイルなので不要

スポンサーリンク

開発開始

manifest.json

extensionの設定を書きます。

今回大事なのはここ。

background.js

extensionの動作ルールを追加

開いているページのURLがRedmineのページだったら、extensionボタンが有効になるようにします。

extensionボタン押下時のイベントを設定

extensionボタンが押されたことをscript.jsに通知します。

backgroundで処理する内容を書く

上記と反対に、他のjsからmessageを受信したときに実行する処理を書きます。
messageの内容はrequestオブジェクトの中に入っています。

処理を終えたら、sendResponse()で呼び出し元にレスポンスを返します。

manifest.json > permissionでドメインを指定しておくと、XMLHttpRequest()で複数のドメインとやり取りできるようになります。

common.js

background.jsを呼び出す関数を作成。
非同期なので、promise()をreturnしてresolve()で戻り値を返します。

オプションページ

こんなのを作ります。

options.html

入力フォームをHTMLで作成します。
情報の送信はoptions.jsで行うので、HTMLのheadで必要なファイルを読み込んでおきます。

options.js

auth APIで認証情報を取得したaccess_tokenをLocalStorageに保存し、content_scriptsで使えるようにします。
ただし、LocalStorageは同じページ内でないと使えないので、

  1. options.jsからbackground.jsにaccess_tokenを渡してLocalStorageに保存
  2. scripts.jsからbackground.jsにkeyを渡してLocalStorageから取得

とします。

APIの実行とbackground.jsとのやり取りは非同期なので、promiseを使って非同期処理が終了してから残りの処理を実行するようにしています。
(と思ったらPOSTはpromise&common.js使ってなかった…まぁいいか…)

ここまで作ったら、chromeの拡張機能でソースを読み込めば、オプションページが動く、はず。
次回、content_scriptsを作成してextensionの動作確認をします。

-JavaScript, プログラミング
-, , , ,

Copyright© そんなこと猫でもできる , 2019 All Rights Reserved Powered by AFFINGER5.