Chrome ExtentionでDOM操作してみた!

2018年1月29日
macOS プログラミング・開発 仮想通貨

皆さん、こんにちは。

私は、普段、PCではmacOSを使用しているので、ウェブブラウザはApple純正のSafariを使用しており、その他のブラウザは、ウェブサイト制作の動作検証や、SNSで別アカウントを使用するぐらいでしか、使用していませんでした。

しかし、このところ、仮想通貨取引所であるbitFlyerの公式ツールが、Safariだとおかしな挙動をしているため、代わりにChromeを使っていたのですが、ふとしたきっかけで、ChromeのExtention(機能拡張)に興味が湧き、自作することにしてみました。

と言っても、意外とやっていることは単純で、チャートの置き換えを含む、DOM操作のみです。

最初の目的は、チャートの置き換えだけだったのですが、よくよく考えてみると、以前にトレードツールを自作したのは、公式ツールの構造が気に入らなかったという理由からでしたので、ならば、公式ツールも組み替えてしまえ、ということで、Extentionを作るついでに、bitFlyer公式ツールを自分用にアレンジしてしまいました。

チャートの領域は広く、板と約定履歴は右に寄せて、オーダー部分はチャートのすぐ右へ移動、注文一覧もオーダー枠の真下に来るよう、取引履歴と逆の配置にしました。

又、数量と価格入力欄が小さすぎるのが気に入らなかったので、ボタンと同サイズに調整し、予想価格表示もボタン直下に下げてしまいました。

自分好みの配置で、誤操作も減ったので、こんなシンプルなハックで使いやすくなるのかと、嬉々としています、笑

Extentionの作り方について、詳しくは、公式サイトに色々と掲載されていますが、基本的には、manifest.json という、簡単な定義ファイルに名称やファイル構成を記述し、あとは、JavaScriptなどで動作内容を記述するのみです。

JavaScriptなどがわかる方であれば、すぐに制作できるでしょう。

今回はレイアウト変更だけでしたが、色々とイベントも追加できるようなので、公式ツールの機能拡張もしてみようかと思っています!


ENTRY LIST

コーダー/プログラマーのための電子書籍ハウツー: そろそろブログやSNSじゃなくて、本にまとめてみたら?

続・成功するフリーランス – 年収1000万円は簡単に実現できる: フリーランスを15年やってみてわかったこと

木を食べる: 花粉症・ダイエット・健康食品・食糧革命への福音書

思春期の男の子を持つ、お母さんのための処方箋: 「いいからやりなさい!」って言ってませんか?

BitMEX