Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Akinen
November 25, 2020

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

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

Akinen

November 25, 2020
Tweet

More Decks by Akinen

Other Decks in Design

Transcript

  1. Vue.jsで

    Chrome拡張機能を

    つくった話
    第24回 ゆるはち.it

    登壇資料

    View Slide

  2. 自己紹介
    長野県諏訪市出身

    フロントエンドエンジニアからUI/UXデザイナーに転向

    自分の気づきを貯めて振り返るアプリ Stockr のデザイン
    あきねん(小澤 晶徳)

    View Slide

  3. TOP
    さあ、デザインの旅へ。日々のデザイン業務で便利な「おすすめ
    スポット」をまとめています。
    こんなchrome拡張機能をつくった話をします。

    View Slide

  4. ブラウザに溜まるブックマーク…

    Notionに整理して運用していた
    経緯
    経緯
    Webアプリ化してホームに設定すれば

    毎回開くので便利なのでは?

    View Slide

  5. ① Figmaでデザイン
    せっかくなのでdribbbleっぽく(個人開発ならでは)

    View Slide

  6. ・各ページでコンポーネントはほぼ一緒

    →html直書きより共通化させたほうが早い


    ・vue-routerでルーティング制御

    ・SPA(Single Page Application)に

    ・CSSはStylusを使用(BEM)
    ② Vue.jsで実装
    ▲共通化

    View Slide

  7. ひとまず完成
    TOP
    さあ、デザインの旅へ。日々のデザイン業務で便利な「おすすめ
    スポット」をまとめています。

    View Slide

  8. ただ作っただけでは

    誰にも使ってもらえない…。
    しばらくして…
    Chrome拡張機能にすれば

    よいのでは?

    View Slide

  9. ・ブラウザ右上に表示する Browser actions

    ・アドレスバーに表示する Page actions

    ・ブラウザの画面を置き換える Override Pages

    の3種類
    Chrome拡張機能について
    今回は新規タブを置き換えたいので Override Pages を使用

    View Slide

  10. ・HTMLファイル、manifest.json、アプリアイコン(PNG) だけ

    ・↑をzipで圧縮してストアにアップロードするだけで完了

    ・今回はVue.jsでbuildしたものをzipで圧縮
    manifest.json zipのなかみ
    最小限のつくりかた

    View Slide

  11. ストアに申請する
    _(:3」∠)_
    ② 申請する
    ① 5ドル払う ③ 寝て待つ

    View Slide

  12. 公開

    View Slide

  13. ・htmlを表示するだけならChrome拡張はカンタン

    ・アプリ化することで「ツール」から「プロダクト」に


    今後は…

    ・デザイナー向けツールとしての改良

    ・レスポンシブ対応&PWA化してスマホでも使えるように
    まとめ

    View Slide

  14. ご清聴ありがとうございました
    spott
    \spottで検索/

    View Slide