はじめに

Vue.js を使って Chrome 拡張機能を開発できるテンプレートを探して、Kocal/vue-web-extension を見つけたので、簡単な使い方のメモ。

追記: 続編として Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法 という記事も書いた。

TL;DR

  • vue init kocal/vue-web-extension my-extension で初期化
  • npm run build で dist 配下にリリースファイル作成
  • npm run watch でファイル変更を検知してビルド
    • src 配下を編集して拡張機能を開発
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
    2. ビルド監視
    3. ディレクトリ構成
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.5
BuildVersion:	18F132

$ node --version
v12.7.0

$ npm --version
6.10.3

$ vue init --version
3.10.0

$ cat package.json
  ...
  "dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.6.10",
    "webextension-polyfill": "^0.3.1"
  },
  ...

詳細

セットアップ

@vue/cli-init をインストール。

1
$ npm i -g @vue/cli-init

Usage に従い作業、まずは初期化。選択肢は各自で適当に。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ vue init kocal/vue-web-extension my-extension

? Project name my-extension
? Project description A Vue.js web extension
? Author hoge
? License MIT
? Use Mozilla's web-extension polyfill? (https://github.com/mozilla/webextension-polyfill) Yes
? Provide an options page? (https://developer.chrome.com/extensions/options) Yes
? Install vue-router? No
? Install vuex? No
? Install axios? Yes
? Install ESLint? Yes
? Pick an ESLint preset Standard
? Install Prettier? Yes
? Setup a git precommit hook that will automatically run Prettier pretty-quick
? Automatically install dependencies? npm

   vue-cli · Generated "my-extension".
...

移動してパッケージインストール。

1
2
$ cd my-extension/
$ npm i

npm run build でビルド確認、成功すると dist 配下にファイルが生成される。

1
2
3
4
5
6
7
8
9
10
11
$ npm run build
> my-extension@1.0.0 build /Users/r17n/development/github/my-extension
...

$ ls -l dist/
total 32
-rw-r--r--  1 r17n  staff  10451  9  2 08:33 background.js
drwxr-xr-x  4 r17n  staff    128  9  2 08:33 icons/
-rw-r--r--  1 r17n  staff    455  9  2 08:33 manifest.json
drwxr-xr-x  5 r17n  staff    160  9  2 08:33 options/
drwxr-xr-x  5 r17n  staff    160  9  2 08:33 popup/

chrome://extensions/ を開いて、「パッケージ化されていない拡張機能を読み込む」で dist を指定。以下のポップアップが出れば OK。

拡張機能のアイコンをクリックすると、Hello world! のポップアップ。

ビルド監視

npm run watch (もしくは npm run watch:dev)でファイルに変更があった場合、即座にビルドが行われる。

1
$ npm run watch

npm run watch した状態で src/background.js を変更するとビルドが走る。

1
2
3
 global.browser = require('webextension-polyfill');
-alert('Hello world!');
+alert('Hello world!!!!');
1
2
3
4
5
Hash: a265d31a0cc8aa7a5a13
Version: webpack 4.39.3
Time: 988ms
Built at: 2019-09-02 8:43:32
...

chrome://extensions/ で更新ボタンをクリックすると、変更後のポップアップが表示される(はず)。

ディレクトリ構成

メモレベル。色々と間違ってるかも & 拡張機能の開発歴が短いので用語の使い方がおかしいかも。

  • content scripts は自前で用意。(当たり前だけど)
  • src/background.js が background scripts のエントリポイント。
  • src/popup/popup.js, src/popup/App.vue がポップアップ(拡張機能左クリック)のエントリポイント。
  • src/options/options.js, src/options/App.vue がオプションページ(拡張機能右クリック → オプション)のエントリポイント。

まとめ

  • vue init kocal/vue-web-extension my-extension で初期化
  • npm run build で dist 配下にリリースファイル作成
  • npm run watch でファイル変更を検知してビルド
    • src 配下を編集して拡張機能を開発

その他・メモ

拡張機能の触り部分しか見てないので、もう少し試したら追記(or 別記事の作成)するかも。

追記: 続編として Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法 という記事も書いた。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list