Chrome Extension 「DevMark」が審査中
お久しぶりです。
最近本業がそこまで忙しくないので早上がりしてChrome Extensionの開発して審査に出してみました。
審査に最大30日かかるらしいのでその間に記事を書きたいと思います。
何を作ったのか？
サイトにアクセスした際に上からドーンとラベルをのせる開発ツールです。
「Development環境、Staging環境、QA環境、本番環境」が乱れている現場にいる人は今自分がどこの何を見ていたっけ？
あっやべ。
うっかり本番を触っていた。となることがあると思ったんですね。
実際に現場で何回か遭遇した光景です。
それを視覚的にどうにか改善したいと思ったのが今回の開発です。
また、私はRuby on Railsの開発をいくつかしたことがあったのですがrack-dev-markというのが有名です。
だけど、複数リポジトリ持っていたり、設定したりと面倒だったので開発者以外でも使える様にしてみました。
実装はHTMLとCSS（Bootstrap）とJavaScript（jQuery）を使ったすごく簡単なものだったのですが、Chrome Extensionの開発ははじめてだったので少し時間がかかってしまいました。
開発時間はざっと15時間くらいです。
みんな実装できると思います。
開発にあたり参考にしたサイトは以下です。 developer.chrome.com
初っ端つまずくのはdebug。 こちらを参考にして解決しました。
chrome-extension://{エクステンションID}/new.html
この辺が解決すると残る課題がstorage系だと思うのですがそれらはしっかりドキュメント読めば簡単なものは多分作れます。
開発が終わったら次はChrome Web Storeに登録しにいくのですが、 雰囲気を理解するためにこちらを参考にさせてもらいました。
UIが結構変わっているけどもページに課金してたどり着ければ僕はOKでした。 アプリの紹介を英語で書いて終わりです。
アプリのzipはMacの右クリックから圧縮でやりました。
現在がこんな感じです。
残っている改良点は
- ラベルの位置を複数指定できる様にする。
- 見た目をかっこよく。けっこう雑魚いので。
- bootstrapのスポイドを使える様にしたけどもpopup.htmlからサイト内の色の取得ができないので修正。
- 手入力が面倒なのでコピー機能があってもいいかもしれません。
使っているライブラリーのアップデートがあるタイミングでこれらの課題を1つずつ改善したいと考えています。
アプリのフィードバックをもらえる様に今回は全部オープンにしているから審査に通ったら試してもらえたら幸いです。
続: 公開されました。 yposi2.hateblo.jp
