Vue.jsでChrome拡張機能をつくった話

本スライドは「第25回ゆるはち.it: Vue.js / Nuxt.jsについてゆるく話す」の登壇資料です。

こんにちは、あきねんです。
今までデザインの便利サイトをブックマークしていたのですが、その数が大量になり、結局使わないという問題に直面しました。
そこで、Webアプリ化してホームに設定すれば、毎回開くので便利なのでは?と思い至り、Chrome拡張を作ることにしました。 今回は、Vue.jsで↑のようなChrome拡張機能をつくったプロセスをご紹介します。

① Figmaでデザイン

まず、FigmaでUIを作成します。せっかく個人開発なので、dribbbleっぽいデザインにしてみました。

② Vue.jsで実装

各ページでコンポーネントはほぼ一緒なので、共通化できる部分は共通化しながら作成しました。
vue-routerでルーティングを制御し、SPA(Single Page Application)に。CSSはStylusを使用しています。

③ Chrome拡張に対応させる

④ ストアに申請する

まとめ