Vue.jsでChrome拡張機能をつくった話 / Created a Chrome extension in Vue.js

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

Transcript

1. Vue.jsで Chrome拡張機能を つくった話 第24回 ゆるはち.it 登壇資料
2. 自己紹介 長野県諏訪市出身 フロントエンドエンジニアからUI/UXデザイナーに転向 自分の気づきを貯めて振り返るアプリ Stockr のデザイン あきねん（小澤 晶徳）
3. TOP さあ、デザインの旅へ。日々のデザイン業務で便利な「おすすめ スポット」をまとめています。 こんなchrome拡張機能をつくった話をします。
4. ブラウザに溜まるブックマーク… Notionに整理して運用していた 経緯 経緯 Webアプリ化してホームに設定すれば 毎回開くので便利なのでは？
5. ① Figmaでデザイン せっかくなのでdribbbleっぽく（個人開発ならでは）
6. ・各ページでコンポーネントはほぼ一緒 →html直書きより共通化させたほうが早い ・vue-routerでルーティング制御 ・SPA(Single Page Application)に ・CSSはStylusを使用（BEM） ② Vue.jsで実装 ▲共通化
7. ひとまず完成 TOP さあ、デザインの旅へ。日々のデザイン業務で便利な「おすすめ スポット」をまとめています。
8. ただ作っただけでは 誰にも使ってもらえない…。 しばらくして… Chrome拡張機能にすれば よいのでは？
9. ・ブラウザ右上に表示する Browser actions ・アドレスバーに表示する Page actions ・ブラウザの画面を置き換える Override Pages の３種類 Chrome拡張機能について 今回は新規タブを置き換えたいので Override Pages を使用
10. ・HTMLファイル、manifest.json、アプリアイコン(PNG) だけ ・↑をzipで圧縮してストアにアップロードするだけで完了 ・今回はVue.jsでbuildしたものをzipで圧縮 manifest.json zipのなかみ 最小限のつくりかた
11. ストアに申請する _(:3」∠)_ ② 申請する ① 5ドル払う ③ 寝て待つ
12. 公開
13. ・htmlを表示するだけならChrome拡張はカンタン ・アプリ化することで「ツール」から「プロダクト」に 今後は… ・デザイナー向けツールとしての改良 ・レスポンシブ対応＆PWA化してスマホでも使えるように まとめ
14. ご清聴ありがとうございました spott ＼spottで検索／