Vue.jsを使ったブラウザ拡張機能の作り方
はじめに
ChromeやFirefoxなどの拡張機能はHTML、JavaScriptなどで書くことができます。
JSのフレームワークにはVue.jsなど扱いやすいものがありますが、Content Security Policy(CSP)だかでエラーになるので基本そのまま使うことはできません。
この記事ではVue.jsを使ったブラウザ拡張機能開発を楽に行えるテンプレートを紹介します。
使うやつ
vue-web-extension-boilerplate
というやつです。
また、vue-cliが入っていること前提です。
使い方
$ vue init kocal/vue-web-extension example-extension
上記コマンドを打つことでテンプレートが展開されます。 example-extension
のところは各自プロジェクト名を入力しましょう。
なんか色々聞かれるので順に見ていきましょう。カッコ内にそのままエンターした場合の値が載っています。
? Project name (example-extension) //プロジェクト名。 ? Project description (A Vue.js web extension) //説明文。わかりやすい文章に変えたほうが良い ? Author (mnao305 <example@example.com>) //作者 ? License //ライセンスとかあれば書こう ? Use Mozilla's web-extension polyfill? (https://github.com/mozilla/webextension-polyfill) (Y/n) //複数ブラウザに対応できるAPI ? Provide an options page? (https://developer.chrome.com/extensions/options) (Y/n) //オプションページを作るか否か ? Install vue-router? (Y/n) //vue-routerを使うか。複数ページにまたぐ気ならYes ? Install vuex? (Y/n) //vuexを使うか。複数コンポーネントで状態管理するならYes ? Install axios? (Y/n) //axiosを使うか。外部APIをGETしたりするならYes ? Install ESLint? (Y/n) //ESLintを使うか。ルールに基づいたコードを書きたいならYes ? Pick an ESLint preset (Use arrow keys) //ESlintのルールを何にするか。個人的にはStandardを選ぶ。 > Standard (https://github.com/standard/standard) Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) ? Install Prettier? (Y/n) //Prettierを使うか?コード整形したいならYes ? Setup a git precommit hook that will automatically run Prettier (Use arrow keys) //コミットする時にPrettierを使用するやつ > pretty-quick (https://github.com/azz/pretty-quick) precise-commits (https://github.com/nrwl/precise-commits) No, I will handle that myself ? Automatically install dependencies? (Use arrow keys) //NPMかYarnか。好みで。 > Yes, use NPM Yes, use Yarn No, I will handle that myself
これでプロジェクト名のディレクトリが作られ、もろもろ選んだやつがインストールされる。
作られたディレクトリに移動するとsrcディレクトリがある。基本その配下のファイルを編集していく感じとなる。
プロジェクトディレクトリにてnpm run build
を実行するとビルドが始まりdistディレクトリに作った拡張機能が吐き出される仕組みになっている。
このディレクトリをChromeの拡張機能のページにドラッグアンドドロップすれば開発版として導入もできる。なお、デベロッパーモードにする必要はあるので忘れずに。
もし配布する場合はzip形式にビルドする必要がある。上記npm run build
を実行したあとにnpm run build-zip
を実行すればdist-zip配下にzipファイルが吐き出される。
基本の使い方を確認したらあとはコードを書くだけだ。
これで作ったもの
これを使って「VRCFriendCheck」というものを作りました。
ぜひこっちも見てみてね。
コードもGitHubにて公開しています。
終わりに
以上、メモ兼紹介記事でした。
拡張機能を作るのも公開するのもとても簡単なので一度作ってみてどうでしょうか。
友利奈緒になった話
はい、先日ついに友利奈緒になりました。
というわけでなんか書く。いつも通りツイート貼るだけ記事です。
そもそも友利奈緒とは
皆さんご存知の通りCharlotteのめちゃくちゃかわいいキャラクターです。
見てない人は見ようね。
私が友利奈緒になるまで
時系列でてきとうに書く
最初の一歩
話はAmazon欲しいものリストに衣装を入れたところから始まる。
[milky time] ウィッグ付き★ Charlotte 制服 友利奈緒 ともり なお 風 コスプレ 衣装
- 出版社/メーカー: milky time
- メディア:
- この商品を含むブログを見る
それはある日突然届く
誕生日から数日後。それは届いた。
オオオオオ\\└( 'ω')┘//オオオオオ
— mnao305🐈 (@mnao_305) 2019年1月30日
友利奈緒のコスプレ衣装が届いたー!!!
ありがとうございます!使わせていただきます!!@suzumeiko_as さん。ほんとにありがとうございますです!! pic.twitter.com/PT4Df7chJo
フォロワーさんに友利奈緒の衣装を送っていただいた!!
貰ったからには着るしか無いよね^^
というわけで着た。
— mnao305🐈 (@mnao_305) 2019年2月2日
最高だね。
というわけで、衣装プレゼントして頂けたので念願の友利奈緒になったぞ🙌 pic.twitter.com/Le5GJutFU3
— mnao305🐈 (@mnao_305) 2019年2月2日
エンジニアが友利奈緒になるべき10の理由 #tomorinao https://t.co/zHRLZDauPc @SlideShareさんから
— mnao305🐈 (@mnao_305) 2019年2月3日
エンジニアは友利奈緒になるべきらしい!!!
最後に
みんなで友利奈緒になりましょ!