Zenn
🔧

Chrome拡張機能のmanifestのバージョン管理をNode.js自作パッケージで効率化してみた

2022/03/06に公開

はじめに

この記事は、VSCodeなどでChrome 拡張機能を作成したことがある方向けの記事となりますので、各種設定は行った上で、追記が必要な箇所に絞って書いていこうと思います!

目的

Chrome拡張機能を開発する上でバージョンアップ作業や、ZIPファイルへの圧縮、アイコン、スクリーンショットの用意などいくつか手間になる作業があります。

特にバージョンアップ作業については更新をPushしたり、zipに圧縮した後に、実機で動作確認をする時に設定漏れに気づくことがあったりと意外と重要だったりします。

そのため、以前、Pythonで作成したコードをNode.jsで書き直してnpmでインストール可能なパッケージにして簡単なコマンドで更新できるように見直ししました!

https://zenn.dev/cti1650/articles/extension_manifest_version

今回は、作成したパッケージの使い方を書いて行きたいと思います。

作成したパッケージのリポジトリはこちらです!
現在も開発途中のため、いろいろと見直ししていますので、
追加要望などがありましたらコメントいただけると嬉しいです!

https://github.com/cti1650/chrome_extension_maker_tools

作成したパッケージについて

使用方法

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 拡張機能を開発されている方がいらっしゃれば、
参考になるかと思いますのでぜひ試してみてください!

細かい解説については今回は全く触れていないのですが、ご要望があれば追記していこうと思いますのでぜひコメント頂ければと思います!

GitHubで編集を提案

Discussion

ログインするとコメントできます