物置小屋

メモ置き場

Vue.jsを使ったブラウザ拡張機能の作り方

ChromeExtension Chrome Extension Firefox FirefoxExtension メモ

はじめに

ChromeやFirefoxなどの拡張機能はHTML、JavaScriptなどで書くことができます。
JSのフレームワークにはVue.jsなど扱いやすいものがありますが、Content Security Policy(CSP)だかでエラーになるので基本そのまま使うことはできません。

この記事ではVue.jsを使ったブラウザ拡張機能開発を楽に行えるテンプレートを紹介します。

使うやつ

github.com

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」というものを作りました。

mnao305.hatenablog.com

ぜひこっちも見てみてね。

github.com

コードもGitHubにて公開しています。

終わりに

以上、メモ兼紹介記事でした。
拡張機能を作るのも公開するのもとても簡単なので一度作ってみてどうでしょうか。