Shikiri

Shikiriは、Webページに自分だけのラベルを表示できるChrome拡張機能です。
特に本番/開発環境などを視覚的に区別し、誤操作を防止するのに役立ちます。

目次

• 機能
• インストール方法
• 使用方法
• 設定方法
• 開発方法
• アイコン生成
• ライセンス

機能

• URLパターン（正規表現対応）に基づいて特定のWebサイトにカスタムラベルを表示
• ラベルのテキスト、背景色、文字色、透明度をカスタマイズ可能
• 複数のサイト設定と優先度設定による柔軟な表示制御
• 設定のエクスポート・インポート機能
• ブラウザアクションでの簡単な有効/無効切り替え
• ページの操作を妨げないオーバーレイ表示

インストール方法

Chrome ウェブストアからインストール

（リリース後にリンクを追加）

ソースからのインストール

1. このリポジトリをクローンするか、ZIPファイルとしてダウンロード
2. 依存関係のインストール：

   pnpm install

3. 拡張機能のビルド：

   pnpm build

4. Chromeで chrome://extensions を開く
5. デベロッパーモードを有効にする
6. 「パッケージ化されていない拡張機能を読み込む」をクリック
7. build/chrome-mv3-prod フォルダを選択

使用方法

1. インストール後、Chromeのツールバーに Shikiri アイコンが表示されます
2. アイコンをクリックして拡張機能の有効/無効を切り替え
3. アイコンを右クリック→「オプション」または拡張機能の管理画面から設定画面を開く
4. 設定画面でURLパターンと表示するラベルの内容をカスタマイズ

設定方法

設定画面では以下の項目を設定できます：

• URLパターン: 正規表現形式で、ラベルを表示するURLを指定
• 表示テキスト: ラベルに表示するテキスト
• 背景色: ラベルの背景色（16進カラーコード）
• 文字色: テキストの色（16進カラーコード）
• 不透明度: ラベルの透明度（0〜100%）
• 優先度: 複数設定がある場合の適用優先順位

設定はJSONファイルとしてエクスポート/インポートが可能です。

開発方法

このプロジェクトは Plasmo フレームワークを使用しています。

開発環境のセットアップ

# 依存関係のインストール
pnpm install

# 開発モードでの起動
pnpm dev

# 本番用ビルド
pnpm build

# パッケージング
pnpm package

アイコン生成

SVGからPNGアイコンを生成するためのコマンド：

# 無効時のアイコン
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size  16x16 -background none /imgs/byobu-icon-off.svg /imgs/icon16-disabled.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 32x32 -background none /imgs/byobu-icon-off.svg /imgs/icon32-disabled.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 48x48 -background none /imgs/byobu-icon-off.svg /imgs/icon48-disabled.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 64x64 -background none /imgs/byobu-icon-off.svg /imgs/icon64-disabled.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 128x128 -background none /imgs/byobu-icon-off.svg /imgs/icon128-disabled.png

# 有効時のアイコン
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size  16x16 -background none /imgs/byobu-icon-on.svg /imgs/icon16.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 32x32 -background none /imgs/byobu-icon-on.svg /imgs/icon32.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 48x48 -background none /imgs/byobu-icon-on.svg /imgs/icon48.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 64x64 -background none /imgs/byobu-icon-on.svg /imgs/icon64.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 128x128 -background none /imgs/byobu-icon-on.svg /imgs/icon128.png
docker run -v $(pwd)/images:/imgs --entrypoint=convert dpokidov/imagemagick -size 1024x1024 -background none /imgs/byobu-icon-on.svg /imgs/icon.png