Chrome拡張機能のmanifestのバージョン管理をNode.js自作パッケージで効率化してみた
はじめに
この記事は、VSCodeなどでChrome 拡張機能を作成したことがある方向けの記事となりますので、各種設定は行った上で、追記が必要な箇所に絞って書いていこうと思います！
目的
Chrome拡張機能を開発する上でバージョンアップ作業や、ZIPファイルへの圧縮、アイコン、スクリーンショットの用意などいくつか手間になる作業があります。
特にバージョンアップ作業については更新をPushしたり、zipに圧縮した後に、実機で動作確認をする時に設定漏れに気づくことがあったりと意外と重要だったりします。
そのため、以前、Pythonで作成したコードをNode.jsで書き直してnpmでインストール可能なパッケージにして簡単なコマンドで更新できるように見直ししました！
今回は、作成したパッケージの使い方を書いて行きたいと思います。
作成したパッケージのリポジトリはこちらです！
現在も開発途中のため、いろいろと見直ししていますので、
追加要望などがありましたらコメントいただけると嬉しいです！
作成したパッケージについて
使用方法
extensions ディレクトリ配下のChrome拡張機能用ファイルに対して以下の機能が利用できます！
特によく使うのはext-patchコマンドで、慣れるとファイルを変更したらターミナルで『↑』→『Enter』を押してバージョンの更新する流れで作業ができるようになるため、タブ移動が不要な分、少し楽になると思います！
- ディレクトリ直下のManifest.jsonを参照し、バージョンアップ作業をコマンドで実行
- 拡張機能ファイルのzip圧縮
- アイコンの自動リサイズ機能
- スクリーンショット用画像の自動リサイズ機能
ディレクトリ構成
.
├── extensions
│ ├── manifest.json
│ ├── icons
│ │ └── icon.png
│ └── images
│ └── image.png
└── package.json
コマンド
インストール
yarn add -D https://github.com/cti1650/chrome_extension_maker_tools
アップデート
yarn upgrade chrome_extension_maker_tools
Manifest File Version管理
-
major アップデート
yarn ext-major{ - "version": "0.0.1", + "version": "1.0.0", } -
minor アップデート
yarn ext-minor{ - "version": "0.0.1", + "version": "0.1.0", } -
patch アップデート
yarn ext-patch{ - "version": "0.0.1", + "version": "0.0.2", } -
release
yarn ext-release{ - "version": "0.1.12", + "version": "1.0.0", } -
Manifest File 内容確認
yarn ext-manifest
オプション
-
アイコン生成（元ファイルは128px以上のサイズ推奨）
アイコン生成のコマンドを実行すると画像の生成と同時にManifest.jsonにも必要な設定が自動反映されます！. ├── extensions │ ├── manifest.json │ ├── icons -│ │ └── icon.png +│ │ ├── icon.png +│ │ ├── icon_16.png +│ │ ├── icon_24.png +│ │ ├── icon_32.png +│ │ ├── icon_48.png +│ │ └── icon_128.png{ "manifest_version": 3, ... "action": { "default_title": "Sample Extension", + "default_icon": { + "16": "icons/icon_16.png", + "24": "icons/icon_24.png", + "32": "icons/icon_32.png" + } }, + "icons": { + "16": "icons/icon_16.png", + "48": "icons/icon_48.png", + "128": "icons/icon_128.png" + }, ... }-
アイコン 画像サイズ変更
yarn ext-icon -
アイコン 透過処理＋画像サイズ変更
-
背景色と同色を透過したアイコンを生成
yarn ext-icon-transparent -
背景色に近い色を透過したアイコンを生成
yarn ext-icon-transparent --near
オプション 動作 --equal 背景色と同色を透過 (デフォルト) --eq 背景色と同色を透過 --near 背景色に近い色を透過 --ne 背景色に近い色を透過 --none 透過無効化 --no 透過無効化 -
-
-
スクリーンショット 画像サイズ変更
yarn ext-screenshot. ├── extensions │ ├── manifest.json │ ├── images -│ │ └── image.png +│ │ ├── image.png +│ │ ├── image_640x400.png +│ │ └── image_1280x800.png -
拡張機能 ZIP圧縮
yarn ext-zip
パッケージ作成にあたって参考にしたサイト
さいごに
chrome 拡張機能を開発されている方がいらっしゃれば、
参考になるかと思いますのでぜひ試してみてください！
細かい解説については今回は全く触れていないのですが、ご要望があれば追記していこうと思いますのでぜひコメント頂ければと思います！
Discussion